如何在Azure DevOps管道中处理React Config.js文件

Question

我正在使用Azure DevOps Pipeline来构建和部署React JS应用程序。它包含config.js文件，其中一些变量需要针对不同的环境进行修改。有人帮助我在部署到不同阶段时如何处理Release管道中的config.js吗？

Answer 1

我把这个问题标记为重复，因为我认为已经有了合适的答案。尽管如此，我还记得另外两种方法可以实现您想要的目标：

1.将变量存储在.env文件中

您可以很容易地将变量存储在.env文件中，如下所述。然后，您需要为每个.env文件为每个环境指定不同的名称。你最终可能会有一个.env.developemt，一个.env.production。。。等等。然后，您可以使用以下YAML根据您想要的环境进行构建：

# Node.js with React
# Build a Node.js project that uses React.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript
pool:
vmImage: 'ubuntu-latest'
steps:
- task: NodeTool@0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
npm install
npm run build:staging
displayName: 'npm install and build'
- task: PublishBuildArtifacts@1
inputs:
PathtoPublish: 'build'
ArtifactName: 'drop'
publishLocation: 'Container'

对于每个构建管道，然后使用一个经过调整的YAML。在显示的YAML中，您可以添加自定义触发器和其他东西。当然，您需要将staging更改为要构建的环境名称。在这个具体的例子中，如果您有一个.env.development和一个.env.production，您将得到两个YAML，一个是staging被production替换，另一个是staging被development替换。

2.将变量存储在JSON文件中

您可以将变量存储在JSON文件中，然后使用JavaScript文件(之前存储了变量(从这些JSON文件中加载数据。以下是如何做到这一点的详细方法：

1. 创建一个JSON文件，其中包含根据环境需要更改的所有变量，例如config.JSON，内容如下：

{
"key1":"",
"key2":"",
"key3":""
}

2. 现在您可以在发布管道中使用Microsoft的文件转换任务来修改此JSON文件。该任务将采用管道中定义的变量(如本文所述(，并覆盖JSON文件中具有匹配键的任何值。例如，在管道中定义key2 = "foo"。文件转换任务将生成以下JSON：

{
"key1":"",
"key2":"foo",
"key3":""
}

3. 最后但同样重要的是，您需要将JSON文件中定义的变量放入react应用程序中。因此，您只需使用以下命令将config.json加载到JavaScript文件(之前包含这些变量(中：

export const config = "./config.json";

我希望这能有所帮助。如果有什么不清楚的地方，只需留下评论，我可以尝试解释：(