如何将Angular构建和部署到多个环境？

Question

使用Azure DevOps /管道，我可以构建Angular应用程序并将其部署到特定环境。

今天的工作方式就像是在2种不同的环境中构建的1个Angular（相同的代码）。为此，我有2个具有相同任务的管道，除了最后一个是不同的插槽。在简历中就是这个

Pipeline Staging

1. Node.js tool installer
2. npm (install -g @angular/cli)
3. npm (npm install)
4. npm (run build)
5. Azure App Service deploy (slot: Dev)

Pipeline Prod

1. Node.js tool installer
2. npm (install -g @angular/cli)
3. npm (npm install)
4. npm (run build)
5. Azure App Service deploy (slot: Production)

现在，我想使用DevOps / Releases对此进行改进，但是我不知道该如何配置。

这就是我想要做的

1. Setup
1.1. Node.js tool installer
1.2. npm (install -g @angular/cli)
1.3. npm (npm install)

2. Build
2.1. npm (run build)

3. Deploy
3.1. Azure App Service deploy (slot: Dev)

4. Deploy
4.1. Azure App Service deploy (slot: Production)

但是我总是会遇到一些错误，例如找不到路径

##[error]Publishing build artifacts failed with an error: Not found PathtoPublish: D:\a\1\s\Artifact (build)\dist

##[error]Publishing build artifacts failed with an error: Not found PathtoPublish: d:\a\1\s\Artifact Dashboard (build)

##[warning]Directory 'D:\a\1\a' is empty. Nothing will be added to build artifact 'Artifact Dashboard (build)'.

##[error]Error: No package found with specified pattern: D:\a\r1\a\Artifact (build)

似乎太简单了，很难配置。我在这里想念什么？

Answer 1

您应该在管道中执行前两个步骤（设置和构建），然后在发行版中进行部署。在“管道”中，您将创建要发布的代码工件，管道必须以“发布构建工件”任务结尾，它将创建该文件夹。然后，您将在发行版中对其进行部署。

管道应该以发布构建工件结尾： publish build artifact

然后您将在发行版中使用此工件。

Answer 2

在管道中，我必须将复制文件添加到

Copy Files to: $(Build.ArtifactStagingDirectory)

steps:
- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
  inputs:
    SourceFolder: '$(System.DefaultWorkingDirectory)'
    Contents: 'dist/**'
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

并解决此问题

Publish Artifact: Artifact Dashboard (build)

steps:
- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: Artifact Dashboard (build)'
  inputs:
    PathtoPublish: '$(Parameters.ArtifactStagingDirectory)'
    ArtifactName: 'Artifact Dashboard (build)'

在发布阶段我不得不

steps:
- task: AzureRmWebAppDeployment@4
  displayName: 'Deploy Name'
  inputs:
    azureSubscription: ***
    WebAppName: Name
    deployToSlotOrASE: true
    ResourceGroupName: GroupName
    SlotName: dev
    packageForLinux: '$(System.DefaultWorkingDirectory)/Artifact Dashboard (build staging)/Artifact Dashboard (build)/dist'