Använda GitHub Actions arbetsflöde för att distribuera din statiska webbplats i Azure Storage

Kom igång med GitHub Actions med hjälp av ett arbetsflöde för att distribuera en statisk plats till ett Azure Storage-konto. När du har konfigurerat ett GitHub Actions arbetsflöde kan du automatiskt distribuera webbplatsen till Azure från GitHub när du gör ändringar i webbplatsens kod.

Anteckning

Om du använder Aplicativos Web Estáticos do Azure behöver du inte konfigurera ett GitHub Actions arbetsflöde manuellt. Aplicativos Web Estáticos do Azure skapar automatiskt ett GitHub Actions arbetsflöde åt dig.

Krav

En Azure-prenumeration och ett GitHub-konto.

Anteckning

Det är vanligt att använda ett nätverk för innehållsleverans (CDN) för att minska svarstiden för dina användare runt om i världen och minska antalet transaktioner till ditt lagringskonto. Distribution av statiskt innehåll till en molnbaserad lagringstjänst kan minska behovet av potentiellt dyra beräkningsinstanser. Mer information finns i mönstret Värd för statiskt innehåll.

Generera autentiseringsuppgifter för distribution

Skapa ett huvudnamn för tjänsten med kommandot az ad sp create-for-rbac i Azure CLI. Kör det här kommandot med Azure Cloud Shell i Azure-Portal eller genom att välja knappen Prova.

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

I exemplet ovan ersätter du platshållarna med ditt prenumerations-ID, resursgruppsnamn och appnamn. Utdata är ett JSON-objekt med autentiseringsuppgifterna för rolltilldelning som ger åtkomst till din Serviço de Aplicativo app som liknar nedan. Kopiera det här JSON-objektet för senare.

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

Konfigurera GitHub-hemligheter

  1. Gå till din lagringsplats i GitHub.

  2. Välj Säkerhetshemligheter > och variabler > Åtgärder.

    Skärmbild av att lägga till en hemlighet

  3. Välj Ny lagringsplatshemlighet.

  4. Klistra in hela JSON-utdata från Azure CLI-kommandot i hemlighetens värdefält. Ge hemligheten namnet AZURE_CREDENTIALS.

  5. Välj Add secret (Lägg till hemlighet).

Lägga till arbetsflödet

  1. Gå till Åtgärder för din GitHub-lagringsplats.

    GitHub Actions menyalternativ

  2. Välj Konfigurera arbetsflödet själv.

  3. Ta bort allt efter avsnittet i on: arbetsflödesfilen. Ditt återstående arbetsflöde kan till exempel se ut så här.

    name: CI
    
    on:
        push:
            branches: [ main ]
    
  4. Byt namn på arbetsflödet Blob storage website CI och lägg till utchecknings- och inloggningsåtgärderna. De här åtgärderna checkar ut din webbplatskod och autentiserar med Azure med hjälp av GitHub-hemligheten AZURE_CREDENTIALS som du skapade tidigare.

    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. Använd Azure CLI-åtgärden för att ladda upp koden till bloblagringen och för att rensa CDN-slutpunkten. För az storage blob upload-batchersätter du platshållaren med namnet på ditt lagringskonto. Skriptet laddas upp till containern $web . För az cdn endpoint purgeersätter du platshållarna med ditt CDN-profilnamn, CDN-slutpunktsnamn och resursgrupp. Om du vill påskynda CDN-rensningen --no-wait kan du lägga till alternativet i az cdn endpoint purge. För att förbättra säkerheten kan du också lägga till --account-key alternativet med lagringskontonyckeln.

        - 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. Slutför arbetsflödet genom att lägga till en åtgärd för utloggning av Azure. Här är det slutförda arbetsflödet. Filen visas i mappen på .github/workflows lagringsplatsen.

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

Granska distributionen

  1. Gå till Åtgärder för din GitHub-lagringsplats.

  2. Öppna det första resultatet om du vill se detaljerade loggar för arbetsflödets körning.

    Logg över GitHub Actions köra

Rensa resurser

När din statiska webbplats och GitHub-lagringsplats inte längre behövs rensar du de resurser som du har distribuerat genom att ta bort resursgruppen och GitHub-lagringsplatsen.

Nästa steg