Aracılığıyla paylaş


Azure Depolama 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ı.

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

Azure CLI'da az ad sp create-for-rbac komutuyla bir hizmet sorumlusu oluşturun. Azure portalında veya Deneyin düğmesini seçerek bu komutu Azure Cloud Shell ile çalıştırın.

az ad sp create-for-rbac --name "myML" --role contributor \
                            --scopes /subscriptions/<subscription-id>/resourceGroups/<group-name> \
                            --json-auth

parametresi --json-auth Azure CLI sürümlerinde >= 2.51.0 kullanılabilir. Bu --sdk-auth kullanımdan önceki sürümler kullanımdan kaldırma uyarısıyla kullanılır.

Yukarıdaki örnekte yer tutucuları abonelik kimliğiniz, kaynak grubu adınız ve uygulama adınızla değiştirin. Çıktı, Aşağıdakine benzer şekilde App Service uygulamanıza erişim sağlayan rol ataması kimlik bilgilerine sahip bir JSON nesnesidir. Bu JSON nesnesini daha sonra için kopyalayın.

  {
    "clientId": "<GUID>",
    "clientSecret": "<GUID>",
    "subscriptionId": "<GUID>",
    "tenantId": "<GUID>",
    (...)
  }

GitHub gizli dizilerini yapılandırma

  1. GitHub'da deponuza gidin.

  2. Gezinti menüsünde Ayarlar gidin.

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

    Screenshot of adding a secret

  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

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

    GitHub Actions menu item

  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@v1
          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-wait az cdn endpoint purgeekleyebilirsiniz. Güvenliği artırmak için, depolama hesabı anahtarınızla seçeneği de ekleyebilirsiniz--account-key.

        - 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@v1
          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.

    Log of GitHub Actions run

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