在我的 React 应用程序中访问 heroku 配置变量

Question

我在我的 Heroku 应用程序中定义了一个配置变量“BASE_URL”，我试图在我的 React 应用程序中访问它

process.env.BASE_URL

但是当我 console.log 它时它给了我 undefined 因为它似乎不存在。如何在我的 React 应用程序中访问 Heroku 配置变量？

Answer 1

如果您使用 Create React App（或 react-scripts），REACT_APP_例如，在变量前面加上REACT_APP_BASE_URL，并且 Create React App在构建过程中自动使用其值。

注意：您不得以这种方式泄露任何机密，例如 API 密钥或密码。所有这些变量的实际内容都附加到生产构建文件本身，只需阅读面向公众的代码文件即可自由访问。

这里需要注意的重要一点是，React 在构建时而不是运行时嵌入环境变量的值。因此，当在 Heroku 中设置配置变量的值时（确保在前面添加 REACT_APP_），您需要重建并重新部署您的应用程序以使新的变量可用。 (3认同)
我并不是指一般的 .env 文件。我特指前端构建中的 .env 文件，以及以“REACT_APP_”开头的变量，因为它们会传输到构建的 .js 文件中。其他 .env 变量仅在构建期间可用并保持安全。当然，API 密钥在构建期间是没有用的。并且没有办法以任何方式安全地将它们提供给前端代码，无论是否为 .env 文件。它们应该只保留在后端，在 .env 文件中是安全的（只要您安全地存储开发文件）。 (2认同)

Answer 2

require('dotenv').config()
...
console.log(process.env.BASE_URL);

看看这个帖子，很有用。