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

  • Artikel

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

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

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-portalen eller genom att välja knappen Prova .

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

Parametern --json-auth är tillgänglig i Azure CLI-versioner >= 2.51.0. Versioner före den här användningen --sdk-auth med en utfasningsvarning.

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 App Service-app på liknande sätt som 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. Gå till Inställningar i navigeringsmenyn.

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

    Screenshot of adding a secret

  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

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

    GitHub Actions menu item

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

    Log of GitHub Actions run

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