如何调整GitHub Actions工作流实现多环境Angular应用Azure部署

以下是针对你的需求，对现有工作流文件的具体修改点：

1. 更新工作流名称与触发规则 #

• 将原名称angular prod CI/CD改为更通用的Angular 多环境 CI/CD
• 在workflow_dispatch中添加环境选择参数，支持手动触发时选择部署环境；同时新增分支自动触发规则，推送到dev分支自动部署开发环境，推送到main分支自动部署生产环境

2. 配置动态构建命令 #

• 启用app_build_command参数，根据当前环境动态切换Angular构建命令
• 补充依赖安装步骤，避免因依赖缺失导致构建失败

3. （可选）区分多环境Azure令牌 #

如果开发、生产环境对应独立的Azure静态Web应用资源，需在GitHub Secrets中分别配置两个环境的令牌，再通过环境变量动态选择对应令牌

修改后的完整工作流代码 #

name: Angular 多环境 CI/CD

on:
  workflow_dispatch:
    inputs:
      environment:
        description: '选择部署环境'
        required: true
        default: 'production'
        type: choice
        options:
          - development
          - production
  push:
    branches:
      - dev          # 推送到dev分支自动部署开发环境
      - main         # 推送到main分支自动部署生产环境

jobs:
  build_and_deploy_job:
    runs-on: ubuntu-latest
    name: 构建并部署
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true

      # 统一确定当前部署环境
      - name: 设置环境变量
        id: set_env
        run: |
          if [[ "${{ github.event_name }}" == "push" ]]; then
            if [[ "${{ github.ref }}" == "refs/heads/dev" ]]; then
              echo "environment=development" >> $GITHUB_OUTPUT
            elif [[ "${{ github.ref }}" == "refs/heads/main" ]]; then
              echo "environment=production" >> $GITHUB_OUTPUT
            fi
          else
            echo "environment=${{ github.event.inputs.environment }}" >> $GITHUB_OUTPUT
          fi

      - name: 构建并部署到Azure静态Web应用
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          # 若开发/生产用不同Azure资源，动态选择令牌：
          # azure_static_web_apps_api_token: ${{ steps.set_env.outputs.environment == 'production' ? secrets.AZURE_STATIC_PROD_TOKEN : secrets.AZURE_STATIC_DEV_TOKEN }}
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_XXXXX_Token }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "/"
          api_location: ""
          output_location: "dist/"
          # 动态执行构建命令
          app_build_command: |
            npm install
            ng build --configuration=${{ steps.set_env.outputs.environment }}

  close_pull_request_job:
    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: ${{ secrets.AZURE_STATIC_XXXXX_Token }}
          action: "close"

关键修改说明 #

• 触发逻辑：同时支持手动选环境触发、分支推送自动触发两种模式，适配不同场景
• 环境统一管理：通过set_env步骤统一处理触发来源，输出标准化的环境变量供后续步骤使用
• 动态构建：根据环境变量自动切换ng build的配置参数，保证不同环境执行对应构建命令

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