在 DevOps 中管理一致的 Webpack 构建

Question

在我们公司内部，我们通过 DevOps 为 .NET Core 应用程序构建和发布了很多东西。

对于这些应用程序，我们的设置是使用一个构建工件的管道，然后发布管道管理将同一工件推送到各个阶段（测试/uat/staging/live）

我们在这里看到的优点是包是相同的，只是部署目标上的环境变量允许运行s 的变化，例如不同的第 3 方端点、不同的数据库等.

我们现在希望将使用 Webpack 构建的 Vue.js 应用程序移动到 DevOps 中，以实现构建和部署的自动化，但这正是我们面临的难题。

我们需要在我们的解决方案中封装相同的变体（不同的 api、配置等），这目前通过执行 npm 运行 build:uat、npm 运行 build:live等

这很好用，但这意味着我们需要为每个环境设置不同的构建，并失去对我们为 UAT 发布的包与我们为 Live 发布的版本一致的保证。

关于管理这样的构建是否有任何最佳实践？

我可以看到的可能选项，尽管对其他人开放：

同时构建test/uat/live，然后针对合适的环境选择性的复制合适的代码
每个版本的不同版本
我们能否构建一个工件，然后以其他方式替换配置变量？

如有任何支持或建议，我们将不胜感激。

Answer 1

方案2应该是最容易理解和操作的方案。

不需要一直使用单个神器。 一个版本可以配置为触发多个工件源（构建）。然后只需将多个构建合并到一个版本中即可。

如果没有其他构建，您可以创建一个任务，为当前构建添加标签 running/queued。

另外添加发布触发器的标签条件。

更多详情请查看 boindiil 在此 link 中的回答：

Answer 2

我们最终沿着以下路线前进。理想情况下，我们只有一个构建，但由于每个环境的构建是在同一时间从同一个 npm install install 等完成的，我很高兴这是一种妥协。

trigger:
- release/*

variables:
- template: config/app-names.yml

pool:
  vmImage: 'ubuntu-latest'

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

- script: 
    npm install
  displayName: 'npm install'

- script: 
    npm run build:test -- --vn "$(Build.SourceBranchName)" --n "$(Build.RequestedFor)"
  displayName: 'npm build test'

- task: ArchiveFiles@2
  displayName: 'Archive test'
  inputs:
    rootFolderOrFile: 'dist/$(TestAppName)'
    includeRootFolder: true
    archiveType: 'zip'
    archiveFile: 'dist/test/$(TestAppName).zip'
    replaceExistingArchive: true

- script: 
    npm run build:acc -- --vn "$(Build.SourceBranchName)" --n "$(Build.RequestedFor)"
  displayName: 'npm build acc'

- task: ArchiveFiles@2
  displayName: 'Archive acc'
  inputs:
    rootFolderOrFile: 'dist/$(AccAppName)'
    includeRootFolder: true
    archiveType: 'zip'
    archiveFile: 'dist/acc/$(AccAppName).zip'
    replaceExistingArchive: true

- script: 
    npm run build:live -- --vn "$(Build.SourceBranchName)" --n "$(Build.RequestedFor)"
  displayName: 'npm build live'

- task: ArchiveFiles@2
  displayName: 'Archive live'
  inputs:
    rootFolderOrFile: 'dist/$(LiveAppName)'
    includeRootFolder: true
    archiveType: 'zip'
    archiveFile: 'dist/live/$(LiveAppName).zip'
    replaceExistingArchive: true

- task: PublishBuildArtifacts@1
  displayName: 'Publish test build'
  inputs:
    PathtoPublish: 'dist/test/'
    ArtifactName: 'test'
    publishLocation: 'Container'

- task: PublishBuildArtifacts@1
  displayName: 'Publish acc build'
  inputs:
    PathtoPublish: 'dist/acc/'
    ArtifactName: 'acc'
    publishLocation: 'Container'

- task: PublishBuildArtifacts@1
  displayName: 'Publish live build'
  inputs:
    PathtoPublish: 'dist/live/'
    ArtifactName: 'live'
    publishLocation: 'Container'

在 DevOps 中管理一致的 Webpack 构建

Managing consistent Webpack builds in DevOps

azure-devops

azure-pipelines-build-task

azure-pipelines-release-pipeline