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

Kom igång med GitHub Actions genom att använda 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 din webbplats till Azure från GitHub när du gör ändringar i webbplatsens kod.

Kommentar

Om du använder Azure Static Web Apps behöver du inte konfigurera ett GitHub Actions-arbetsflöde manuellt. Azure Static Web Apps skapar automatiskt ett GitHub Actions-arbetsflöde åt dig.

Förutsättningar

En Azure-prenumeration och ett GitHub-konto.

• Ett Azure-konto med en aktiv prenumeration. Skapa ett konto utan kostnad.
• En GitHub-lagringsplats med din statiska webbplatskod. Om du inte har ett GitHub-konto registrerar du dig kostnadsfritt.
• En fungerande statisk webbplats som finns i Azure Storage. Lär dig hur du är värd för en statisk webbplats i Azure Storage. Om du vill följa det här exemplet bör du även distribuera Azure CDN.

Kommentar

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

OpenID Connect

Om du vill använda Azure Login-åtgärden med OIDC måste du konfigurera en federerad identitetsautentiseringsuppgift i ett Microsoft Entra-program eller en användartilldelad hanterad identitet.

Alternativ 1: Microsoft Entra-program

• Skapa ett Microsoft Entra-program med tjänstens huvudnamn genom att Azure Portal, Azure CLI eller Azure PowerShell.
• Kopiera värdena för klient-ID, prenumerations-ID och katalog-ID (klientorganisation) som ska användas senare i ditt GitHub Actions-arbetsflöde.
• Tilldela tjänstens huvudnamn en lämplig roll genom att Azure Portal, Azure CLI eller Azure PowerShell.
• Konfigurera en federerad identitetsautentiseringsuppgift i ett Microsoft Entra-program för att lita på token som utfärdats av GitHub Actions till din GitHub-lagringsplats.

Alternativ 2: Användartilldelad hanterad identitet

• Skapa en användartilldelad hanterad identitet.
• Kopiera värdena för klient-ID, prenumerations-ID och katalog-ID (klientorganisation) som ska användas senare i ditt GitHub Actions-arbetsflöde.
• Tilldela en lämplig roll till din användartilldelade hanterade identitet.
• Konfigurera en federerad identitetsautentiseringsuppgift för en användartilldelad hanterad identitet för att lita på token som utfärdats av GitHub Actions till din GitHub-lagringsplats.

Tjänstens huvud

• Skapa ett Microsoft Entra-program med tjänstens huvudnamn genom att Azure Portal, Azure CLI eller Azure PowerShell.
• Skapa en klienthemlighet för tjänstens huvudnamn genom att Azure Portal, Azure CLI eller Azure PowerShell.
• Kopiera värdena för klient-ID, klienthemlighet, prenumerations-ID och katalog-ID (klientorganisation) som ska användas senare i ditt GitHub Actions-arbetsflöde.
• Tilldela tjänstens huvudnamn en lämplig roll genom att Azure Portal, Azure CLI eller Azure PowerShell.

Konfigurera GitHub-hemligheter

OpenID Connect

Du måste ange programmets klient-ID, katalog-ID (klient)-ID och prenumerations-ID för inloggningsåtgärden. Dessa värden kan antingen anges direkt i arbetsflödet eller lagras i GitHub-hemligheter och refereras till i arbetsflödet. Att spara värdena som GitHub-hemligheter är det säkrare alternativet.

1. Gå till din lagringsplats i GitHub.

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

   

3. Välj Ny lagringsplatshemlighet.

   Kommentar

   Om du vill förbättra arbetsflödets säkerhet på offentliga lagringsplatser använder du miljöhemligheter i stället för lagringsplatshemligheter. Om miljön kräver godkännande kan ett jobb inte komma åt miljöhemligheter förrän en av de nödvändiga granskarna godkänner det.

4. Skapa hemligheter för AZURE_CLIENT_ID, AZURE_TENANT_IDoch AZURE_SUBSCRIPTION_ID. Kopiera dessa värden från ditt Microsoft Entra-program eller användartilldelade hanterade identiteter för dina GitHub-hemligheter:

   GitHub-hemlighet	Microsoft Entra-program eller användartilldelad hanterad identitet
   AZURE_CLIENT_ID	Client ID
   AZURE_SUBSCRIPTION_ID	Prenumerations-ID:t
   AZURE_TENANT_ID	Katalog-ID (klientorganisation)

   Kommentar

   Av säkerhetsskäl rekommenderar vi att du använder GitHub Secrets i stället för att skicka värden direkt till arbetsflödet.

Tjänstens huvud

1. Gå till din lagringsplats i GitHub.

2. Gå till Inställningar i navigeringsmenyn.

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

   

4. Välj Ny lagringsplatshemlighet.

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

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

Lägg till arbetsflödet

OpenID Connect

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

   

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 with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   

4. Lägg till ett behörighetsavsnitt.

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

5. Lägg till utchecknings- och inloggningsåtgärder. Dessa åtgärder checkar ut din webbplatskod och autentiserar med Azure med hjälp av GitHub-hemligheterna som du skapade tidigare.

   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. Använd Azure CLI-åtgärden för att ladda upp koden till bloblagringen och 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 kan du lägga till alternativet --no-wait i az cdn endpoint purge. För att förbättra säkerheten kan du också lägga till --account-key alternativet med din lagringskontonyckel.

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

Tjänstens huvud

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

   

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. Dessa åtgärder 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@v2
         with:
             creds: ${{ secrets.AZURE_CREDENTIALS }}
   

5. Använd Azure CLI-åtgärden för att ladda upp koden till bloblagringen och 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 kan du lägga till alternativet --no-wait i az cdn endpoint purge. För att förbättra säkerheten kan du också lägga till --account-key alternativet med din lagringskontonyckel.

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

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.

   

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 din GitHub-lagringsplats.

Nästa steg

Läs mer om Azure Static Web Apps