Skip to main content

Bereitstellen in Azure Static Web Apps

Du kannst deine Web-App in Azure Static Web Apps im Rahmen deines Continuous Deployment- Workflows (CD) bereitstellen.

Einführung

In diesem Leitfaden wird erläutert, wie GitHub Actions zum Erstellen und Bereitstellen einer Web-App für Azure Static Web Apps verwendet wird.

Hinweis: Wenn deine GitHub Actions-Workflows auf Ressourcen eines Cloudanbieters zugreifen müssen, der OpenID Connect (OIDC) unterstützt, kannst du deine Workflows so konfigurieren, dass die Authentifizierung direkt beim Cloudanbieter erfolgt. Dadurch musst du diese Anmeldeinformationen nicht mehr als langlebige Geheimnisse speichern und profitierst zudem von weiteren Sicherheitsvorteilen. Weitere Informationen findest du unter Informationen zur Sicherheitshärtung mit OpenID Connect. und Konfigurieren von OpenID Connect in Azure.

Voraussetzungen

Bevor du deinen GitHub Actions-Workflow erstellst, musst du die folgenden Einrichtungsschritte ausführen:

  1. Erstelle eine Azure Static Web Apps-Instanz mit der Option „Sonstige“ für die Bereitstellungsquelle. Weitere Informationen findest du in der Azure-Dokumentation unter Schnellstart: Erstellen deiner ersten statischen Website im Azure-Portal.

  2. Erstelle ein Geheimnis namens AZURE_STATIC_WEB_APPS_API_TOKEN mit dem Wert des Bereitstellungstokens deiner statischen Web-App. Weitere Informationen zum Suchen deines Bereitstellungstokens findest du in der Azure-Dokumentation unter Zurücksetzen von Bereitstellungstoken in Azure Static Web Apps.

Erstellen des Workflows

Nachdem die Voraussetzungen erfüllt sind, kannst du mit dem Erstellen des Workflows fortfahren.

Der folgende Beispielworkflow zeigt, wie eine statische Azure-Web-App erstellt und bereitgestellt wird, wenn ein Push zum main-Branch erfolgt oder ein an main gerichteter Pull Request geöffnet, synchronisiert oder erneut geöffnet wird. Der Workflow beseitigt auch die entsprechende Pre-Production-Bereitstellung, wenn ein an main gerichteter Pull Request geschlossen wird.

Ändere unter dem Workflowschlüssel env die folgenden Werte:

  • APP_LOCATION in den Speicherort des Clientcodes.
  • API_LOCATION in den Speicherort deines API-Quellcodes. Wenn API_LOCATION nicht relevant ist, kannst du die Variable löschen und ebenso die Zeilen, in denen sie verwendet wird.
  • OUTPUT_LOCATION in den Speicherort der Clientcodebuildausgabe.

Weitere Informationen zu diesen Werten findest du in der Azure-Dokumentation unter Build-Konfiguration für Azure Static Web Apps.

YAML
# Dieser Workflow verwendet Aktionen, die nicht von GitHub zertifiziert sind.
# Sie werden von einem Drittanbieter bereitgestellt und unterliegen
# separaten Nutzungsbedingungen, Datenschutzbestimmungen und Support
# Onlinedokumentation.

# GitHub empfiehlt, Aktionen an einen Commit-SHA anzuheften.
# Um eine neuere Version zu erhalten, musst du den SHA aktualisieren.
# Du kannst auch auf ein Tag oder einen Branch verweisen, aber die Aktion kann sich ohne Vorwarnung ändern.

name: Deploy web app to Azure Static Web Apps

env:
  APP_LOCATION: "/" # location of your client code
  API_LOCATION: "api" # location of your api source code - optional
  OUTPUT_LOCATION: "build" # location of client code build output

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

permissions:
  issues: write
  contents: read
  pull-requests: write

jobs:
  build_and_deploy:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true
      - name: Build And Deploy
        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: ${{ env.APP_LOCATION }}
          api_location: ${{ env.API_LOCATION }}
          output_location: ${{ env.OUTPUT_LOCATION }}

  close_pull_request:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request
    steps:
      - name: Close Pull Request
        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"

Zusätzliche Ressourcen

Die folgenden Ressourcen können ebenfalls nützlich sein:

  • Den ursprünglichen Startworkflow findest du unter azure-staticwebapp.yml im GitHub Actions-Repository starter-workflows.
  • Die zum Bereitstellen der Web-App verwendete Aktion ist die offizielle Azure-Aktion Azure/static-web-apps-deploy.
  • Weitere Beispiele für GitHub Action-Workflows, die in Azure bereitgestellt werden können, findest du im Repository actions-workflow-samples.