在我的 React 应用程序中访问 heroku config var

Question

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

process.env.BASE_URL

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

Answer 1

你必须使用 module that loads environment variables。那么，

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

检查这个post，很有用。

Answer 2

如果您使用 Create React App（或 react-scripts），请在变量前添加 REACT_APP_，例如 REACT_APP_BASE_URL，然后创建 React App automatically uses its value during the build process，然后创建它可在 process.env.

请注意，该值是在构建时根据执行构建的机器或进程上的环境确定的。如果构建是通过推送到 Heroku 完成的，就像通常在 Heroku React 应用程序中那样，那么通过在构建时在 Heroku 中设置的环境。

如果您不使用 Create React App，而是使用 Webpack，则需要使用 Webpack EnvironmentPlugin 来定义所需的环境。

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

Answer 3

用于 react es6 使用

从 'dotenv/config'

导入 {}

Answer 4

首先使用yarn/npm

安装dotenv

yarn add dotenv

或

npm install dotenv

然后在src文件夹的父目录下创建一个.env文件然后将您的密钥添加到前缀为 REACT_APP_ 的 .env 文件中，如

REACT_APP_YOUR_API=15dw8...

现在在你的 app.js 配置 dotenv

require('dotenv').config()

现在您可以访问带有前缀 process.env.REACT_APP_ 的环境变量，例如

 process.env.REACT_APP_YOUR_API

您可能需要重新启动开发服务器

在我的 React 应用程序中访问 heroku config var

accessing heroku config var in my React app

heroku

node.js

ecmascript-6

reactjs

create-react-app