Öğretici: Azure statik Web Apps Azure DevOps ile yayımlama

Bu makalede Azure DevOpskullanılarak Azure statik Web Apps nasıl dağıtılacağı gösterilmektedir.

Bu öğreticide şunların nasıl yapıldığını öğrenirsiniz:

• Azure statik Web Apps sitesini ayarlama
• Statik bir Web uygulaması derlemek ve yayımlamak için Azure işlem hattı oluşturma

Önkoşullar

• Etkin Azure hesabı: Bir hesabınız yoksa, ücretsiz olarak bir hesap oluşturabilirsiniz.
• Azure DevOps projesi: Bir tane yoksa, ücretsiz olarak bir proje oluşturabilirsiniz.
  • Azure DevOps Azure Pipelines içerir. Azure Pipelines kullanmaya başlarken yardıma ihtiyacınız varsa, bkz. ilk işlem hattınızı oluşturma.
  • Statik Web uygulaması ardışık düzen görevi şu anda yalnızca Linux makinelerinde çalışmaktadır. Aşağıda bahsedilen işlem hattı çalıştırılırken lütfen bir Linux sanal makinesinde çalıştığından emin olun.

Azure DevOps statik Web uygulaması oluşturma

1. Azure Repos ' de deponuza gidin.

2. Örnek bir uygulamayı içeri aktarmaya başlamak için Içeri aktar ' ı seçin.

   

3. Kopya URL'sinde, girin https://github.com/staticwebdev/vanilla-api.git .

4. İçeri aktar'ı seçin.

Statik web uygulaması oluşturma

1. Azure Portalgidin.

2. Kaynak Oluştur’u seçin.

3. Statik Web Apps arayın.

4. Static Web Apps’ı seçin.

5. Oluştur’u seçin.

6. Aşağıdaki değerlerle yeni bir statik Web uygulaması oluşturun.

   

   Ayar	Değer
   Abonelik	Azure abonelik adınız.
   Kaynak Grubu	Var olan bir grup adı seçin veya yeni bir tane oluşturun.
   Name	Mydevopsapp girin.
   Barındırma planı türü	Ücretsiz' ı seçin.
   Bölge	Size en yakın bölgeyi seçin.
   Kaynak	Diğer öğesini seçin.

7. Gözden geçir + oluştur’u seçin

8. Oluştur’u seçin.

9. Dağıtım başarılı olduktan sonra Kaynağa Git' i seçin.

10. Dağıtım belirtecini Yönet' i seçin.

11. Dağıtım belirtecini kopyalayın ve dağıtım belirteci değerini başka bir ekranda kullanmak üzere bir metin düzenleyicisine yapıştırın.

    Not

    Bu değer, önümüzdeki adımlarda daha fazla değer kopyalayacağından, bu değerin Şu anda ayrılmış olarak ayarlanır.

    

Azure DevOps işlem hattı görevi oluşturma

1. daha önce oluşturulan Azure Repos depoya gidin.

2. Derlemeyi ayarla' yı seçin.

   

3. Ardışık düzeni yapılandırın ekranında Başlatıcı işlem hattı' nı seçin.

   

4. Aşağıdaki YAML 'yi kopyalayın ve işlem hattınızdaki üretilen yapılandırmayı bu kodla değiştirin.

   trigger:
     - main
   
   pool:
     vmImage: ubuntu-latest
   
   steps:
     - checkout: self
       submodules: true
     - task: AzureStaticWebApp@0
       inputs:
         app_location: '/src'
         api_location: 'api'
         output_location: '/src'
         azure_static_web_apps_api_token: $(deployment_token)
   

   Not

   Örnek uygulamayı kullanmıyorsanız,, app_location api_location ve değerlerinin output_location uygulamanızdaki değerlerle eşleşecek şekilde değiştirilmesi gerekir.

   Özellik	Açıklama	Örnek	Gerekli
   app_location	Uygulama kodunuzun konumu.	/Uygulama kaynak kodunuzun deponun kökünde olup olmadığını veya /app uygulama kodunuzun adlı bir dizinde olup olmadığını girin app .	Yes
   api_location	Azure Işlevleri kodunuzun konumu.	/apiUygulama kodunuzun adlı bir klasörde olup olmadığını girin api . Klasörde hiçbir Azure Işlevleri uygulaması algılanmazsa, derleme başarısız olmaz, iş akışı bir API istemediğinizi varsayar.	No
   output_location	Derleme çıkış dizininin öğesine göre konumu app_location .	Uygulama kaynak kodunuz konumunda bulunuyorsa /app ve derleme betiği dosyaları klasörüne çıktıdaysa /app/build build değer olarak ayarlanır output_location .	Hayır

   azure_static_web_apps_api_tokenDeğer kendi kendine yönetilir ve el ile yapılandırılır.

5. Değişkenler' i seçin.

6. Yeni değişken' i seçin.

7. Değişkeni deployment_token (iş akışındaki ad ile eşleşen) adlandırın.

8. Daha önce bir metin düzenleyicisine yapıştırdığınız dağıtım belirtecini kopyalayın.

9. Değer kutusuna dağıtım belirtecine yapıştırın.

   

10. Bu değeri gizli tut ' u seçin.

11. Tamam’ı seçin.

12. İşlem hattınızda YAML 'ye geri dönmek için Kaydet ' i seçin.

13. Kaydet ve Çalıştır iletişim kutusunu açmak için Kaydet ve Çalıştır ' ı seçin.

    

14. Komut zinciri çalıştırmak için Kaydet ve Çalıştır ' ı seçin.

15. Dağıtım başarılı olduktan sonra dağıtım yapılandırmasına bağlantılar içeren Azure statik Web Apps genel bakışa gidin. kaynak bağlantının artık Azure DevOps deposunun dalını ve konumunu nasıl işaret ettiğini göz önünde görürsünüz.

16. Yeni dağıtılan Web sitenizi görmek için URL 'yi seçin.

    

Kaynakları temizleme

Kaynak grubunu silerek dağıttığınız kaynakları temizleyin.

1. Azure portal, sol menüden kaynak grubu ' nu seçin.
2. Ada göre filtrele alanına kaynak grubu adını girin.
3. Bu öğreticide kullandığınız kaynak grubu adını seçin.
4. Üstteki menüden kaynak grubunu sil ' i seçin.

Sonraki adımlar