Reactjs 访问React app目录之外的.env变量

我的项目结构是：

.
├── backend
│   ├── node_modules
│   ├── package.json
│   ├── routes
│   └── server.js
├── frontend
│   ├── node_modules
│   ├── package.json
│   ├── public
│   └── src
├── node_modules
├── package.json
└── .env

其中

前端

是React应用程序，

后端

是Express应用程序。我在

.env

中有一个环境变量

API\u KEY=…

，我需要在前端应用程序的两个后端中使用它。

• 在Express后端应用程序中，我可以使用

  process.env.API_KEY

  轻松访问它，而不会出现问题，即使它位于后端应用程序文件夹之外

• 但是，我还需要从React前端应用程序访问该密钥，当我使用

  process.env.API_key

  时，该应用程序返回

  undefined

  。React docs说，对于React应用程序，您需要：

• 命名变量

  REACT\u APP\u API\u KEY

• 确保它位于React应用程序目录内
因此，是的，我可以在React应用程序中创建另一个

.env

文件并按照以下说明操作，但我觉得这是在添加不必要的重复代码：
• 我有两个

  .env

  文件，看起来有点混乱
• 我会在两个不同的文件中使用相同的密钥，这也会让人困惑，每次它发生变化时，我必须编辑两个文件，而不是一个文件
• 我必须保护新的

  .env

  文件不受版本控制软件的影响，这会增加漏洞

是否有任何变通方法可以让我只将API密钥放在项目的根目录中？在多个文件中使用相同的api密钥是常见的做法吗

如果正在处理MERN项目>>> {根目录包.JSON}

"scripts": {
    "start": "node backend/server.js",
    "server": "nodemon backend/server.js",
    "client": "npm start --prefix frontend", // frontend is my react folder 
    "dev": "concurrently \"npm run server\" \"npm run client\" "  }

在根目录的package.json中添加此类脚本

然后从根目录运行“npm run client”（我确实运行了 通过客户端密钥执行前端命令…这就是我运行npm（运行客户端）的原因

或者你可以做的另一件简单的事情是，如果你只想让你的REACT应用程序启动。。。。 从根目录运行简单行

npm开始——前缀前端

如果正在处理MERN项目>>> {根目录包.JSON}

"scripts": {
    "start": "node backend/server.js",
    "server": "nodemon backend/server.js",
    "client": "npm start --prefix frontend", // frontend is my react folder 
    "dev": "concurrently \"npm run server\" \"npm run client\" "  }

在根目录的package.json中添加此类脚本

然后从根目录运行“npm run client”（我确实运行了 通过客户端密钥执行前端命令…这就是我运行npm（运行客户端）的原因

或者你可以做的另一件简单的事情是，如果你只想让你的REACT应用程序启动。。。。 从根目录运行简单行

npm开始——前缀前端

---

有什么问题吗？在编译时，react实际上应该引用该值并替换它。在rootOh中只能使用一个.env文件是因为两个env变量的名称不同吗？您查看了此文档吗？实际上认为它是create react app，但事实并非如此，您如何构建应用程序？此API密钥是私有密钥吗？如果是这样，它不应该直接用于前端。在前端和后端之间共享环境文件通常有点混乱。我知道，因为它是一个express服务器，所以它使用Javascript和NPM等，所以它看起来更容易共享，但它会造成很大的混乱。最好将前端和后端视为不同的项目，这样节点模块和环境文件、配置文件和所有内容就不会混合在一起。但如果不将它们分开，您可以复制

.env

中的值，一个称为API\u KEY，另一个称为REACT\u APP\u API\u KEY。问题是什么？在编译时，react实际上应该引用该值并替换它。在rootOh中只能使用一个.env文件是因为两个env变量的名称不同吗？您查看了此文档吗？实际上认为它是create react app，但事实并非如此，您如何构建应用程序？此API密钥是私有密钥吗？如果是这样，它不应该直接用于前端。在前端和后端之间共享环境文件通常有点混乱。我知道，因为它是一个express服务器，所以它使用Javascript和NPM等，所以它看起来更容易共享，但它会造成很大的混乱。最好将前端和后端视为不同的项目，这样节点模块和环境文件、配置文件和所有内容就不会混合在一起。但是，如果不将它们分开，您可以复制

.env

中的值，一个称为API_KEY，另一个称为REACT_APP_API_KEY