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

  • Artikel

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

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

Generieren Sie in der Azure CLI mit dem Befehl az ad sp create-for-rbac einen Dienstprinzipal. Führen Sie diesen Befehl mit Azure Cloud Shell im Azure-Portal oder durch Auswählen der Schaltfläche Ausprobieren aus.

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

Der Parameter --json-auth ist in Azure CLI-Versionen >= 2.51.0 verfügbar. Frühere Versionen nutzen --sdk-auth mit einer Einstellungswarnung.

Ersetzen Sie im obigen Beispiel die Platzhalter durch Ihre Abonnement-ID, den Ressourcengruppennamen und den App-Namen. Die Ausgabe ist ein JSON-Objekt mit den Anmeldeinformationen für die Rollenzuweisung, die ähnlich wie unten Zugriff auf Ihre App Service-App gewähren. Kopieren Sie dieses JSON-Objekt zur späteren Verwendung.

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

Konfigurieren von GitHub-Geheimnissen

  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.

    Screenshot of adding a secret

  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

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

    GitHub Actions menu item

  2. Wählen Sie Set up your workflow yourself (Workflow selbst einrichten) aus.

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

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

    Log of GitHub Actions run

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.