# 部署到 Azure Static Web App

了解如何将 Web 应用部署到Azure静态 Web 应用作为持续部署（CD）工作流的一部分。

## 先决条件

在创建 GitHub Actions 工作流程之前，首先需要完成以下设置步骤：

1. 使用部署源的“其他”选项创建Azure静态 Web 应用。 有关详细信息，请参阅 [Quickstart：在 Azure 门户中生成第一个静态站点](https://docs.microsoft.com/azure/static-web-apps/get-started-portal)Azure文档中。

1. 使用静态 Web 应用部署令牌的值创建名为 `AZURE_STATIC_WEB_APPS_API_TOKEN` 的机密。 有关如何查找部署令牌的详细信息，请参阅 Azure 文档中的 [Azure Static Web Apps 重置部署令牌](https://docs.microsoft.com/azure/static-web-apps/deployment-token-management)。

## 创建工作流程

完成先决条件后，可以继续创建工作流程。

以下示例工作流演示了，当推送到 `main` 分支或针对 `main` 的拉取请求被打开、同步或重新打开时，如何生成和部署 Azure 静态 Web 应用。 当面向 `main` 的拉取请求关闭时，工作流还会破坏相应的预生产部署。

在工作流 `env` 键下，更改以下值：
*               `APP_LOCATION` 到客户端代码的位置
* 请将 `API_LOCATION` 指向 API 源代码的位置。 如果 `API_LOCATION` 不相关，则可以删除该变量以及使用它的行。
*               `OUTPUT_LOCATION` 到客户端代码构建输出的位置

有关这些值的详细信息，请参阅 Azure 文档中的 [Azure Static Web Apps 构建配置](https://docs.microsoft.com/azure/static-web-apps/build-configuration?tabs=github-actions)。

```yaml copy
# 此工作流使用未经 GitHub 认证的操作。
# 它们由第三方提供，并受
# 单独的服务条款、隐私政策和支持
# 文档。

# GitHub 建议将操作固定到提交 SHA。
# 若要获取较新版本，需要更新 SHA。
# 还可以引用标记或分支，但该操作可能会更改而不发出警告。

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"
```

## 其他阅读材料

* 对于原始工作流模板，请参阅 GitHub Actions `starter-workflows` 存储库中的 [`azure-staticwebapp.yml`](https://github.com/actions/starter-workflows/blob/main/deployments/azure-staticwebapp.yml)。
* 用于部署 Web 应用程序的是官方的 Azure [`Azure/static-web-apps-deploy`](https://github.com/Azure/static-web-apps-deploy) 操作。
* 有关部署到 Azure 的 GitHub 操作工作流的更多示例，请参阅 [actions-workflow-samples](https://github.com/Azure/actions-workflow-samples) 存储库。