部署到 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"

其他资源

以下资源可能也有用