Verwenden eines GitHub Actions-Workflows zum Bereitstellen einer statischen Website in Azure Storage

Verwenden Sie als Einstieg in GitHub Actions einen Workflow zum Bereitstellen einer statischen Website in einem Azure-Speicherkonto. Nachdem Sie einen GitHub Actions-Workflow eingerichtet haben, können Sie Ihre Website über GitHub automatisch in Azure bereitstellen, wenn Sie Änderungen am Code der Website vornehmen.

Hinweis

Wenn Sie Azure Static Web Apps verwenden, müssen Sie keinen GitHub Actions-Workflow manuell einrichten. Azure Static Web Apps erstellt für Sie automatisch einen GitHub Actions-Workflow.

Voraussetzungen

Azure-Abonnement und GitHub-Konto

• Ein Azure-Konto mit einem aktiven Abonnement. Sie können kostenlos ein Konto erstellen.
• Ein GitHub-Repository mit dem Code Ihrer statischen Website. Wenn Sie kein GitHub-Konto besitzen, können Sie sich kostenlos registrieren.
• funktionierende, in Azure Storage gehostete statische Website. Informieren Sie sich, wie Sie eine statische Website in Azure Storage hosten. Wenn Sie diesem Beispiel folgen möchten, sollten Sie auch Azure CDN bereitstellen.

Hinweis

Es ist üblich, ein Content Delivery Network (CDN) zu verwenden, um die Latenz für Ihre Benutzer auf der ganzen Welt zu reduzieren und die Anzahl der Transaktionen in Ihrem Speicherkonto zu verringern. Durch Bereitstellen statischer Inhalte in einem cloudbasierten Speicherdienst kann eine potenziell kostspielige Compute-Instanz vermieden werden. Weitere Informationen finden Sie unter Muster für das Hosten von statischen Inhalten.

Generieren von Anmeldeinformationen für die Bereitstellung

OpenID Connect

Um die Aktion Azure-Anmeldung mit OIDC zu verwenden, müssen Sie Anmeldeinformationen für eine Verbundidentität in einer Microsoft Entra-Anwendung oder eine benutzerseitig zugewiesene verwaltete Identität konfigurieren.

Option 1: Microsoft Entra-Anwendung

• Erstellen Sie eine Microsoft Entra-Anwendung mit einem Dienstprinzipal im Azure-Portal, mit Azure CLI oder Azure PowerShell.
• Kopieren Sie die Werte für Client-ID, Abonnement-ID, und Verzeichnis-ID (Mandanten-ID), um sie später in Ihrem GitHub Actions-Workflow zu verwenden.
• Weisen Sie Ihrem Dienstprinzipal über das Azure-Portal, die Azure CLI oder Azure PowerShell eine geeignete Rolle zu.
• Konfigurieren Sie Verbundidentitäts-Anmeldeinformationen für eine Microsoft Entra-Anwendung, um Token zu vertrauen, die von GitHub Actions an Ihr GitHub-Repository ausgestellt wurden.

Option 2: Benutzerseitig zugewiesene verwaltete Identität

• Erstellen einer benutzerseitig zugewiesenen verwalteten Identität.
• Kopieren Sie die Werte für Client-ID, Abonnement-ID, und Verzeichnis-ID (Mandanten-ID), um sie später in Ihrem GitHub Actions-Workflow zu verwenden.
• Weisen Sie der benutzerseitig zugewiesenen verwalteten Identität eine geeignete Rolle zu.
• Konfigurieren Sie Verbundidentitäts-Anmeldeinformationen für eine benutzerseitig zugewiesene verwaltete Identität, um Token zu vertrauen, die von GitHub Actions an Ihr GitHub-Repository ausgegeben werden.

Dienstprinzipal

• Erstellen Sie eine Microsoft Entra-Anwendung mit einem Dienstprinzipal im Azure-Portal, mit Azure CLI oder Azure PowerShell.
• Erstellen Sie über das Azure-Portal, die Azure CLI oder Azure PowerShell einen geheimen Clientschlüssel für Ihren Dienstprinzipal.
• Kopieren Sie die Werte für Client-ID, Geheimer Clientschlüssel, Abonnement-ID,und Verzeichnis-ID (Mandanten-ID), um sie später in Ihrem GitHub Actions-Workflow zu verwenden.
• Weisen Sie Ihrem Dienstprinzipal über das Azure-Portal, die Azure CLI oder Azure PowerShell eine geeignete Rolle zu.

Konfigurieren von GitHub-Geheimnissen

OpenID Connect

Sie müssen die Client-ID Ihrer Anwendung, die Verzeichnis-ID (Mandanten-ID) und die Abonnement-ID für die Anmeldeaktion bereitstellen. Diese Werte können entweder direkt im Workflow bereitgestellt werden oder in GitHub-Geheimnissen gespeichert und darauf in Ihrem Workflow verwiesen werden. Das Speichern der Werte als GitHub-Geheimnisse ist die sicherere Option.

1. Wechseln Sie in GitHub zu Ihrem Repository.

2. Wählen Sie Security > Secrets and variables > Actions (Sicherheit > Geheimnisse und Variablen > Aktionen) aus.

   

3. Wählen Sie New repository secret (Neues Repositorygeheimnis) aus.

   Hinweis

   Um die Sicherheit von Workflows in öffentlichen Repositorys zu verbessern, verwenden Sie Umgebungsgeheimnisse anstelle von Repositorygeheimnissen. Wenn für die Umgebung eine Genehmigung erforderlich ist, kann ein Auftrag erst dann auf Umgebungsgeheimnisse zugreifen, wenn einer der erforderlichen Reviewer den Auftrag genehmigt hat.

