# Bereitstellen in Azure Static Web Apps

Erfahren Sie, wie Sie eine Web-App als Teil Ihrer CD-Workflows (Continuous Deployment) für Azure Static Web App bereitstellen.

## Voraussetzungen

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

1. Erstellen Sie eine Azure Static Web App mit der Option "Other" für die Bereitstellungsquelle. Weitere Informationen finden Sie unter [Quickstart: Erstellen Ihrer ersten statischen Website im Azure Portal](https://docs.microsoft.com/azure/static-web-apps/get-started-portal) in der Azure Dokumentation.

1. Erstelle ein Geheimnis namens `AZURE_STATIC_WEB_APPS_API_TOKEN` mit dem Wert des Bereitstellungstokens deiner statischen Web-App. Weitere Informationen zum Auffinden Ihres Bereitstellungstokens finden Sie in [Reset-Bereitstellungstoken in Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/deployment-token-management) in der Azure Dokumentation.

## Erstellen des Workflows

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

Im folgenden Beispielworkflow wird veranschaulicht, wie Eine Azure statische Web-App erstellt und bereitgestellt wird, wenn ein Push an die `main` Branch erfolgt oder wenn eine Pullanforderung für `main` 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` zum Speicherort deines Clientcodes.
*               `API_LOCATION` zum 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` zum Speicherort deiner Clientcode-Build-Ausgabe.

Weitere Informationen zu diesen Werten finden Sie in der Azure dokumentation unter [Build-Konfiguration für Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/build-configuration?tabs=github-actions).

```yaml copy
# 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@v6
        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"
```

## Weitere Informationen

* Die ursprüngliche Workflowvorlage finden Sie unter [`azure-staticwebapp.yml`](https://github.com/actions/starter-workflows/blob/main/deployments/azure-staticwebapp.yml) im GitHub Actions-Repository `starter-workflows`.
* Die Aktion zum Bereitstellen der Webanwendung ist die offizielle Azure-Aktion [`Azure/static-web-apps-deploy`](https://github.com/Azure/static-web-apps-deploy).
* Weitere Beispiele für GitHub Aktionsworkflows, die für Azure bereitgestellt werden, finden Sie im Repository [actions-workflow-samples](https://github.com/Azure/actions-workflow-samples).