使用 azure devops 发布管道部署 Vue.js 应用程序
Deploying Vue.js App using azure devops release pipeline
我有一个 vue.js 应用程序正在使用 vue-cli 3 创建和构建。我在 .env.test
和 .env.prod
文件中有一些环境变量。
为了构建应用程序,我使用了 azure devops 构建管道,其中我 运行 命令:
npm run build:test
或 npm run build:prod
这会生成不同的工件,这些工件将输入到 azure devops 发布管道中的阶段。
我面临的问题是我不想为每个环境单独构建。我想构建一个并部署到不同的环境,这可能吗?
如何处理这些变量以便为所有环境构建一次包?这是一个好习惯吗?或者我应该像现在这样针对不同的环境使用不同的管道吗?
从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
个文件并替换标记。默认令牌前缀和后缀为:#{
}#
,但任务允许提供您希望的自定义。
所以我们遇到了类似的问题。我们即将更新我们的解决方案以使用变量组,但是如果您想要一种没有变量组的方法,您总是可以这样做:
- 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"'
现在,就像我说的那样,我们正在远离它,但它确实工作得很好,它让我们拥有一个可以使用正确设置部署的构建,而无需做任何太花哨的事情。
如果你使用这样的东西,最后一步是在构建到达发布管道时根据构建标记和分支过滤构建。
我有一个 vue.js 应用程序正在使用 vue-cli 3 创建和构建。我在 .env.test
和 .env.prod
文件中有一些环境变量。
为了构建应用程序,我使用了 azure devops 构建管道,其中我 运行 命令:
npm run build:test
或 npm run build:prod
这会生成不同的工件,这些工件将输入到 azure devops 发布管道中的阶段。
我面临的问题是我不想为每个环境单独构建。我想构建一个并部署到不同的环境,这可能吗?
如何处理这些变量以便为所有环境构建一次包?这是一个好习惯吗?或者我应该像现在这样针对不同的环境使用不同的管道吗?
从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
个文件并替换标记。默认令牌前缀和后缀为:#{
}#
,但任务允许提供您希望的自定义。
所以我们遇到了类似的问题。我们即将更新我们的解决方案以使用变量组,但是如果您想要一种没有变量组的方法,您总是可以这样做:
- 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"'
现在,就像我说的那样,我们正在远离它,但它确实工作得很好,它让我们拥有一个可以使用正确设置部署的构建,而无需做任何太花哨的事情。
如果你使用这样的东西,最后一步是在构建到达发布管道时根据构建标记和分支过滤构建。