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:
-
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.
-
Erstelle ein Geheimnis namens
AZURE_STATIC_WEB_APPS_API_TOKENmit 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_LOCATIONin den Speicherort des Clientcodes.API_LOCATIONin den Speicherort deines API-Quellcodes. WennAPI_LOCATIONnicht relevant ist, kannst du die Variable löschen und ebenso die Zeilen, in denen sie verwendet wird.OUTPUT_LOCATIONin den Speicherort der Clientcodebuildausgabe.
Weitere Informationen zu diesen Werten findest du in der Azure-Dokumentation unter Build-Konfiguration für Azure Static Web Apps.
# 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"
# 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:
- Die ursprüngliche Workflowvorlage finden Sie unter
azure-staticwebapp.ymlim GitHub Actions-Repositorystarter-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.