如何在 Azure 中托管的 React 应用程序中使用环境变量

Question

我对 React 还是很陌生，并且总体上也在探索 Azure。 我有 ERP 背景，但该背景确实包括使用 VSTS 和 CI/CD 等工具。 我非常依赖在 VSTS 中使用“库”来指定每个环境的变量，然后在部署时指定这些变量。

但是！我一直在互联网上阅读并使用设置，但据我了解，我只能在 NPM 生成的实际代码中“嵌入”参数。这基本上意味着我需要为每个环境创建一个单独的构建，这是我不习惯的。我一直坚信（并告诉其他人）您交付到生产的产品应该与预生产、暂存或...的产品完全相同。真的没有其他方法可以使用环境变量吗？我正在考虑使用 Azure 应用服务中的应用程序设置，但我什至无法让它们在控制台中弹出。 VSTS 中的库，也没有找到如何在我的部署中使用它们，因为只有一步。

阅读https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables 的文档也不会让我觉得将 .env 文件放在源代码管理中也很舒服。我什至尝试了把 {process.env.NODE_ENV} 在我的代码中，但在 Azure 中它只是显示为“开发”，而我什至执行 npm run build （应该是生产）...

所以，我有点迷路了！如何在我的 React 应用中使用 Azure 应用服务中指定的环境变量？

谢谢！

Answer 1

所有提议的解决方案都太复杂了，因为其他人已经在打包和构建过程中解决了这个问题。

要将其部署到天蓝色，必须做两件事。首先删除排除 .env* 文件的 .ignore 规则。注意：假设你没有把秘密放在这里！ 无论如何，在 auth-flow 期间，.env 文件中的大部分配置都是在线可见的。那么，为什么要对 git 中的这个文件感到恐慌呢？尤其是在私人 Git 中，我认为这些 .env 文件没有任何问题。

所以，我有 .env.dev 和一个 .env.prod... 这包含例如

REACT_APP_AUTH_URL=https://auth.myid4.info
REACT_APP_ISSUER=https://auth.myid4.info
REACT_APP_IDENTITY_CLIENT_ID=myclientid
REACT_APP_REDIRECT_URL=https://myapp.info/signin-oidc
REACT_APP_AUDIENCE=
REACT_APP_SCOPE=openid profile email roles mysuperapi
REACT_APP_SILENT_REDIRECT_URL=https://myapp.info/silent-renew
REACT_APP_LOGOFF_REDIRECT_URL=https://myapp.info/logout
API_URL=/

必须执行以下操作。 npm i --save-dev env-cmd

现在，像这样在 package.json 中进行修改。您可能还有其他一些，但本质上，为您的环境添加正确的 .env

env-cmd -f .env.prod

所以在我的 package.json 中

"start": "env-cmd -f .env.dev rimraf ./build && react-scripts start",
"build": "env-cmd -f .env.prod react-scripts build"

现在，我将我的 react JS 部署到 azure。仅供参考，我使用 .NET Core Spa 功能。

Answer 2

我使用 YAML 构建并将变量写入 .env 文件。我用来在 reactjs 中进行转换的包是 dotenv 版本 8.2.0

这是我的 YAML 构建文件，添加了任务来完成此操作

variables:
- group: myvariablegroup

