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

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.

• Een Azure-account met een actief abonnement. Gratis een account maken
• Een GitHub-opslagplaats met uw statische websitecode. Als u geen GitHub-account hebt, meldt u zich gratis aan.
• Een werkende statische website die wordt gehost in Azure Storage. Meer informatie over het hosten van een statische website in Azure Storage. Als u dit voorbeeld wilt volgen, moet u ook Azure CDN implementeren.

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

OpenID Connect

Als u azure-aanmeldingsactie wilt gebruiken met OIDC, moet u een federatieve identiteitsreferentie configureren in een Microsoft Entra-toepassing of een door de gebruiker toegewezen beheerde identiteit.

Optie 1: Microsoft Entra-toepassing

• Maak een Microsoft Entra-toepassing met een service-principal via Azure Portal, Azure CLI of Azure PowerShell.
• Kopieer de waarden voor client-id, abonnements-id en map-id (tenant) voor later gebruik in uw GitHub Actions-werkstroom.
• Wijs een geschikte rol toe aan uw service-principal via Azure Portal, Azure CLI of Azure PowerShell.
• Configureer een federatieve identiteitsreferentie in een Microsoft Entra-toepassing om tokens te vertrouwen die door GitHub Actions zijn uitgegeven aan uw GitHub-opslagplaats.

Optie 2: Door de gebruiker toegewezen beheerde identiteit

• Een door een gebruiker toegewezen beheerde identiteit maken.
• Kopieer de waarden voor client-id, abonnements-id en map-id (tenant) voor later gebruik in uw GitHub Actions-werkstroom.
• Wijs een geschikte rol toe aan uw door de gebruiker toegewezen beheerde identiteit.
• Configureer een federatieve identiteitsreferentie op een door de gebruiker toegewezen beheerde identiteit om tokens te vertrouwen die zijn uitgegeven door GitHub Actions aan uw GitHub-opslagplaats.

Service/principal

• Maak een Microsoft Entra-toepassing met een service-principal via Azure Portal, Azure CLI of Azure PowerShell.
• Maak een clientgeheim voor uw service-principal via Azure Portal, Azure CLI of Azure PowerShell.
• Kopieer de waarden voor client-id, clientgeheim, abonnements-id en map-id (tenant) voor later gebruik in uw GitHub Actions-werkstroom.
• Wijs een geschikte rol toe aan uw service-principal via Azure Portal, Azure CLI of Azure PowerShell.

GitHub-geheimen configureren

OpenID Connect

U moet de client-id, map-id en abonnements-id van uw toepassing opgeven voor de aanmeldingsactie. Deze waarden kunnen rechtstreeks in de werkstroom worden opgegeven of kunnen worden opgeslagen in GitHub-geheimen en waarnaar wordt verwezen in uw werkstroom. Het opslaan van de waarden als GitHub-geheimen is de veiligere optie.

1. Ga in GitHub naar uw opslagplaats.

2. Selecteer Acties voor beveiligingsgeheimen > en variabelen>.

   

3. Selecteer Nieuw opslagplaatsgeheim.

   Notitie

   Als u de werkstroombeveiliging in openbare opslagplaatsen wilt verbeteren, gebruikt u omgevingsgeheimen in plaats van opslagplaatsgeheimen. Als voor de omgeving goedkeuring is vereist, heeft een taak geen toegang tot omgevingsgeheimen totdat een van de vereiste revisoren deze goedkeurt.

4. Geheimen maken voor AZURE_CLIENT_ID, AZURE_TENANT_IDen AZURE_SUBSCRIPTION_ID. Kopieer deze waarden uit uw Microsoft Entra-toepassing of door de gebruiker toegewezen beheerde identiteit voor uw GitHub-geheimen:

   GitHub-geheim	Microsoft Entra-toepassing of door de gebruiker toegewezen beheerde identiteit
   AZURE_CLIENT_ID	Client ID
   AZURE_SUBSCRIPTION_ID	Abonnements-id
   AZURE_TENANT_ID	Id van directory (tenant)

   Notitie

   Om veiligheidsredenen raden we u aan GitHub Secrets te gebruiken in plaats van waarden rechtstreeks door te geven aan de werkstroom.

Service/principal

1. Ga in GitHub naar uw opslagplaats.

2. Ga naar Instellingen in het navigatiemenu.

3. Selecteer Acties voor beveiligingsgeheimen > en variabelen>.

   

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

OpenID Connect

1. Ga naar Acties voor uw GitHub-opslagplaats.

   

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

4. Voeg een sectie machtigingen toe.

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

5. Voeg kassa- en aanmeldingsacties toe. Met deze acties wordt uw sitecode uitgecheckt en geverifieerd met Azure met behulp van de GitHub-geheimen die u eerder hebt gemaakt.

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

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

Service/principal

1. Ga naar Acties voor uw GitHub-opslagplaats.

   

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

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.

   

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