Azure App Service部署Angular前端时找不到Zip包问题求助

你的错误核心是发布的构建产物不符合部署任务的预期格式，或者PublishBuildArtifacts@1任务未正确配置输出路径。Angular执行ng build --configuration production后，产物默认存放在项目根目录的dist/[项目名]文件夹下，而Azure App Service部署任务通常需要压缩为zip包的格式才能识别。

修正后的完整YAML配置 #

# Node.js with Angular
# Build a Node.js project that uses Angular.
trigger:
- master

pool:
  vmImage: ubuntu-latest

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

- script: |
    npm install -g @angular/cli
    npm install
    ng build --configuration production
  displayName: 'npm install and build'

# 将dist目录打包为zip文件
- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)/dist/[你的Angular项目名]'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/angular-app.zip'
    replaceExistingArchive: true
  displayName: 'Archive dist folder to zip'

# 指定要发布的zip文件路径
- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)/angular-app.zip'
    ArtifactName: 'drop'
    publishLocation: 'Container'
  displayName: 'Publish build artifact'

关键修正点说明 #

• 新增ArchiveFiles@2任务：Angular打包后的文件是分散的，必须先压缩成zip包才能被部署任务识别。需将[你的Angular项目名]替换为实际项目名称（可在angular.json的projects节点下查看）。
• 完善PublishBuildArtifacts@1配置：原任务未指定PathtoPublish参数，导致默认发布的内容里没有符合要求的zip文件。现在明确指定发布生成的zip包，确保部署阶段能下载到正确产物。

部署任务补充说明 #

如果使用AzureRmWebAppDeployment@4作为部署任务，需确保配置里的packageForLinux参数指向下载后的zip包路径，示例如下：

- task: AzureRmWebAppDeployment@4
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: '你的Azure订阅'
    appType: 'webApp'
    WebAppName: '你的App Service名称'
    packageForLinux: '$(Pipeline.Workspace)/drop/angular-app.zip'

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