在 DevOps 中管理一致的 Webpack 构建
Managing consistent Webpack builds in DevOps
在我们公司内部,我们通过 DevOps 为 .NET Core 应用程序构建和发布了很多东西。
对于这些应用程序,我们的设置是使用一个构建工件的管道,然后发布管道管理将同一工件推送到各个阶段(测试/uat/staging/live)
我们在这里看到的优点是包是相同的,只是部署目标上的环境变量允许 运行s 的变化,例如不同的第 3 方端点、不同的数据库等.
我们现在希望将使用 Webpack 构建的 Vue.js 应用程序移动到 DevOps 中,以实现构建和部署的自动化,但这正是我们面临的难题。
我们需要在我们的解决方案中封装相同的变体(不同的 api、配置等),这目前通过执行 npm 运行 build:uat、npm 运行 build:live等
这很好用,但这意味着我们需要为每个环境设置不同的构建,并失去对我们为 UAT 发布的包与我们为 Live 发布的版本一致的保证。
关于管理这样的构建是否有任何最佳实践?
我可以看到的可能选项,尽管对其他人开放:
- 同时构建test/uat/live,然后针对合适的环境选择性的复制合适的代码
- 每个版本的不同版本
- 我们能否构建一个工件,然后以其他方式替换配置变量?
如有任何支持或建议,我们将不胜感激。
方案2应该是最容易理解和操作的方案。
不需要一直使用单个神器。 一个版本可以配置为触发多个工件源(构建)。然后只需将多个构建合并到一个版本中即可。
如果没有其他构建,您可以创建一个任务,为当前构建添加标签 running/queued。
另外添加发布触发器的标签条件。
更多详情请查看 boindiil 在此 link 中的回答:
我们最终沿着以下路线前进。理想情况下,我们只有一个构建,但由于每个环境的构建是在同一时间从同一个 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 为 .NET Core 应用程序构建和发布了很多东西。
对于这些应用程序,我们的设置是使用一个构建工件的管道,然后发布管道管理将同一工件推送到各个阶段(测试/uat/staging/live)
我们在这里看到的优点是包是相同的,只是部署目标上的环境变量允许 运行s 的变化,例如不同的第 3 方端点、不同的数据库等.
我们现在希望将使用 Webpack 构建的 Vue.js 应用程序移动到 DevOps 中,以实现构建和部署的自动化,但这正是我们面临的难题。
我们需要在我们的解决方案中封装相同的变体(不同的 api、配置等),这目前通过执行 npm 运行 build:uat、npm 运行 build:live等
这很好用,但这意味着我们需要为每个环境设置不同的构建,并失去对我们为 UAT 发布的包与我们为 Live 发布的版本一致的保证。
关于管理这样的构建是否有任何最佳实践?
我可以看到的可能选项,尽管对其他人开放:
- 同时构建test/uat/live,然后针对合适的环境选择性的复制合适的代码
- 每个版本的不同版本
- 我们能否构建一个工件,然后以其他方式替换配置变量?
如有任何支持或建议,我们将不胜感激。
方案2应该是最容易理解和操作的方案。
不需要一直使用单个神器。 一个版本可以配置为触发多个工件源(构建)。然后只需将多个构建合并到一个版本中即可。
如果没有其他构建,您可以创建一个任务,为当前构建添加标签 running/queued。
另外添加发布触发器的标签条件。
更多详情请查看 boindiil 在此 link 中的回答:
我们最终沿着以下路线前进。理想情况下,我们只有一个构建,但由于每个环境的构建是在同一时间从同一个 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'