如何在反应应用程序和将其作为静态站点托管的快速 js 服务器之间共享环境变量答案

【问题标题】：how to share environment variables between react app and express js server hosting it as static site如何在反应应用程序和将其作为静态站点托管的快速 js 服务器之间共享环境变量
【发布时间】：2020-06-22 21:25:13
【问题描述】：

我在名为 client/build 的文件夹中的 express 服务器项目下作为静态站点托管了一个 react 应用程序。我有一些 oauth 重定向 uri，指向 express 服务器也指向稍后的令牌检索。我的 react-app 将用户重定向到我的 express 服务器环境变量也引用的 oauth 端点。

    ` //express .env :
      process.env.HOST=localhost
      process.env.PORT=port
      process.env.OAUTH2URI=example.com
     `
   ` //react .env :
      process.env.REACT_APP_HOST=localhost
      process.env.REACT_APP_PORT=port
      process.env.REACT_APP_OAUTH2URI=example.com
     `

当我运行我的 express 应用程序时，react 应用程序如何引用我的 express 服务器应用程序正在使用的同一主机和端口？

我可以不将 express 应用程序中的公共环境变量引用到 react 应用程序而不用不同的名称复制吗？

【问题讨论】：

您找到解决方案了吗？

标签： javascript node.js reactjs express

【解决方案1】：

我尝试了很多东西，但似乎都没有奏效。我为此做的解决方法是在 Express 中创建一个 API，该 API 将由前端调用并转发 env var。类似的东西：

app.get('/getEnvironmentVars', (_, res) => {
    res.json({ ENVIRONMENT: process.env })
})

然后您只需在前端代码中获取它，例如：

export async function getEnvironmentVarsFromExpress() {
    return await fetch('/getEnvironmentVars').then((res) => res.json())
}

【讨论】：

【解决方案2】：

所以当我今天查看将环境变量传递给 React 时，我偶然发现了这个网站 https://create-react-app.dev/docs/adding-custom-environment-variables/，它说出于安全原因，React 使用的所有环境变量都必须以 REACT_APP 开头。

【讨论】：

确实如此，但似乎不受在 express 应用的 .env 中设置环境变量的影响