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

Question

使用 Azure DevOps / Pipelines，我能够构建 Angular 应用程序并将其部署到特定环境。

今天的工作方式类似于 1 个 Angular（相同的代码），它是在 2 个不同的环境中构建的。为此，我有 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

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

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'

Answer 2

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

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

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