时间戳

首页 > 解决方案 > Heroku 环境变量未在 javascript 中为 React/Rails 应用程序设置

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

问题描述

我按照本指南构建了一个带有 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 交换的内部工作了解不够。根据我对 Create React App 的理解...... .env 文件的内容是在构建时设置的，因此有可能在 Heroku 有机会注入 env vars 之前编译了 js。如果这种方法不可行，我愿意就其他方法提出建议。谢谢！

标签： ruby-on-railsreactjsherokuenvironment-variablescreate-react-app

解决方案

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

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

REACT_APP_API_KEY=$API_KEY
REACT_APP_AUTH_DOMAIN=$AUTH_DOMAIN

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

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

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

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

推荐阅读