使用Azure DevOps发布管道部署Vue.js应用程序

Question

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

为了构建该应用程序，我使用Azure DevOps构建管道，在其中运行以下命令： npm run build:test 或者 npm run build:prod 这会生成不同的构建成果物，它们是Azure DevOps发布流程阶段的输入。

我面临的问题是，我不想为每个环境单独进行构建。我想构建一个包并部署到不同的环境，这可能吗？

我如何处理这些变量以为所有环境构建一个软件包？这是一个好习惯吗？还是像现在这样为不同的环境拥有不同的管道更好？

- chamix

---

你不需要多个管道来实现你的目标。你是在问如何配置构建以输出测试和生产工件文件夹吗？ - Steve L.

你解决了这个问题吗？我也遇到了同样的问题。 - alec

嘿，亚历克，我从来没有想过。我只是放弃使用 Azure 发布管道，并继续使用仅构建管道，在其中有一些 AWS 任务可以进行部署。 - chamix

@chamix 如果我的下面的回答对你有帮助，请让我知道，否则我可以提供更多细节来扩展答案。 - Serhii Kyslyi

Answer 1

从CI的角度来看

应该只有一个单一的构建流程，无论在哪个环境中运行都将构建出相同的制品。

.env.prod 可用于部署制品到任何环境（开发、生产等）。

您需要提供带有令牌的配置，在部署/发布阶段将其替换：

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

因此，只需使用单个配置文件构建项目并发布工件以适用于所有环境。

从CD的角度来看，

我建议使用单个“发布管道”并具有多个阶段（“开发”，“生产”等）。 根据阶段提供单独的“变量组”。这可以使变量保持分离，逻辑上分组，并使用Azure Key Vault作为机密来源。变量名称必须与环境标记相同（不带前缀和后缀）。

将任何想要添加到“Stage”中的“Task”插入，它将查找和替换令牌。

目前，我使用市场上的“Replace Tokens”扩展。根据“stage”，不同组的变量将被替换。“Replace Tokens”任务会自动完成所有工作，即扫描“js”文件并替换令牌。默认的令牌前缀和后缀是：“#{”、“}#”，但任务允许提供所需的自定义。

- Serhii Kyslyi

---

这个解决方案在构建后的config.js文件中也适用吗？我想知道如何为我的部署阶段设置不同的API。 - Christoph

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'

关于脚本的快速概述。如果构建是PullRequest或手动操作的一部分，我们希望使用默认的构建脚本进行暂存构建。否则，我们假设该构建是用于生产环境的（您需要一些分支策略来强制执行此操作）。然后发布管道将检查我们设置的构建标记，如下所示：

- 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"'

现在，正如我所说，我们正在摆脱这种方式，但它确实运行得非常好，并且使我们能够拥有一个构建版本，可以在不需要进行任何高级操作的情况下使用正确的设置进行部署。

如果您使用类似于此的东西，则最后一步是根据构建标记和分支在发布管道中过滤构建版本。

- rahicks

---

这在发布版本中不起作用，只适用于构建。 - Nick Turner