4. Erstellen Sie Geheimnisse für AZURE_CLIENT_ID, AZURE_TENANT_ID und AZURE_SUBSCRIPTION_ID. Kopieren Sie diese Werte aus Ihrer Microsoft Entra-Anwendung oder benutzerseitig zugewiesenen verwalteten Identität für Ihre GitHub-Geheimnisse:

   GitHub-Geheimnis	Microsoft Entra-Anwendung oder benutzerseitig zugewiesene verwaltete Identität
   AZURE_CLIENT_ID	Client-ID
   AZURE_SUBSCRIPTION_ID	Abonnement-ID
   AZURE_TENANT_ID	Verzeichnis-ID (Mandant)

   Hinweis

   Aus Sicherheitsgründen empfehlen wir die Verwendung von GitHub-Geheimnissen, anstatt Werte direkt an den Workflow zu übergeben.

Dienstprinzipal

1. Wechseln Sie in GitHub zu Ihrem Repository.

2. Gehen Sie im Navigationsmenü auf Einstellungen.

3. Wählen Sie Security > Secrets and variables > Actions (Sicherheit > Geheimnisse und Variablen > Aktionen) aus.

   

4. Wählen Sie New repository secret (Neues Repositorygeheimnis) aus.

5. Fügen Sie die gesamte JSON-Ausgabe aus dem Azure CLI-Befehl in das Wertfeld des Geheimnisses ein. Geben Sie dem Geheimnis den Namen AZURE_CREDENTIALS.

6. Klicken Sie auf Add secret (Geheimnis hinzufügen).

Hinzufügen des Workflows

OpenID Connect

1. Navigieren Sie für Ihr GitHub-Repository zu Actions (Aktionen).

   

2. Klicken Sie auf Set up your workflow yourself (Workflow selbst einrichten).

3. Löschen Sie alles nach dem Abschnitt on: Ihrer Workflowdatei. Der verbleibende Workflow könnte beispielsweise wie folgt aussehen:

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   

4. Fügen Sie einen Abschnitt für die Berechtigungen hinzu.

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

5. Fügen Sie Check-Out- und Anmeldeaktionen hinzu. Diese Aktionen checken Ihren Websitecode aus und authentifizieren Sie mithilfe der zuvor erstellten GitHub-Geheimnisse mit Azure.

   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. Verwenden Sie die Azure CLI-Aktion, um Ihren Code in Azure Blob Storage hochzuladen und den CDN-Endpunkt zu bereinigen. Ersetzen Sie für az storage blob upload-batch den Platzhalter durch den Namen Ihres Speicherkontos. Das Skript wird in den $web-Container hochgeladen. Ersetzen Sie für az cdn endpoint purge die Platzhalter durch den Namen Ihres CDN-Profils, CDN-Endpunkts und der Ressourcengruppe. Um die CDN-Bereinigung zu beschleunigen, können Sie die --no-wait-Option zu az cdn endpoint purge hinzufügen. Um die Sicherheit zu erhöhen, können Sie auch die --account-key Option mit Ihrem Speicherkontoschlüsselhinzufügen.

       - 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. Vervollständigen Sie Ihren Workflow, indem Sie eine Aktion zum Abmelden von Azure hinzufügen. Hier sehen Sie den fertigen Workflow: Die Datei wird im Ordner .github/workflows Ihres Repositorys angezeigt.

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

Dienstprinzipal

1. Navigieren Sie für Ihr GitHub-Repository zu Actions (Aktionen).

   

2. Klicken Sie auf Set up your workflow yourself (Workflow selbst einrichten).

3. Löschen Sie alles nach dem Abschnitt on: Ihrer Workflowdatei. Der verbleibende Workflow könnte beispielsweise wie folgt aussehen.

   name: CI
   
   on:
       push:
           branches: [ main ]
   

4. Benennen Sie den Workflow in Blob storage website CI um, und fügen Sie die Aktionen zum Auschecken und Anmelden hinzu. Diese Aktionen checken Ihren Websitecode aus und authentifizieren Sie mithilfe des zuvor erstellten GitHub-Geheimnisses AZURE_CREDENTIALS mit Azure.

   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. Verwenden Sie die Azure CLI-Aktion, um Ihren Code in Azure Blob Storage hochzuladen und den CDN-Endpunkt zu bereinigen. Ersetzen Sie für az storage blob upload-batch den Platzhalter durch den Namen Ihres Speicherkontos. Das Skript wird in den $web-Container hochgeladen. Ersetzen Sie für az cdn endpoint purge die Platzhalter durch den Namen Ihres CDN-Profils, CDN-Endpunkts und der Ressourcengruppe. Um die CDN-Bereinigung zu beschleunigen, können Sie die --no-wait-Option zu az cdn endpoint purge hinzufügen. Um die Sicherheit zu erhöhen, können Sie auch die --account-key Option mit Ihrem Speicherkontoschlüsselhinzufügen.

       - 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. Vervollständigen Sie Ihren Workflow, indem Sie eine Aktion zum Abmelden von Azure hinzufügen. Hier sehen Sie den fertigen Workflow: Die Datei wird im Ordner .github/workflows Ihres Repositorys angezeigt.

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

Überprüfen der Bereitstellung

1. Navigieren Sie für Ihr GitHub-Repository zu Actions (Aktionen).

2. Öffnen Sie das erste Ergebnis, um ausführliche Protokolle zur Ausführung des Workflows anzuzeigen.

   

Bereinigen von Ressourcen

Wenn Ihre statische Website und das GitHub-Repository nicht mehr benötigt werden, bereinigen Sie die bereitgestellten Ressourcen, indem Sie die Ressourcengruppe und Ihr GitHub-Repository löschen.

Nächste Schritte

Informieren Sie sich über Azure Static Web Apps.