Web uygulamanızı Azure Static Web Apps'e dağıtma

Bu makalede, istediğiniz çerçeveye sahip yeni bir web uygulaması oluşturacak, yerel olarak çalıştıracak ve ardından Azure Static Web Apps'e dağıtacaksınız.

Önkoşullar

Bu öğreticiyi tamamlamak için aşağıdakiler gerekir:

Kaynak	Açıklama
Azure Aboneliği	Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
Node.js	Sürüm 20.0 veya üzerini yükleyin.
Azure CLI	Sürüm 2.6x veya üzerini yükleyin.

Ayrıca bir metin düzenleyicisine de ihtiyacınız vardır. Azure ile çalışmak için Visual Studio Code önerilir.

Bu makalede oluşturduğunuz uygulamayı istediğiniz platformda çalıştırabilirsiniz: Linux, macOS, Windows veya Linux için Windows Alt Sistemi.

Web uygulamanızı oluşturma

1. Bir terminal penceresi açın.

2. Kodunuz için uygun bir dizin seçin ve aşağıdaki komutları çalıştırın.

   npm create vite@latest swa-vanilla-demo -- --template=vanilla
   cd swa-vanilla-demo
   npm install
   npm run dev
   

   Bu komutları çalıştırdığınızda geliştirme sunucusu web sitenizin URL'sini yazdırır. Bağlantıyı seçerek varsayılan tarayıcınızda açın.

   

2. Kodunuz için uygun bir dizin seçin ve aşağıdaki komutları çalıştırın.

   npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults
   cd swa-angular-demo
   npm start
   

   Bu komutları çalıştırdığınızda geliştirme sunucusu web sitenizin URL'sini yazdırır. Bağlantıyı seçerek varsayılan tarayıcınızda açın.

   

2. Kodunuz için uygun bir dizin seçin ve aşağıdaki komutları çalıştırın.

   npm create vite@latest swa-react-demo -- --template react
   cd swa-react-demo
   npm install
   npm run dev
   

   Bu komutları çalıştırdığınızda geliştirme sunucusu web sitenizin URL'sini yazdırır. Bağlantıyı seçerek varsayılan tarayıcınızda açın.

   

2. Kodunuz için uygun bir dizin seçin ve aşağıdaki komutları çalıştırın.

   npm create vite@latest swa-vue-demo -- --template vue
   cd swa-vue-demo
   npm install
   npm run dev
   

   Bu komutları çalıştırdığınızda geliştirme sunucusu web sitenizin URL'sini yazdırır. Bağlantıyı seçerek varsayılan tarayıcınızda açın.

   

3. Geliştirme sunucusunu durdurmak için Cmd/Ctrl+

Azure'da statik web uygulaması oluşturma

Azure portalını, Azure CLI'yı, Azure PowerShell'i veya Visual Studio Code'u (Azure Static Web Apps uzantısıyla) kullanarak statik bir web uygulaması oluşturabilirsiniz. Bu öğreticide Azure CLI kullanılır.

1. Azure CLI'da oturum açın:

   az login
   

   Varsayılan olarak, bu komut işlemi tamamlamak için bir tarayıcı açar. Azure CLI, bu yöntem ortamınızda çalışmazsa oturum açmak için çeşitli yöntemleri destekler.

2. Birden çok aboneliğiniz varsa bir abonelik seçmeniz gerekebilir. Geçerli aboneliğinizi aşağıdaki komutu kullanarak görüntüleyebilirsiniz:

   az account show
   

   Bir abonelik seçmek için komutunu çalıştırabilirsiniz az account set .

   az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"
   

3. Kaynak grubu oluşturun.

   Kaynak grupları, Azure kaynaklarını birlikte gruplandırmak için kullanılır.

   az group create -n swa-tutorial -l centralus --query "properties.provisioningState"
   

   -n parametresi site adına-l, parametre ise Azure konum adına başvurur. komutu ile --query "properties.provisioningState" sona erer, bu nedenle komut yalnızca bir başarı veya hata iletisi döndürür.

