Skip to main content

部署到 Azure Static Web App

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

简介

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

基本要求

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

  1. 对部署源使用“Other(其他)”选项创建 Azure Static Web App。 更多信息请参阅 Azure 文档中的“快速入门:在 Azure 门户中构建第一个静态站点”。

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

创建工作流程

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

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

在工作流程 env 键下,更改以下值:

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

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

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

# 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
  APP_ARTIFACT_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

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@v2
        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 }}
          app_artifact_location: ${{ env.APP_ARTIFACT_LOCATION }}

  close:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close
    steps:
      - name: Close
        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"

其他资源

以下资源也可能有用: