如何根据构建的分支为具有不同环境变量的 create-react-app 项目设置 DevOps 构建？

Question

我们有一个 create-react-app 项目，它从环境中获取一些构建参数（例如 Auth0 配置），这意味着这些环境变量会影响 react 构建。

我们正在为此项目开发 Azure DevOps 构建管道，虽然在管道的变量页面上定义变量很简单，但如何根据正在构建的分支进行不同的设置并不明显。

例如，我们希望 dev 分支在 Auth0 中使用或开发租户构建，而发布和主分支应该在 Auth0 中使用或生产租户构建（相同的变量，两个不同的值）。

对此是否有记录/支持的方法？还是一些“最佳实践”？

我了解到您可以从 PowerShell 脚本中修改变量，例如比如this post。这是最好的方法吗？脚本如何检查正在构建的分支，以选择正确的值集？

我还发现 DevOps 有一个变量组的概念。我还没有阅读它，但它是为每个分支（或分支模式）定义一个变量组并让脚本选择要应用哪个组的好方法吗？怎么样？

Answer 1

如何根据构建的分支为具有不同环境变量的 creat-react-app 项目设置 DevOps 构建？

此时，恐怕在构建定义中使用 Power-Shell 脚本任务来获取源分支名称，然后根据分支名称设置环境变量是一个不错的选择。因为构建管道尚不支持嵌套变量。

PowerShell 脚本如下：

$branch = $Env:Build_SourceBranchName
Write-Host "Current branch is $branch"
if ($branch -eq "Dev")
{
  Write-Host ("##vso[task.setvariable variable=testvar]testvalue")
}
else (($branch -eq "master") -or (($branch -eq "release")))
{
  Write-Host ("##vso[task.setvariable variable=testvar2]testvalue2")
}

在构建过程中查看Logging Command 了解更多详细信息。

此外，对于variable groups，我们可以为每个环境使用 VSTS 变量组来进行 release 定义，但它不适用于 build 定义。详情请查看this thread。

希望这会有所帮助。