部署到 Azure Static Web App

作为持续部署 (CD) 工作流程的一部分，可以将 Web 应用部署到 Azure Static Web App。

本文内容

简介

本指南说明如何使用 GitHub Actions 构建 Web 应用并将其部署到 Azure Static Web Apps。

Note

如果 GitHub Actions 工作流需要访问支持 OpenID Connect (OIDC) 的云提供商提供的资源，则可以将工作流配置为直接向云提供商进行身份验证。 这样就可以停止将这些凭据存储为长期存在的机密，并提供其他安全优势。 有关详细信息，请参阅“关于使用 OpenID Connect 进行安全强化”。和“在 Azure 中配置 OpenID Connect”。

先决条件

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

  1. 对部署源使用“Other（其他）”选项创建 Azure Static Web App。 有关详细信息，请参阅 Azure 文档中的“快速入门：在 Azure 门户中构建第一个静态站点”。

  2. 使用静态 Web 应用部署令牌的值创建名为 AZURE_STATIC_WEB_APPS_API_TOKEN 的机密。 有关如何查找部署令牌的详细信息，请参阅 Azure 文档中的“在 Azure Static Web Apps 中重置部署令牌”。

创建工作流程

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

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

在工作流 env 键下，更改以下值：

  • 将 APP_LOCATION 更改为客户端代码的位置
  • 将 API_LOCATION 更改为 API 源代码的位置。 如果 API_LOCATION 不相关，则可以删除该变量以及使用它的行。
  • 将 OUTPUT_LOCATION 更改为客户端代码构建输出的位置

有关这些值的详细信息，请参阅 Azure 文档中的“为 Azure Static Web Apps 生成配置”。

YAML
# 此工作流使用未经 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@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"

其他资源

以下资源也可能有用：