访问 React 应用程序目录之外的 .env 变量

Question

我的项目结构是：

\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 backend\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 routes\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 server.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 frontend\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 .env\n\n

\n

哪里frontend是 React 应用程序，哪里backend是 Express 应用程序。我有一个环境变量API_KEY=...，.env需要在前端应用程序的后端使用。

\n

\n

• 在 Express 后端应用程序中，我可以轻松地使用它而process.env.API_KEY不会出现问题，即使它位于后端应用程序文件夹之外。

  \n
\n

• 但是，我还需要从 React 前端应用程序访问该密钥，undefined当我使用process.env.API_KEY. 从 React 文档来看，对于 React 应用程序，你需要：

  \n
  \n
  1. 为变量命名REACT_APP_API_KEY
  \n
  2. 确保它位于 React 应用程序目录内。
  \n
  \n

  所以，是的，我可以.env在 React 应用程序中创建另一个文件并按照这些说明进行操作，但我觉得它添加了不必要的重复代码：

  \n
  \n
  1. 我有两个.env文件，这似乎有点令人困惑。
  \n
  2. 我在两个不同的文件中拥有相同的密钥，这也很令人困惑，每次它发生变化时，我都必须编辑两个文件而不是一个。
  \n
  3. 我必须保护该新.env文件免受版本控制软件的影响，这会增加漏洞。
  \n
  \n
\n

\n

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

\n

Answer 1

如果从事 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 run client 的原因）

或者您可以做的另一件简单的事情是，如果您只想启动您的 REACT 应用程序......

从根目录运行简单的行......

npm start --前缀前端

(As frontend is your react folder)