Azure Depolama'da statik web sitenizi dağıtmak için GitHub Actions iş akışını kullanma

Azure depolama hesabına statik site dağıtmak için bir iş akışı kullanarak GitHub Actions'ı kullanmaya başlayın. GitHub Actions iş akışını ayarladıktan sonra, sitenizin kodunda değişiklik yaptığınızda sitenizi GitHub'dan Azure'a otomatik olarak dağıtabilirsiniz.

Not

Azure Static Web Apps kullanıyorsanız GitHub Actions iş akışını el ile ayarlamanız gerekmez. Azure Static Web Apps sizin için otomatik olarak bir GitHub Actions iş akışı oluşturur.

Önkoşullar

Azure aboneliği ve GitHub hesabı.

• Etkin aboneliği olan bir Azure hesabı. Ücretsiz hesap oluşturun.
• Statik web sitesi kodunuzu içeren bir GitHub deposu. GitHub hesabınız yoksa ücretsiz kaydolun.
• Azure Depolama'da barındırılan çalışan bir statik web sitesi. Azure Depolama'da statik web sitesi barındırmayı öğrenin. Bu örneği takip etmek için Azure CDN'yi de dağıtmanız gerekir.

Not

Dünyanın dört bir yanındaki kullanıcılarınızın gecikme süresini azaltmak ve depolama hesabınıza yönelik işlem sayısını azaltmak için bir içerik teslim ağı (CDN) kullanmak yaygın bir işlemdir. Statik içeriğin bulut tabanlı bir depolama hizmetine dağıtılması, potansiyel olarak pahalı işlem örneğine olan ihtiyacı azaltabilir. Daha fazla bilgi için bkz . Statik İçerik Barındırma düzeni.

Dağıtım kimlik bilgileri oluşturma

OpenID Connect

OIDC ile Azure Oturum Açma eylemini kullanmak için, Microsoft Entra uygulamasında veya kullanıcı tarafından atanan yönetilen kimlikte federasyon kimlik bilgilerini yapılandırmanız gerekir.

Seçenek 1: Microsoft Entra uygulaması

• Azure portalı, Azure CLI veya Azure PowerShell tarafından hizmet sorumlusuyla bir Microsoft Entra uygulaması oluşturun.
• GitHub Actions iş akışınızda daha sonra kullanmak üzere İstemci Kimliği, Abonelik Kimliği ve Dizin (kiracı) kimliği değerlerini kopyalayın.
• Azure portalı, Azure CLI veya Azure PowerShell ile hizmet sorumlunuza uygun bir rol atayın.
• GitHub Actions tarafından GitHub deponuza verilen belirteçlere güvenmek için bir Microsoft Entra uygulamasında federasyon kimliği kimlik bilgilerini yapılandırın.

Seçenek 2: Kullanıcı tarafından atanan yönetilen kimlik

• Kullanıcı tarafından atanan bir yönetilen kimlik oluşturun.
• GitHub Actions iş akışınızda daha sonra kullanmak üzere İstemci Kimliği, Abonelik Kimliği ve Dizin (kiracı) kimliği değerlerini kopyalayın.
• Kullanıcı tarafından atanan yönetilen kimliğinize uygun bir rol atayın.
• GitHub Actions tarafından GitHub deponuza verilen belirteçlere güvenmek için kullanıcı tarafından atanan yönetilen kimlikte federasyon kimliği kimlik bilgilerini yapılandırın.

Hizmet sorumlusu

• Azure portalı, Azure CLI veya Azure PowerShell tarafından hizmet sorumlusuyla bir Microsoft Entra uygulaması oluşturun.
• Azure portalı, Azure CLI veya Azure PowerShell ile hizmet sorumlunuz için bir istemci gizli dizisi oluşturun.
• GitHub Actions iş akışınızda daha sonra kullanmak üzere İstemci Kimliği, İstemci Gizli Anahtarı, Abonelik Kimliği ve Dizin (kiracı) kimliği değerlerini kopyalayın.
• Azure portalı, Azure CLI veya Azure PowerShell ile hizmet sorumlunuza uygun bir rol atayın.

