如何编辑开发和生产环境变量？答案

【问题标题】：How to edit environment variable for development and production?如何编辑开发和生产环境变量？
【发布时间】：2020-04-20 02:52:30
【问题描述】：

我想在 Heroku 上部署一个 React 应用 + 节点服务器，

我看到如果你使用 create-react-app，你可以使用 process.env.NODE_ENV 来知道你是在开发中还是在生产中，但是我总是得到“开发”，它不起作用，所以我试过这个：

.env

REACT_APP_ENV=dev

在 React 应用程序中，我尝试通过控制台记录变量，但它仍然未定义

console.log("env ", process.env.REACT_APP_ENV); <-- output: undefined

但是在服务端，控制台日志是对的，

if (process.env.REACT_APP_ENV === "prod") {
  app.use(express.static("build"));
  app.get("*", (req, res) => res.sendFile(path.resolve("build", "index.html")));
} else if (process.env.REACT_APP_ENV === "dev") {
  console.log("ENV ", process.env.REACT_APP_ENV); <-- output: "dev"
}

当我在生产时，在“prod”和在开发中的“dev”有一个变量的最简单方法是什么？

谢谢

【问题讨论】：

请检查.env文件的路径？
.env 是根目录，我也有 .env.development 和 .env.production 因为我尝试了这个解决方案
你能分享 index,js 的文件你在哪里声明 env 文件
React 应用程序在客户端运行，即与服务器完全不同的上下文，因此您的环境变量在那里不可用。如果您使用的是捆绑器，例如 Webpack 或 Browserify，您可以使用它来将 env vars 注入到捆绑包中。否则，您必须创建客户端应用程序可以从中检索它的端点。
请看这个链接npmjs.com/package/dotenv-webpack

标签： javascript node.js reactjs environment-variables

【解决方案1】：

根据您所写的内容，我的理解是您正在尝试使用与.env.development 和.env.production 中相同的环境变量。 dotenv 包检查的默认路径是path.resolve(process.cwd(), '.env')；所以，你需要改变它：

const env = process.env.NODE_ENV || 'development'; // if nothing is given, set it as development.
require("dotenv").config({ path: path.resolve(__dirname, `.env.${env}`) });
// ^ do checks to make sure that random env vars are not written

现在，当您运行脚本时，您需要通过附加环境变量来运行它：

NODE_ENV=development nodemon server.js
NODE_ENV=production nodemon server.js

因此，dotenv 将分别读取.env.development 和.env.production。 CRA 默认执行此操作，it is not overridable:

npm start -> development
npm start -> production

您对此无能为力（可能会弹出但无需这样做）。只需在脚本中添加环境变量即可：

"scripts": {
  "server:dev": "NODE_ENV=development nodemon server.js",
  "start": "concurrently \"npm run server:dev\" \"npm run client\"",
  "server:prod": "NODE_ENV=production nodemon server.js",
  ...
}

我还想提一下，这可能有助于在开发环境中查看生产应用程序的可见性；但是，在大多数情况下，这些变量应该在构建/平台环境中设置。例如，CI 工具应将环境变量设置为production；这样，您就可以在登台服务器中看到您的网站。我建议您只在开发环境中运行生产脚本server:prod，并创建另一个可以通用运行而无需手动显示环境变量的脚本。

编辑：更改了一些脚本的名称并添加了 development 用于环境变量的后备。

【讨论】：