Azure YAML流水线React构建后Drop文件夹为空的问题咨询

问题核心原因 #

你当前配置的归档任务读取的路径错误，npm构建的产物默认不会生成到你指定的$(Build.BinariesDirectory)下，所以归档的压缩包为空，最终drop文件夹没有有效输出。

调整后的完整配置 #

trigger:
- master

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'
  # 明确指定工作目录为代码根目录，不需要手动写绝对路径
  workingDirectory: $(Build.SourcesDirectory)

- task: ArchiveFiles@2
  inputs:
    # 替换为你项目实际的构建输出目录，默认前端项目为dist，部分框架为build，按需修改即可
    rootFolderOrFile: '$(Build.SourcesDirectory)/dist'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'

关键调整说明 #

• 代码根目录可以直接用Azure内置变量$(Build.SourcesDirectory)指代，不需要手动拼接路径。
• 如果你要使用pushd/popd的写法，把script步骤替换为以下内容即可，效果和指定workingDirectory完全一致：

  pushd $(Build.SourcesDirectory)
  npm install
  npm run build
  popd
  

• 你可以在npm构建步骤后增加目录校验步骤，排查构建是否真的生成了产物：

  - script: ls -la $(Build.SourcesDirectory)
    displayName: '查看根目录文件结构'
  

  直接在流水线日志中就能看到构建输出目录是否正常生成。

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