Heroku 环境变量未在 javascript 中为 React/Rails 应用程序设置

Question

我在this guide 之后构建了一个带有 React SPA 前端的 Rails-Api（非常有帮助，会推荐）。我在让 Heroku 在 React 用于配置变量的 .env 文件中设置环境变量时遇到问题。文件的值只是按字面意思设置为“ENV[...]”，而不是评估和设置值。在 Rails 方面，Heroku ENV 变量设置正确，因为我可以在控制台中看到它们。

.env file:
REACT_APP_API_KEY=ENV['API_KEY']
REACT_APP_AUTH_DOMAIN=ENV['AUTH_DOMAIN']

App.js (top level Component):
console.log(config,process.env);
// which logs:
{
  NODE_ENV: "production"
  REACT_APP_API_KEY: "ENV['API_KEY']"
  REACT_APP_AUTH_DOMAIN: "ENV['AUTH_DOMAIN']"
  ...
}

Rails Console:
irb(main):001:0> ENV
=> {"LANG"=>"en_US.UTF-8", "NODE_ENV"=>"production",
"API_KEY"=>"<correct-value>", "AUTH_DOMAIN"=>"<correct-value>",......}

我需要做些什么来提醒 Heroku 还需要在 react 应用程序的 .env 文件中设置 ENV 变量吗？本教程让 Heroku 部署同时使用 nodejs 和 ruby​​ 构建包（按此顺序）。该应用程序已构建，然后复制到 Rails 服务的“公共”目录：

package.json
{
  //...
  "engines": {
    "node": "12.9.0",
    "yarn": "1.22.4"
  },
  "scripts": {
    "build": "yarn --cwd client install && yarn --cwd client build",
    "deploy": "cp -a client/build/. public/",
    "heroku-postbuild": "yarn build && yarn deploy"
  }
}

我对 Heroku 的 env vars swap 的内部运作了解不够。根据我对 Create React App 的理解...... .env 文件的内容是set at build time，因此有可能在 Heroku 有机会注入 env vars 之前编译了 js。如果这种方法不可行，我愿意就其他方法提出建议。谢谢！

Answer 1

您可以在.env 文件中展开环境变量。构建 React 应用程序时，它可以访问 Heroku dyno 中的变量，并且 react-scripts 支持在 .env 文件中引用它们。 See more in docs.

考虑到这一点，您的 .env 文件将如下所示：

REACT_APP_API_KEY=$API_KEY
REACT_APP_AUTH_DOMAIN=$AUTH_DOMAIN

假设在 Heroku 中设置了 API_KEY 和 AUTH_DOMAIN 变量。

如果您首先在 Heroku 中将这些变量命名为 REACT_APP_API_KEY 和 REACT_APP_AUTH_DOMAIN，那么它们将被 react-scripts 直接从环境中拾取（然后不需要 .env 文件）

注意：如上所述，听起来您正试图在 React 应用程序中公开秘密。 Create React App 文档强烈警告不要这样做，因为：

环境变量嵌入到构建中，这意味着任何人都可以通过检查您应用的文件来查看它们。