REACT_APP_KEY 来自 root 中的 .env 未被访问

Question

我正在尝试将我的 API 密钥放入我的项目根目录中的 .env 文件中（与包 json 文件处于同一级别）

当我控制台记录 REACT_API_KEY 时，它被读取为未定义

我已经多次重启服务器，一切都保存了。

Answer 1

我建议使用名为 dotenv 的库。这将读取您的 .env 文件。

假设您有一个环境变量：REACT_API_KEY=APIKEY.

您可以像这样访问值：

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

这将记录：APIKEY

这将在后端，然后您需要使用某种形式的 node.js 库将数据提供给前端。这是一个使用 express:

的例子

const express = require('express');
const app = express();
require('dotenv').config();


app.get('/apikey', (req, res) => {
  res.send(process.env.REACT_API_KEY);
})

现在，您需要在前端创建一个 GET 请求到此 uri 以实际获取数据。这是一个使用 axios:

的例子

axios.get('/apikey').then((res) => {
  console.log(res);
  // res will be your API key in a String format
})

显然，因为此密钥隐藏在后端，所以您不希望用户能够在您的 API 中访问此端点。您可以使用 nginx.

等网络服务器配置您希望用户能够访问的端点

这对于一个环境变量来说可能看起来很多，尽管这些步骤将解决您将来的许多问题，例如用户登录和注册表以及其他数据。

这是没有 ReactJS 构建过程的方法。如果您使用 create-react-app 来构建您的应用程序，您可以使用在构建过程中嵌入的 React 环境变量。在 react documentation

中查看

Answer 2

您需要在开头追加process.env。

REACT_APP_KEY 来自 root 中的 .env 未被访问

REACT_APP_KEY from .env in root not being accessed

javascript

reactjs

api

visual-studio-code

environment-variables