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

Question

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

Answer 1

我将此问题标记为重复，因为我认为已经有合适的答案。不过，我记得有两种其他方法可以实现您的目标：

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

您可以轻松地将变量存储在 .env 文件中，如 here 所述。然后，您需要为每个环境赋予每个 .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://docs.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 被 @987654333 替换@。

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

您可以将变量存储在 JSON 文件中，然后使用 JavaScript 文件（之前存储变量）从这些 JSON 文件中加载数据。详细说明如下：

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

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

1. 现在您可以使用发布管道中的File Transform Task of Microsoft 来修改此 JSON 文件。该任务将采用管道中定义的变量 (as described here) 并将覆盖 JSON 文件中具有匹配键的任何值。例如，您在管道中定义 key2 = "foo"。文件转换任务将生成此 JSON：

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

1. 最后但并非最不重要的一点是，您需要将 JSON 文件中定义的变量放入您的 react 应用程序中。因此，您可以使用以下命令简单地将 config.json 加载到 JavaScript 文件（之前包含这些变量）中：

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

我希望这会有所帮助。如果有任何不清楚的地方，请发表评论，我可以尝试解释：)