GitHub gizli dizilerini yapılandırma

OpenID Connect

Oturum açma eylemine uygulamanızın İstemci Kimliğini, Dizin (kiracı) Kimliğini ve Abonelik Kimliğini sağlamanız gerekir. Bu değerler doğrudan iş akışında sağlanabilir veya GitHub gizli dizilerinde depolanabilir ve iş akışınızda başvurulabilir. Değerleri GitHub gizli dizileri olarak kaydetmek daha güvenli bir seçenektir.

1. GitHub'da deponuza gidin.

2. Güvenlik > Gizli Dizileri ve değişkenler Eylemler'i> seçin.

   

3. Yeni depo gizli dizisi'ni seçin.

   Not

   Genel depolarda iş akışı güvenliğini geliştirmek için depo gizli dizileri yerine ortam gizli dizilerini kullanın. Ortam onay gerektiriyorsa, gerekli gözden geçirenlerden biri onaylayana kadar iş ortam gizli dizilerine erişemez.

4. , AZURE_CLIENT_IDve AZURE_TENANT_IDiçin AZURE_SUBSCRIPTION_IDgizli diziler oluşturun. Bu değerleri GitHub gizli dizileriniz için Microsoft Entra uygulamanızdan veya kullanıcı tarafından atanan yönetilen kimlikten kopyalayın:

   GitHub gizli dizisi	Microsoft Entra uygulaması veya kullanıcı tarafından atanan yönetilen kimlik
   AZURE_CLIENT_ID	Müşteri Kimliği
   AZURE_SUBSCRIPTION_ID	Abonelik Kimliği
   AZURE_TENANT_ID	Dizin (kiracı) kimliği

   Not

   Güvenlik nedeniyle, değerleri doğrudan iş akışına geçirmek yerine GitHub Gizli Dizilerini kullanmanızı öneririz.

Hizmet sorumlusu

1. GitHub'da deponuza gidin.

2. Gezinti menüsünde Ayarlar'a gidin.

3. Güvenlik > Gizli Dizileri ve değişkenler Eylemler'i> seçin.

   

4. Yeni depo gizli dizisi'ni seçin.

5. Azure CLI komutundaki JSON çıkışının tamamını gizli dizinin değer alanına yapıştırın. Gizli diziye adını AZURE_CREDENTIALSverin.

6. Add secret (Gizli dizi ekle) öğesini seçin.

İş akışınızı ekleme

OpenID Connect

1. GitHub deponuz için Eylemler'e gidin.

   

2. İş akışınızı kendiniz ayarlayın'ı seçin.

3. İş akışı dosyanızın bölümünden on: sonra her şeyi silin. Örneğin, kalan iş akışınız şöyle görünebilir.

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   

4. İzinler bölümü ekleyin.

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   
   permissions:
         id-token: write
         contents: read
   

5. Kullanıma alma ve oturum açma eylemleri ekleyin. Bu eylemler site kodunuzu kullanıma alır ve daha önce oluşturduğunuz GitHub gizli dizilerini kullanarak Azure'da kimlik doğrulaması yapar.

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   
   permissions:
         id-token: write
         contents: read
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v3
       - uses: azure/login@v2
         with:
         client-id: ${{ secrets.AZURE_CLIENT_ID }}
         tenant-id: ${{ secrets.AZURE_TENANT_ID }}
         subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   

6. Kodunuzu blob depolamaya yüklemek ve CDN uç noktanızı temizlemek için Azure CLI eylemini kullanın. için az storage blob upload-batchyer tutucuyu depolama hesabı adınızla değiştirin. Betik kapsayıcıya $web yüklenir. için az cdn endpoint purgeyer tutucuları CDN profil adınız, CDN uç nokta adı ve kaynak grubunuzla değiştirin. CDN temizleme işleminizi hızlandırmak için seçeneğine --no-waitaz cdn endpoint purgeekleyebilirsiniz. Güvenliği artırmak için, depolama hesabı anahtarınızla --account-keyseçeneği de ekleyebilirsiniz.

       - name: Upload to blob storage
         uses: azure/CLI@v1
         with:
           inlineScript: |
               az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
       - name: Purge CDN endpoint
         uses: azure/CLI@v1
         with:
           inlineScript: |
              az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
   

