如何在Azure DevOps Pipeline中批量构建多前端项目？

核心方案：矩阵策略+模板复用 #

直接利用Azure DevOps原生的动态矩阵结合可复用模板，无需复杂脚本就能自动识别所有frontend*文件夹，为每个文件夹独立执行完整构建流程，完美避开PublishBuildArtifacts的通配符限制。

步骤1：动态获取前端文件夹列表 #

在流水线初始化阶段，用PowerShell脚本扫描仓库中所有符合规则的前端文件夹，将结果存入流水线输出变量：

$folders = Get-ChildItem -Directory -Path "$(Build.SourcesDirectory)" -Filter "frontend*" | Select-Object -ExpandProperty Name
$folderList = $folders -join ','
Write-Host "##vso[task.setvariable variable=frontendFolders;isOutput=true]$folderList"

将该脚本作为独立任务，设置为输出变量供后续阶段调用。

步骤2：封装单文件夹构建模板 #

新建模板文件（如frontend-build.yml），把单个前端项目的构建流程封装成可复用模块：

parameters:
  - name: folderName
    type: string

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: '18.x'
    displayName: '安装Node.js'

  - script: npm install
    workingDirectory: '${{ parameters.folderName }}'
    displayName: '${{ parameters.folderName }} - npm 安装依赖'

  - script: ng build --prod
    workingDirectory: '${{ parameters.folderName }}'
    displayName: '${{ parameters.folderName }} - Angular 生产构建'

  - task: ArchiveFiles@2
    inputs:
      rootFolderOrFile: '${{ parameters.folderName }}/dist'
      includeRootFolder: false
      archiveType: 'zip'
      archiveFile: '$(Build.ArtifactStagingDirectory)/${{ parameters.folderName }}-dist.zip'
      replaceExistingArchive: true
    displayName: '${{ parameters.folderName }} - 归档构建产物'

  - task: PublishBuildArtifacts@1
    inputs:
      PathtoPublish: '$(Build.ArtifactStagingDirectory)/${{ parameters.folderName }}-dist.zip'
      ArtifactName: '${{ parameters.folderName }}-artifact'
      publishLocation: 'Container'
    displayName: '${{ parameters.folderName }} - 发布构建产物'

步骤3：主流水线用矩阵遍历执行 #

在主流水线中，通过动态矩阵遍历之前获取的文件夹列表，为每个文件夹实例化构建模板：

stages:
  - stage: DiscoverFolders
    jobs:
      - job: GetFolders
        steps:
          - powershell: |
              $folders = Get-ChildItem -Directory -Path "$(Build.SourcesDirectory)" -Filter "frontend*" | Select-Object -ExpandProperty Name
              $folderList = $folders -join ','
              Write-Host "##vso[task.setvariable variable=frontendFolders;isOutput=true]$folderList"
            name: FolderDiscovery

  - stage: BuildFrontends
    dependsOn: DiscoverFolders
    jobs:
      - job: Build
        strategy:
          matrix:
            ${{ each folder in split(variables['DiscoverFolders.GetFolders.frontendFolders'], ',') }}:
              ${{ folder }}:
                folderName: ${{ folder }}
        steps:
          - template: frontend-build.yml
            parameters:
              folderName: $(folderName)

方案优势 #

• 原生功能适配：全程用Azure DevOps内置能力实现，无需维护复杂批量脚本
• 并行构建：矩阵策略默认并行处理所有前端项目，大幅提升构建效率
• 产物独立：每个文件夹的构建产物单独归档发布，避免混淆，彻底绕开通配符限制
• 自动扩展：后续新增frontend4、frontend5等文件夹，流水线会自动识别处理，无需修改配置

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