在 React 应用程序的 shell 脚本中设置环境变量答案

【问题标题】：Setting environment variables in a shell script for a React app在 React 应用程序的 shell 脚本中设置环境变量
【发布时间】：2019-04-13 14:03:46
【问题描述】：

我正在尝试在 powershell（和 bash）脚本中设置一些环境变量并在 ReactJS 应用程序中读取它们。 shell脚本很简单：

$env:AUTHDOMAIN="some.domain.com"
$env:AUTHCLIENTID="bunch-o-characters"
$env:AUTHCALLBACK="http://somewhere:3002/callback"
$env:AUTHAUDIENCE="auth-audience"

$env:PORT=3002

# Get-ChildItem Env:

yarn start

yarn 正确获取了端口，但 React javascript 中的 process.env 没有任何变量（包括 PORT）可用。

console.log("domain     : " + process.env.AUTHDOMAIN);
...
domain     : undefined App.js:33

我的package.json 文件没有修改：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

我错过了什么？ Get-ChildItem 说明环境中的变量设置正确。

编辑：我尝试了here 列出的解决方案，但它不起作用。它还阻止终端接收任何输出：

$ ($env:AUTHDOMAIN="some.domain.com") -and (yarn start)

同样的结果。

编辑 #2：值得注意的是，在 linux/bash 中的行为完全相同（这是一个很好的试金石，因为我在 bash 中这样做了大约 1000 亿次）- yarn 正确设置了端口，但没有任何信息进入反应应用程序：

#!/bin/sh

export AUTHDOMAIN="some.domain.com"
export AUTHCLIENTID="bunch-o-text"
export AUTHCALLBACK="http://somewhere:3001/callback"
export AUTHAUDIENCE="auth-audience"

export PORT=3002

yarn start

所以这可能与powershell无关。

【问题讨论】：

这只是上下文问题吗？如果你在系统上下文而不是当前用户中设置变量，你会得到不同的结果吗？
你的意思是通过[Environment]::SetEnvironmentVariable()？我宁愿不那样做。作为记录，我做了同样的事情来将环境变量加载到 golang api 中，并且 api 可以很好地看到它们。
在我杀死服务器后，环境变量实际上确实存在于环境中，这有点令人烦恼。
您需要重新加载进程外壳以加载环境更改，例如：stackoverflow.com/q/171588/1701026
@iRon 我认为这些都不适用。这是 powershell 而不是 cmd.exe，环境变量肯定会被设置（如 Get-ChildItem 所示），并且相同的设置适用于使用环境变量的 golang 应用程序。我不希望变量是系统范围的，只是脚本进程的本地变量。

标签： reactjs powershell create-react-app yarnpkg

【解决方案1】：

您希望使用的每个环境变量都必须以 REACT_APP_ 为前缀根据documentation of create-react-app:

注意：您必须创建以 REACT_APP_ 开头的自定义环境变量。除了 NODE_ENV 之外的任何其他变量都将被忽略，以避免在机器上意外暴露可能具有相同名称的私钥。更改任何环境变量都需要您重新启动正在运行的开发服务器。

【讨论】：

刚刚发现 - 谢谢！值得注意的是，如上所述，发送到 yarn（react-scripts）的 env var 没有这个要求。
关于重启的部分很有用！谢谢