7. Azure oturumunuzu kapatma eylemi ekleyerek iş akışınızı tamamlayın. Tamamlanmış iş akışı aşağıdadır. Dosya, deponuzun klasöründe görünür .github/workflows .

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   
   permissions:
         id-token: write
         contents: read
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v3
       - uses: azure/login@v2
         with:
         client-id: ${{ secrets.AZURE_CLIENT_ID }}
         tenant-id: ${{ secrets.AZURE_TENANT_ID }}
         subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   
       - name: Upload to blob storage
         uses: azure/CLI@v1
         with:
           inlineScript: |
               az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
       - name: Purge CDN endpoint
         uses: azure/CLI@v1
         with:
           inlineScript: |
              az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
   
     # Azure logout
       - name: logout
         run: |
               az logout
         if: always()
   

Hizmet sorumlusu

1. GitHub deponuz için Eylemler'e gidin.

   

2. İş akışınızı kendiniz ayarlayın'ı seçin.

3. İş akışı dosyanızın bölümünden on: sonra her şeyi silin. Örneğin, kalan iş akışınız şöyle görünebilir.

   name: CI
   
   on:
       push:
           branches: [ main ]
   

4. İş akışınızı Blob storage website CI yeniden adlandırın ve kullanıma alma ve oturum açma eylemlerini ekleyin. Bu eylemler site kodunuzu kullanıma alır ve daha önce oluşturduğunuz GitHub gizli dizisini AZURE_CREDENTIALS kullanarak Azure'da kimlik doğrulaması yapar.

   name: Blob storage website CI
   
   on:
       push:
           branches: [ main ]
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v3
       - uses: azure/login@v2
         with:
             creds: ${{ secrets.AZURE_CREDENTIALS }}
   

5. Kodunuzu blob depolamaya yüklemek ve CDN uç noktanızı temizlemek için Azure CLI eylemini kullanın. için az storage blob upload-batchyer tutucuyu depolama hesabı adınızla değiştirin. Betik kapsayıcıya $web yüklenir. için az cdn endpoint purgeyer tutucuları CDN profil adınız, CDN uç nokta adı ve kaynak grubunuzla değiştirin. CDN temizleme işleminizi hızlandırmak için seçeneğine --no-waitaz cdn endpoint purgeekleyebilirsiniz. Güvenliği artırmak için, depolama hesabı anahtarınızla --account-keyseçeneği de ekleyebilirsiniz.

       - name: Upload to blob storage
         uses: azure/CLI@v1
         with:
           inlineScript: |
               az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
       - name: Purge CDN endpoint
         uses: azure/CLI@v1
         with:
           inlineScript: |
              az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
   

6. Azure oturumunuzu kapatma eylemi ekleyerek iş akışınızı tamamlayın. Tamamlanmış iş akışı aşağıdadır. Dosya, deponuzun klasöründe görünür .github/workflows .

   name: Blob storage website CI
   
   on:
       push:
           branches: [ main ]
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v3
       - uses: azure/login@v2
         with:
             creds: ${{ secrets.AZURE_CREDENTIALS }}
   
       - name: Upload to blob storage
         uses: azure/CLI@v1
         with:
           inlineScript: |
               az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
       - name: Purge CDN endpoint
         uses: azure/CLI@v1
         with:
           inlineScript: |
              az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
   
     # Azure logout
       - name: logout
         run: |
               az logout
         if: always()
   

Dağıtımınızı gözden geçirme

1. GitHub deponuz için Eylemler'e gidin.

2. İş akışınızın çalıştırmasının ayrıntılı günlüklerini görmek için ilk sonucu açın.

   

Kaynakları temizleme

Statik web siteniz ve GitHub deponuz artık gerekli olmadığında, kaynak grubunu ve GitHub deponuzu silerek dağıttığınız kaynakları temizleyin.

Sonraki adımlar

Azure Static Web Apps hakkında bilgi edinin