Delen via

GitHub Actions-werkstroom gebruiken om uw statische website te implementeren in Azure Storage

  • Artikel

Ga aan de slag met GitHub Actions met behulp van een werkstroom om een statische site te implementeren in een Azure-opslagaccount. Zodra u een GitHub Actions-werkstroom hebt ingesteld, kunt u uw site automatisch vanuit GitHub implementeren in Azure wanneer u wijzigingen aanbrengt in de code van uw site.

Notitie

Als u Azure Static Web Apps gebruikt, hoeft u geen werkstroom voor GitHub Actions handmatig in te stellen. Azure Static Web Apps maakt automatisch een GitHub Actions-werkstroom voor u.

Vereisten

Een Azure-abonnement en een GitHub-account.

Notitie

Het is gebruikelijk om een CDN (Content Delivery Network) te gebruiken om de latentie voor uw gebruikers over de hele wereld te verminderen en het aantal transacties naar uw opslagaccount te verminderen. Het implementeren van statische inhoud in een cloudopslagservice kan de noodzaak voor mogelijk dure rekeninstanties verminderen. Zie het patroon Static Content Hosting voor meer informatie.

Genereer implementatiereferenties

Maak een service-principal met de opdracht az ad sp create-for-rbac in de Azure CLI. Voer deze opdracht uit met Azure Cloud Shell in de Azure Portal of door de knop Uitproberen te selecteren.

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

De parameter --json-auth is beschikbaar in Azure CLI-versies >= 2.51.0. Versies vóór dit gebruik --sdk-auth met een afschaffingswaarschuwing.

Vervang in het bovenstaande voorbeeld de tijdelijke aanduidingen door uw abonnements-id, resourcegroepnaam en app-naam. De uitvoer is een JSON-object met de roltoewijzingsreferenties die toegang bieden tot uw App Service-app, vergelijkbaar met hieronder. Kopieer dit JSON-object voor later gebruik.

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

GitHub-geheimen configureren

  1. Ga in GitHub naar uw opslagplaats.

  2. Ga naar Instellingen in het navigatiemenu.

  3. Selecteer Acties voor beveiligingsgeheimen > en variabelen>.

    Screenshot of adding a secret

  4. Selecteer Nieuw opslagplaatsgeheim.

  5. Plak de volledige JSON-uitvoer van de Azure CLI-opdracht in het waardeveld van het geheim. Geef het geheim de naam AZURE_CREDENTIALS.

  6. Selecteer Geheim toevoegen.

Voeg uw werkstroom toe

  1. Ga naar Acties voor uw GitHub-opslagplaats.

    GitHub Actions menu item

  2. Selecteer Uw werkstroom zelf instellen.

  3. Verwijder alles na de sectie on: van uw werkstroombestand. Uw resterende werkstroom kan er bijvoorbeeld als volgt uitzien.

    name: CI

on:
    push:
        branches: [ main ]

  4. Wijzig de naam van uw werkstroom Blob storage website CI en voeg de acties voor uitchecken en aanmelden toe. Met deze acties wordt uw sitecode uitgecheckt en geverifieerd met Azure met behulp van het AZURE_CREDENTIALS GitHub-geheim dat u eerder hebt gemaakt.

    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. Gebruik de Azure CLI-actie om uw code te uploaden naar blobopslag en om uw CDN-eindpunt te verwijderen. Vervang az storage blob upload-batchde tijdelijke aanduiding door de naam van uw opslagaccount. Het script wordt geüpload naar de $web container. Vervang az cdn endpoint purgede tijdelijke aanduidingen door de naam van uw CDN-profiel, de naam van het CDN-eindpunt en de resourcegroep. Als u uw CDN-opschoning wilt versnellen, kunt u de --no-wait optie toevoegen aan az cdn endpoint purge. Als u de beveiliging wilt verbeteren, kunt u ook de optie toevoegen met de --account-key sleutel van uw opslagaccount.

        - 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. Voltooi uw werkstroom door een actie toe te voegen aan de afmelding van Azure. Dit is de voltooide werkstroom. Het bestand wordt weergegeven in de map .github/workflows van uw opslagplaats.

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

Beoordeel uw implementatie

  1. Ga naar Acties voor uw GitHub-opslagplaats.

  2. Open het eerste resultaat om gedetailleerde logboeken van de uitvoering van de werkstroom weer te geven.

    Log of GitHub Actions run

Resources opschonen

Wanneer uw statische website en GitHub-opslagplaats niet meer nodig zijn, schoont u de resources op die u hebt geïmplementeerd door de resourcegroep en uw GitHub-opslagplaats te verwijderen.

Volgende stappen

Meer informatie over Azure Static Web Apps