如何为多项目Angular工作区配置Github Actions实现按需部署？

针对你的Angular工作区多项目部署需求，核心思路是基于文件变更路径触发对应项目的构建与部署，以下是具体实现步骤：

1. 前置准备 #

• 为每个Firebase项目生成独立的服务账号密钥，在Github仓库的Settings > Secrets and variables > Actions中添加对应的密钥，命名为FIREBASE_SERVICE_ACCOUNT_PROJECT1、FIREBASE_SERVICE_ACCOUNT_PROJECT2、FIREBASE_SERVICE_ACCOUNT_PROJECT3。
• 确保每个项目目录下都有自己的firebase.json和.firebaserc（可通过在对应项目目录下执行firebase init hosting生成），配置好构建后的输出目录（比如Angular 16+的dist/project1/browser）。

2. 编写Github Actions工作流文件 #

在仓库根目录的.github/workflows下创建angular-firebase-deploy.yml，内容如下：

name: Angular Workspace Firebase Deploy

on:
  push:
    paths:
      - 'project1/**'
      - 'project2/**'
      - 'project3/**'
    branches: [main] # 可选：限定仅在main分支推送时触发

jobs:
  deploy-project1:
    if: contains(github.event.head_commit.message, '[deploy-project1]') || contains(github.event.paths, 'project1/')
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build project1
        run: ng build project1 --configuration production
      - name: Deploy to Firebase Project1
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_PROJECT1 }}'
          projectId: your-project1-firebase-id # 替换为你的Firebase项目ID
          channelId: live
          entryPoint: ./project1

  deploy-project2:
    if: contains(github.event.head_commit.message, '[deploy-project2]') || contains(github.event.paths, 'project2/')
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build project2
        run: ng build project2 --configuration production
      - name: Deploy to Firebase Project2
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_PROJECT2 }}'
          projectId: your-project2-firebase-id # 替换为你的Firebase项目ID
          channelId: live
          entryPoint: ./project2

  deploy-project3:
    if: contains(github.event.head_commit.message, '[deploy-project3]') || contains(github.event.paths, 'project3/')
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build project3
        run: ng build project3 --configuration production
      - name: Deploy to Firebase Project3
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_PROJECT3 }}'
          projectId: your-project3-firebase-id # 替换为你的Firebase项目ID
          channelId: live
          entryPoint: ./project3

3. 核心逻辑说明 #

• 触发规则：通过paths监听三个项目目录的文件变更，只有当这些目录内有文件推送时，工作流才会启动；如果添加了branches字段，仅在指定分支推送时触发。
• 任务过滤：每个项目的部署任务通过if条件判断，两种触发场景：
  1. 提交信息包含[deploy-projectX]：手动指定部署某个项目，即使该项目目录无变更也能触发。
  2. 推送的变更包含对应项目目录的文件：自动触发该项目的构建与部署。
• 项目构建：使用ng build projectX指令指定构建工作区中的特定项目，避免编译无关项目，节省时间。
• Firebase部署：通过entryPoint参数指定项目目录，让Firebase动作读取该目录下的配置文件完成部署。

4. 优化建议 #

• 若要减少重复代码，可将依赖安装、Node.js配置等通用步骤抽成可复用工作流，三个部署任务调用该工作流即可。
• 如果需要部署到Firebase的预览通道，可修改channelId为自定义值，比如preview-${{ github.sha }}。

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