Öğretici: Azure Static Web Apps'te Bitbucket depolarını dağıtma

Azure Static Web Apps, çeşitli sağlayıcılarla çalışmaya olanak sağlayan esnek dağıtım seçeneklerine sahiptir. Bu öğreticide, Linux sanal makinesi kullanarak Bitbucket'te barındırılan bir web uygulamasını Azure Static Web Apps'e dağıtacaksınız.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

Önkoşullar

• Bitbucket hesabı
  • İki aşamalı doğrulamayı etkinleştirdiğinizden emin olun
• Azure hesabı
  • Azure aboneliğiniz yoksa ücretsiz bir deneme hesabı oluşturun.

Depo oluşturma

Bu makalede, bitbucket deposuna kod aktarmak için kaynak olarak bir GitHub deposu kullanılır.

1. Bitbucket'te oturum açın.

2. https://bitbucket.org/repo/import İçeri aktarma işlemini başlatmak için adresine gidin.

3. Eski depo etiketinin altındaki URL kutusuna, seçtiğiniz çerçeve için depo URL'sini girin.

   • Çerçeve Yok
   • Angular
   • Blazor
   • React
   • Vue

   https://github.com/staticwebdev/vanilla-basic.git

4. Proje etiketinin yanında Yeni proje oluştur'u seçin.

5. MyStaticWebApp girin.

6. Depoyu içeri aktar'ı seçin ve web sitesi deponuzu oluştururken biraz bekleyin.

Ana dalı ayarlama

Zaman zaman şablon deposunun birden fazla dalı vardır. Bitbucket'in ana etiketi depodaki ana dalla eşlediğinden emin olmak için aşağıdaki adımları kullanın.

1. Depo ayarları'nı seçin.
2. Gelişmiş bölümünü genişletin.
3. Ana dal etiketi altında açılan listede main öğesinin seçili olduğundan emin olun.
4. Değişiklik yaptıysanız Değişiklikleri kaydet'i seçin.
5. Geri'yi seçin.

Statik web uygulaması oluşturma

Artık depo oluşturulduğuna göre, Azure portalından statik bir web uygulaması oluşturabilirsiniz.

1. Azure portala gidin.

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

3. Statik Web Uygulamaları'nı arayın.

4. Static Web Apps’ı seçin.

5. Oluştur'u belirleyin.

6. Temel Bilgiler bölümünde, yeni uygulamanızı yapılandırarak başlayın.

   Ayar	Value
   Azure aboneliği	Azure aboneliği seçin.
   Kaynak Grubu	Yeni oluştur bağlantısını seçin ve static-web-apps-bitbucket girin.
   Veri Akışı Adı	my-first-static-web-app girin.
   Plan türü	Ücretsiz'i seçin.
   Azure İşlevleri API ve hazırlama ortamları için bölge	Size en yakın bölgeyi seçin.
   Kaynak	Diğer'i seçin.

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

8. Oluştur'u belirleyin.

9. Kaynağa git’i seçin.

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

11. Dağıtım belirteci değerini kopyalayın ve daha sonra kullanmak üzere bir düzenleyicide bir kenara ayarlayın.

12. Dağıtım belirtecini yönet penceresinde Kapat'ı seçin.

Bitbucket'te işlem hattı görevi oluşturma

1. Bitbucket'teki depoya gidin.

2. Kaynak menü öğesini seçin.

3. Dal açılan listesinde ana dalın seçildiğinden emin olun.

4. İşlem Hatları'ı seçin.

5. Metin bağlantısını seçin İlk işlem hattınızı oluşturun.

6. Başlangıç işlem hattı kartında Seç'i seçin.