4. Yeni oluşturduğunuz kaynak grubunuzda statik bir web uygulaması oluşturun.

   az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"
   

   -n parametresi site adına, parametre ise -g Azure kaynak grubunun adına başvurur. Önceki adımda kullandığınız kaynak grubu adını belirttiğinizden emin olun. Statik web uygulamanız genel olarak dağıtıldığı için konum, uygulamanızı nasıl dağıttığınızda önemli değildir.

   Komut, web uygulamanızın URL'sini döndürecek şekilde yapılandırılır. Dağıtılan web uygulamanızı görüntülemek için değeri terminal pencerenizden tarayıcınıza kopyalayabilirsiniz.

Dağıtım için yapılandırma

1. Uygulama kodunuza aşağıdaki içeriklere sahip bir staticwebapp.config.json dosya ekleyin:

   {
       "navigationFallback": {
           "rewrite": "/index.html"
       }
   }
   

   Geri dönüş yolu tanımlamak, sitenizin index.html etki alanında yapılan istekler için dosyayı sunucu yapmasına olanak tanır.

   Kullanıyorsanız bu dosyayı kaynak kodu denetim sisteminize (git gibi) denetleyin.

2. Projenize Azure Static Web Apps (SWA) CLI'sini yükleyin.

   npm install -D @azure/static-web-apps-cli
   

   SWA CLI, sitenizi buluta dağıtmadan önce yerel olarak geliştirmenize ve test etmenize yardımcı olur.

3. Projeniz için yeni bir dosya oluşturun ve adını verin swa-cli.config.json.

   Dosyada swa-cli.config.json sitenizin nasıl derlenip dağıtılacağı açıklanır.

   Bu dosya oluşturulduktan sonra, komutunu kullanarak npx swa init içeriğini oluşturabilirsiniz.

   npx swa init --yes
   

4. Uygulamanızı dağıtım için oluşturun.

   npx swa build
   

5. Azure'da oturum açmak için SWA CLI'yi kullanın.

   npx swa login --resource-group swa-tutorial --app-name swa-demo-site
   

   Önceki bölümde oluşturduğunuz kaynak grubu adını ve statik web uygulaması adını kullanın. Oturum açmaya çalışırken, gerekirse işlemi tamamlamak için bir tarayıcı açılır.

Uyarı

Angular v17 ve üzeri dağıtılabilir dosyaları, seçebileceğiniz çıkış yolunun alt dizinine yerleştirin. SWA CLI, dizinin belirli konumunu bilmiyor. Aşağıdaki adımlarda bu yolun nasıl doğru ayarlanacağı gösterilmektedir.

Projenizde oluşturulan index.html dosyasını dist/swa-angular-demo/browser klasöründe bulun.

1. Ortam değişkenini SWA_CLI_OUTPUT_LOCATION index.html dosyasını içeren dizine ayarlayın:

   bash

   export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"
   

   csh

   setenv SWA_CLI_OUTPUT_LOCATION "dist/swa-angular-demo/browser"
   

   PowerShell

   $env:SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"
   

   CMD

   set SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"
   

Sitenizi Azure’a dağıtma

Kodunuzu statik web uygulamanıza dağıtın:

npx swa deploy --env production

Uygulamanın dağıtılması birkaç dakika sürebilir. İşlem tamamlandıktan sonra sitenizin URL'si görüntülenir.

Çoğu sistemde, sitenin URL'sini seçerek varsayılan tarayıcınızda açabilirsiniz.

Kaynakları temizleme (isteğe bağlı)

Diğer öğreticilere devam ediyorsanız Azure kaynak grubunu ve kaynaklarını kaldırın:

az group delete -n swa-tutorial

Bir kaynak grubunu kaldırdığınızda, içerdiği tüm kaynakları silersiniz. Bu eylemi geri alamazsınız.

Sonraki adımlar

Kimlik doğrulaması ekleme

İlgili içerik

• Kimlik doğrulama ve yetkilendirme
• Veritabanı bağlantıları
• Özel Etki Alanları
• Video serisi: Azure Static Web Apps ile web sitelerini buluta dağıtma