如何将React项目及Storybook部署到多个Azure静态Web应用实例

问题描述 #

我有一个通过Azure Static Web Apps部署的React项目，使用指定的GitHub工作流运行正常，现在希望将Storybook项目托管到另一个Azure Static Web Apps实例。现有工作流代码如下：

# 此工作流会在代码变更时构建并推送Web应用到Azure Static Web Apps
#
# 此工作流假设你已创建目标Azure Static Web Apps实例
#
# 配置此工作流步骤：
#
# 1. 在仓库中创建名为AZURE_STATIC_WEB_APPS_API_TOKEN的Secret，值为你的Static Web Apps部署令牌
#    获取部署令牌的方法请参考官方文档
#
# 2. 修改以下环境变量的值：APP_LOCATION、API_LOCATION、APP_ARTIFACT_LOCATION、AZURE_STATIC_WEB_APPS_API_TOKEN
#    配置相关值的方法请参考官方文档
name: Deploy web app to Azure Static Web Apps

on:
  push:
    branches: [ "v2" ]
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches: [ "v2" ]

# 所有任务和步骤可用的环境变量
env:
  APP_LOCATION: "/" # 客户端代码位置
  API_LOCATION: "api" # API源码位置（可选）
  APP_ARTIFACT_LOCATION: "dist" # 客户端代码构建产物位置
  AZURE_STATIC_WEB_APPS_API_TOKEN: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} # 存储静态Web应用部署令牌的Secret

permissions:
  contents: read

jobs:
  build_and_deploy_job:
    permissions:
      contents: read # 用于actions/checkout拉取代码
      pull-requests: write # 用于Azure/static-web-apps-deploy在PR上添加评论
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: 构建并部署主应用
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - name: 构建并部署
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ env.AZURE_STATIC_WEB_APPS_API_TOKEN }} # 应用的API令牌Secret
          repo_token: ${{ secrets.GITHUB_TOKEN }} # 用于GitHub集成（如PR评论）
          action: "upload"
          ###### 仓库/构建配置 - 可根据应用需求修改 ######
          # 更多Static Web Apps工作流配置信息请参考官方文档
          app_location: ${{ env.APP_LOCATION }}
          api_location: ${{ env.API_LOCATION }}
          app_artifact_location: ${{ env.APP_ARTIFACT_LOCATION }}
          ###### 仓库/构建配置结束 ######

  close_pull_request_job:
    permissions:
      contents: none
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: 关闭Pull Request任务
    steps:
      - name: 关闭Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ env.AZURE_STATIC_WEB_APPS_API_TOKEN }} # 应用的API令牌Secret
          action: "close"

现需解决两个问题：

1. 如何扩展此工作流以执行npm run build-storybook命令，并将产物目录storybook-static部署到另一个Azure Static Web Apps实例？
2. 同一GitHub项目无法添加第二个AZURE_STATIC_WEB_APPS_API_TOKEN该如何解决？

解决方案 #

一、扩展工作流部署Storybook #

可以在现有工作流中新增针对Storybook的部署任务，与原项目部署并行执行。具体修改如下：

1. 新增环境变量：在env区块中添加Storybook相关配置和第二个实例的部署令牌变量：

env:
  # 原项目配置
  APP_LOCATION: "/"
  API_LOCATION: "api"
  APP_ARTIFACT_LOCATION: "dist"
  AZURE_STATIC_WEB_APPS_API_TOKEN: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
  # Storybook配置
  STORYBOOK_ARTIFACT_LOCATION: "storybook-static"
  AZURE_STATIC_WEB_APPS_API_TOKEN_STORYBOOK: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_STORYBOOK }}

2. 新增Storybook部署Job：在jobs区块中添加构建并部署Storybook的任务：

build_and_deploy_storybook_job:
  permissions:
    contents: read
    pull-requests: write
  if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
  runs-on: ubuntu-latest
  name: 构建并部署Storybook
  steps:
    - uses: actions/checkout@v3
      with:
        submodules: true
    - name: 安装依赖
      run: npm install
    - name: 构建Storybook
      run: npm run build-storybook
    - name: 部署Storybook
      id: deploystorybook
      uses: Azure/static-web-apps-deploy@v1
      with:
        azure_static_web_apps_api_token: ${{ env.AZURE_STATIC_WEB_APPS_API_TOKEN_STORYBOOK }}
        repo_token: ${{ secrets.GITHUB_TOKEN }}
        action: "upload"
        app_location: "/" # Storybook基于项目根目录构建，无需修改
        api_location: "" # Storybook无后端API，留空
        app_artifact_location: ${{ env.STORYBOOK_ARTIFACT_LOCATION }}

3. 新增Storybook的PR关闭Job：添加处理PR关闭时的清理任务：

close_pull_request_storybook_job:
  permissions:
    contents: none
  if: github.event_name == 'pull_request' && github.event.action == 'closed'
  runs-on: ubuntu-latest
  name: 关闭Storybook Pull Request
  steps:
    - name: 关闭Storybook PR
      id: closestorybookpr
      uses: Azure/static-web-apps-deploy@v1
      with:
        azure_static_web_apps_api_token: ${{ env.AZURE_STATIC_WEB_APPS_API_TOKEN_STORYBOOK }}
        action: "close"

修改后的完整工作流会同时处理原React项目和Storybook的部署，两个任务并行执行互不影响。

二、多实例Secret冲突解决 #

GitHub仓库的Secret名称不能重复，因此只需为第二个Azure Static Web Apps实例的部署令牌设置不同的Secret名称即可：

• 进入仓库的「Settings」→「Secrets and variables」→「Actions」
• 点击「New repository secret」，设置名称为AZURE_STATIC_WEB_APPS_API_TOKEN_STORYBOOK，值填入第二个Static Web Apps实例的部署令牌
• 在工作流中通过${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_STORYBOOK }}引用该Secret即可

内容的提问来源于stack exchange，提问作者Matt