7. Yapılandırma dosyasına aşağıdaki YAML'yi girin.

   • Çerçeve Yok
   • Angular
   • Blazor
   • React
   • Vue

   pipelines:
     branches:
      main:
       - step: 
           name: Deploy to test
           deployment: test
           script:
             - chown -R 165536:165536 $BITBUCKET_CLONE_DIR
             - pipe: microsoft/azure-static-web-apps-deploy:main
               variables:
                   APP_LOCATION: '$BITBUCKET_CLONE_DIR/src'
                   OUTPUT_LOCATION: '$BITBUCKET_CLONE_DIR/src'
                   API_TOKEN: $deployment_token
   

   Not

   Bu örnekte değeri pipe olarak microsoft/azure-static-web-apps-deploy:mainayarlanır. İşlem hattınızın farklı bir dalla çalışmasını istiyorsanız değerini istediğiniz dal adıyla değiştirin main .

   Statik web uygulamanızın yapılandırma dosyasında aşağıdaki yapılandırma özellikleri kullanılır.

   Değişken, $BITBUCKET_CLONE_DIR derleme işlemi sırasında deponun kök klasör konumuna eşler.

   Özellik	Açıklama	Örnek	Zorunlu
   app_location	Uygulama kodunuzun konumu.	Uygulama kaynak kodunuzun deponun kökünde olup olmadığını veya / uygulama kodunuzun adlı /appbir dizinde olup olmadığını girinapp.	Yes
   api_location	Azure İşlevleri kodunuzun konumu.	API kodunuz adlı /apibir klasördeyse girinapi. Klasörde hiçbir Azure İşlevleri uygulaması algılanırsa, derleme başarısız olmaz, iş akışı api istemediğinizi varsayar.	Hayır
   output_location	Derleme çıktı dizininin konumu ile göreli olarak app_location.	Uygulama kaynak kodunuz konumundaysa /appve derleme betiği klasöre /app/build dosya çıkışı oluşturuyorsa, değer olarak build ayarlayınoutput_location.	Hayır

Ardından değişkeni için API_TOKEN değer tanımlayın.

1. Değişken ekle'yi seçin.
2. Ad kutusuna, iş akışındaki adla eşleşen deployment_token girin.
3. Değer kutusuna önceki adımda ayırdığınız dağıtım belirteci değerini yapıştırın.
4. Güvenli onay kutusunu işaretleyin.
5. Ekle'yi seçin.
6. Dosyayı işle'yi seçin ve işlem hatları sekmenize dönün.

İşlem Hatları penceresinde biraz bekleyin; dağıtım durumunuzu görürsünüz. Dağıtımın çalışması tamamlandıktan sonra web sitesini tarayıcınızda görüntüleyebilirsiniz.

Web sitesini görüntüleme

Statik uygulama dağıtmanın iki yönü vardır. İlk adım, uygulamanızı oluşturan temel Alınan Azure kaynaklarını oluşturur. İkincisi, uygulamanızı derleyen ve yayımlayan bir Bitbucket iş akışıdır.

Yeni statik sitenize gidebilmeniz için önce dağıtım derlemesinin çalıştırılmasını tamamlamanız gerekir.

Statik Web Uygulamalarına genel bakış penceresinde, web uygulamanızla etkileşim kurmanıza yardımcı olacak bir dizi bağlantı görüntülenir.

1. Azure portalında statik web uygulamanıza dönün.
2. Genel Bakış penceresine gidin.
3. URL etiketinin altındaki bağlantıyı seçin. Web siteniz yeni bir sekmede yüklenir.

Kaynakları temizleme

Bu uygulamayı kullanmaya devam etmeyecekseniz kaynak grubunu kaldırarak Azure Static Web Apps örneğini ve ilişkili tüm hizmetleri silebilirsiniz.

1. Genel Bakış bölümünde static-web-apps-bitbucket kaynak grubunu seçin.
2. Kaynak grubunun üst kısmındaki Kaynak grubunusil Genel Bakış'ı seçin.
3. "static-web-apps-bitbucket" öğesini silmek istediğinizden emin misiniz? onay iletişim kutusunda static-web-apps-bitbucket kaynak grubu adını girin.
4. Sil'i seçin.

Kaynak grubunu silme işleminin tamamlanması birkaç dakika sürebilir.

Sonraki adımlar