未在 JavaScript 中為 React/Rails 應用程序設置 Heroku 環境變量

Question

我已經按照本指南構建了一個帶有 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 還需要在 .env 文件中為 react 應用程序設置 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。 如果這種方法不可行，我願意接受其他方法的建議。 謝謝！

Answer 1

您可以在.env文件中擴展環境變量。 當構建 React 應用程序時，它可以訪問您的 Heroku .env變量，並且 react-scripts 支持在您的.env文件中引用它們。 在文檔中查看更多信息。

考慮到這一點，您的.env文件將如下所示：

REACT_APP_API_KEY=$API_KEY
REACT_APP_AUTH_DOMAIN=$AUTH_DOMAIN

假設在 Heroku 中設置了API_KEY和AUTH_DOMAIN變量。

如果您REACT_APP_AUTH_DOMAIN在 Heroku 中將這些變量REACT_APP_API_KEY和REACT_APP_AUTH_DOMAIN ，那么它們將被 react-scripts 直接從環境中獲取（然后不需要.env文件）

注意：如上所述，聽起來您正試圖在 React 應用程序中公開秘密。 Create React App 文檔強烈警告不要這樣做，因為：

環境變量嵌入到構建中，這意味着任何人都可以通過檢查您的應用程序文件來查看它們。