使用Azure Devops发布管道部署Vue.js App

Question

我有一个使用vue-cli 3创建和构建的vue.js应用程序。我在.env.test和.env.prod文件中有一些环境变量。

要构建应用程序，我正在使用运行命令的azure devops构建管道： npm run build:test或npm run build:prod

这会生成不同的工件，这些工件会输入到天蓝色的devops发布管道中的Stage中。

我面临的问题是我不想为每个环境单独构建。我想构建一个并部署到不同的环境吗？

如何处理这些变量以针对所有环境构建一次包？这是一个好习惯吗？还是应该像现在一样针对不同的环境使用不同的管道？

Answer 1

从CI的角度来看

应该只有一个build pipeline可以构建工件，而不管它运行的环境如何。

.env.prod可用于将工件部署到任何环境（Development，Production等）

您必须为配置提供令牌，这些令牌将在部署/发布阶段替换：

env_key1=#{token_key1}#
env_key2=#{token_key2}#
env_key3=#{token_key3}#

因此，只需使用单个配置文件针对所有环境构建项目并发布工件即可。

从CD的角度来看

我建议在多个阶段中使用单个release pipeline （{Development，Production等）。

根据variables groups提供单独的stages。它允许将变量分开，按逻辑分组并使用Azure Key Vault作为秘密来源。变量名称必须等于环境令牌（不带前缀和后缀）。

将您想要的任何Task添加到Stage中，它将查找并替换令牌。

当前，我使用来自市场的Replace Tokens扩展名。取决于stage，将替换不同的变量组。 Replace Tokens任务自动完成所有工作，例如扫描js文件并替换令牌。默认令牌前缀和后缀为：#{ }#，但是任务允许您提供所需的自定义。

Answer 2

所以我们有一个类似的问题。我们将更新我们的解决方案以与变量组一起使用，但是如果您想要一种没有变量组的方法，则可以始终执行以下操作：

- script: |
    npm install
    npm run test:unit
    if [ $? -ne 0 ]; then
        exit 1
    fi
    npm run build-prod
  condition: and(succeeded(), not(in(variables['Build.Reason'], 'PullRequest', 'Manual')))
  displayName: 'npm install, test and build for prod'

- script: |
    npm install
    npm run test:unit
    if [ $? -ne 0 ]; then
        exit 1
    fi
    npm run build
  condition: and(succeeded(), in(variables['Build.Reason'], 'PullRequest', 'Manual'))
  displayName: 'npm install, test and build for test'

如此快速分解脚本。如果构建是PullRequet或手册的一部分，我们需要使用默认构建脚本的临时构建。否则，我们将假定该构建用于生产（您将需要一些分支策略来强制实施）。然后，发布管道检查了我们使用以下设置设置的构建标记：

- task: PowerShell@2
  condition: and(succeeded(), not(in(variables['Build.Reason'], 'PullRequest', 'Manual')))
  inputs:
    targetType: 'inline'
    script: 'Write-Host "##vso[build.addbuildtag]release"'

- task: PowerShell@2
  condition: and(succeeded(), in(variables['Build.Reason'], 'PullRequest', 'Manual'))
  inputs:
    targetType: 'inline'
    script: 'Write-Host "##vso[build.addbuildtag]test"'

现在，就像我说的那样，我们正在远离这一点，但是它确实运行良好，它使我们能够构建一个可以正确设置进行部署的构建，而无需做任何花哨的事情。

如果您使用类似的方法，那么最后一步是根据构建标记和分支，在到达发布管道时对构建进行过滤。