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

2025-02-25

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.

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.

GitHub gizli dizilerini yapılandırma

OpenID Connect
Hizmet sorumlusu

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.

GitHub'da deponuza gidin.
Güvenlik > Gizli Dizileri ve değişkenler Eylemler'i> seçin.
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.

, AZURE_TENANT_IDve AZURE_SUBSCRIPTION_IDiçin AZURE_CLIENT_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	Client ID
AZURE_SUBSCRIPTION_ID	Subscription ID
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.

GitHub'da deponuza gidin.
Gezinti menüsünde Ayarlar'a gidin.
Güvenlik > Gizli Dizileri ve değişkenler Eylemler'i> seçin.
Yeni depo gizli dizisi'ni seçin.
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.
Add secret (Gizli dizi ekle) öğesini seçin.

İş akışınızı ekleme

OpenID Connect
Hizmet sorumlusu

GitHub deponuz için Eylemler'e gidin.
İş akışınızı kendiniz ayarlayın'ı seçin.
İş 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 ]
```

İzinler bölümü ekleyin.

name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

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 }}

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 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"
```

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()

GitHub deponuz için Eylemler'e gidin.
İş akışınızı kendiniz ayarlayın'ı seçin.
İş 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 ]
```
İş 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 }}
```
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 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"
```

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

GitHub deponuz için Eylemler'e gidin.
İş 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

Aracılığıyla paylaş