使用 azure devops 发布管道部署 Vue.js 应用程序

Question

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

为了构建应用程序，我使用了 azure devops 构建管道，其中我运行命令： npm run build:test 或 npm run build:prod

这会生成不同的工件，这些工件将输入到 azure devops 发布管道中的阶段。

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

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

Answer 1

从CI

的角度

应该只有一个 build pipeline 可以构建工件，而不管它将运行.

的环境如何

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

您必须提供带有令牌的配置，这些令牌将在 Deployment/Release 阶段被替换：

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

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

从CD的角度

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

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

将您想要的任何 Task 添加到 Stage 中，这将查找并替换标记。

目前，我使用来自市场的 Replace Tokens 扩展程序。取决于stage，将替换不同的变量组。 Replace Tokens 任务自动完成所有工作，e.i。扫描 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"'

现在，就像我说的那样，我们正在远离它，但它确实工作得很好，它让我们拥有一个可以使用正确设置部署的构建，而无需做任何太花哨的事情。

如果你使用这样的东西，最后一步是在构建到达发布管道时根据构建标记和分支过滤构建。

使用 azure devops 发布管道部署 Vue.js 应用程序

Deploying Vue.js App using azure devops release pipeline

vue.js

build

azure-devops

azure-pipelines-release-pipeline

vue-cli-3

从CI

从CD的角度