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

Question

我想在 Heroku 上部署一个 React 应用程序 + Node 服务器，

我看到如果你使用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”中有一个变量的最简单方法是什么？

谢谢

Answer 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

现在，当您运行脚本时，您需要通过将 env vars 附加到它来运行它：

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

因此， dotenv 将分别读取.env.development和.env.production 。 CRA 默认执行此操作，并且不可覆盖：

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 工具应该将 env var 设置为production ； 这样，您就可以在登台服务器中看到您的网站。 我建议您只在开发环境中运行生产脚本server:prod并创建另一个可以通用运行的脚本，而无需手动显示环境变量。

编辑：更改了一些脚本的名称并为 env var 添加了development回退。