trigger:
  batch: true
  branches:
    include:
      - develop
      - release/*

pool:
  vmImage: 'ubuntu-latest'

stages:
- stage: dev 
  condition: eq(variables['build.sourceBranch'], 'refs/heads/develop')
  jobs:
  - job: DevelopmentDelpoyment
    steps:

    - task: CmdLine@2
      inputs:
        script: 'echo APP_WEB_API = $(myvariable-dev) > Web/.env' 
      displayName: 'Setting environment variables'


    - script: |
        cd Web
        npm install
        npm run build
      displayName: 'npm install and build'


- stage: prod 
  condition: eq(variables['build.sourceBranch'], 'refs/heads/master')
  jobs:
  - job: ProductionDelpoyment
    steps:

    - task: CmdLine@2
      inputs:
        script: 'echo APP_WEB_API = $(myvariable-prod) > Web/.env' 
      displayName: 'Setting environment variables'

    - script: |
        cd Web
        npm install
        npm run build
      displayName: 'npm install and build'

Answer 3

直接添加尊者来构建管道变量。这将添加到 Azure 环境变量，应用程序可以使用它

Answer 4

不错的选择

我也遇到了这个问题，您可以通过为您的环境使用不同的构建脚本来自定义使用哪些环境变量。 找到这个 CRA 文档 https://create-react-app.dev/docs/deployment/#customizing-environment-variables-for-arbitrary-build-environments

您还可以在 YAML 中设置变量。 https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables?view=azure-devops&tabs=yaml%2Cbatch#set-variables-in-pipeline

但如果我需要单个构建怎么办？

如果您对不同的环境（dev、staging、prod）使用单个构建和发布阶段，我还没有解决这个问题。由于一切都是构建的，因此 React 具有您在构建时提供的任何 env 变量。我考虑过的替代方案：

1. 将 react 构建与 .NET 构建分开，这样您就可以像每次部署一样执行此操作
2. 定义所有 env 变量并附加例如 REACT_APP_SOME_KEY_ 然后根据子域选择特定的 env 例如 https://dev.yoursite.com https://yoursite.com ，但此选项似乎不规范。
3. 可能是 React 需要为每个环境构建的限制。接受您需要单独的构建。

Answer 5

现在是 2019 年底，我仍然面临 nodeJs 和 azure devops 中的环境变量问题。

我没有找到解决方案，但我使用了一种解决方法。我使用伪“env var”。

我在项目的根目录中创建了与".env" 文件结构相同的"env.json" 文件。将此文件放入".gitignore" 文件。将此文件显式导入到我需要使用 env var 的文件中。将其用作常规对象，而不是 process.env.***

例子：

我们有“.env”，我们需要替换：

REACT_APP_SOMW_KEY=KEY

项目本身的下一步是：

创建"env.json":

{"REACT_APP_SOMW_KEY":"KEY"}

将其添加到".gitignore"。

在使用打字稿的情况下，将下一个设置添加到tsconfig.json：

 "resolveJsonModule": true,

在 process.env.REACT_APP_SOMW_KEY 所在的文件中，将 process.env.REACT_APP_SOMW_KEY 更改为 config.REACT_APP_SOMW_KEY 并在开头添加 const config = require("../pathTo/env.json") 作为导入模块。

如果是打字稿，你也可以创建界面来自动完成：

export interface IEnvConfig{
  REACT_APP_SOMW_KEY?: string;
}   
const config: IEnvConfig = require("../pathTo/env.json");

结果会是这样的：

const reactSomeKey = /*process.env.REACT_APP_SOMW_KEY*/ config.REACT_APP_SOMW_KEY;

Azure DevOps 的后续步骤：

将您的密钥添加到 azure "key vault" 或 "variables"。

在构建项目步骤之前的 CI 管道中，您可以设置PowerShell 任务，这将创建"env.json" 文件。就像我们应该在本地创建“.env”文件一样，因为我们使用隐藏的".env" 文件创建了 git clone。 我将 yml 任务放在这里（最后您可以看到 2 个调试命令，以确保该文件已创建并存在于项目中）：

- powershell: |
   New-Item -Path $(System.DefaultWorkingDirectory) -Name "env.json" -Force -Value @'
   {
   "REACT_APP_SOMW_KEY": "$(REACT_APP_SOMW_KEY)",
   }
   '@
   Get-Content -Path $(System.DefaultWorkingDirectory)\env.json
   Get-ChildItem -Path $(System.DefaultWorkingDirectory)
  displayName: 'Create "env.json" file'

结果：您使用 json 对象键的流程与您通常使用 ".env" 的流程几乎相同。您也可以在项目中同时拥有".env" 和"env.json"。

Answer 6

当您使用 VSTS 对 Azure 进行部署时，您可以在构建管道中提供环境变量，这将自动将其包含在 ReactJS 项目中。

Answer 7

此路线仅适用于使用 Azure DevOps 的情况。

• Azure DevOps 在 Pipeline 中有一个名为 Library 的部分。
• 创建一个新的变量组并添加您的环境变量。
• 将上次创建变量组与您的构建过程相关联。

还要记住以REACT_APP_ 开头的环境变量命名

Answer 8

这不是您正在寻找的，但也许这是您问题的替代解决方案（它在构建步骤中将 process-env.x 替换为实际值）：

https://github.com/babel/minify/tree/master/packages/babel-plugin-transform-inline-environment-variables

Answer 9

作为更新，它与我原来的方法有点不同，但我已经完成了使用 DotEnv 并因此使用 .env 文件的路线，我将使用库变量在 VSTS 中动态生成这些文件，并且因此不会将它们存储在源代码管理中。

为了使用 DotEnv，我更新了 webpack.config； const Dotenv = require('dotenv-webpack');

module.exports = {
    ...
    plugins: [
        new Dotenv()
    ],

然后基本上，我创建了一个包含我的参数的 .env 文件

MD_API_URL=http://localhost:7623/api/

为了能够在我的 TSX 文件中使用它们，我只使用了 process.env；

static getCustomer(id) {
    return fetch(process.env.MD_API_URL + 'customers/' + id, { mode: 'cors' })
        .then(response => {
        return response.json();
    }).catch(error => {
        return error;
    });
}