部署到 Azure 静态 Web 应用

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

本文内容

简介

本指南介绍如何使用 GitHub Actions 构建 Web 应用并将其部署到Azure 静态 Web 应用。

注意

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

先决条件

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

  1. 使用部署源的“其他”选项创建 Azure 静态 Web 应用。有关更多信息，请参阅 Azure 文档中的“快速入门：在 Azure 门户中构建您的第一个静态网站”。

  2. 创建一个名为 AZURE_STATIC_WEB_APPS_API_TOKEN 的机密，其值为您的静态 Web 应用部署令牌。有关如何查找部署令牌的更多信息，请参阅 Azure 文档中的“在 Azure 静态 Web 应用中重置部署令牌”。

创建工作流

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

以下示例工作流演示了如何在将代码推送到 main 分支或打开、同步或重新打开目标为 main 的拉取请求时构建和部署 Azure 静态 Web 应用。该工作流还会在关闭目标为 main 的拉取请求时拆除相应的预生产部署。

在工作流的 env 密钥下，更改以下值

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

有关这些值的更多信息，请参阅 Azure 文档中的“Azure 静态 Web 应用的构建配置”。

YAML
# This workflow uses actions that are not certified by GitHub.
# They are provided by a third-party and are governed by
# separate terms of service, privacy policy, and support
# documentation.

# GitHub recommends pinning actions to a commit SHA.
# To get a newer version, you will need to update the SHA.
# You can also reference a tag or branch, but the action may change without warning.

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"

其他资源

以下资源可能也有用