好的选择

我也遇到了这个问题，您可以通过为您的 env 使用不同的构建脚本来自定义使用哪些 env 变量。找到这个 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

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

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

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

当你使用 VSTS 部署到 Azure 时，你可以在构建管道中提供你的环境变量，它会自动将它包含在 ReactJS 项目中。

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

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

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

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

例子：

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

REACT_APP_SOMW_KEY=KEY

项目本身的下一步是：

创建"env.json"：

{"REACT_APP_SOMW_KEY":"KEY"}

将其添加到".gitignore".

如果使用typescript，请将下一个设置添加到tsconfig.json：

 "resolveJsonModule": true,

在文件process.env.REACT_APP_SOMW_KEY所在的变化process.env.REACT_APP_SOMW_KEY，以config.REACT_APP_SOMW_KEY和ADDconst config = require("../pathTo/env.json")作为begginning一个导入module。

在typescript的情况下，你也可以创建界面来自动完成：

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"。

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

要将其部署到 azure，必须完成两件事。首先删除排除 .env* 文件的 .ignore 规则。注意：假设你没有把秘密放在这里！无论如何，.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 功能。