Question

我有一个我正在部署的react / node应用程序。其中一个组件尝试访问NODE_ENV以确定要使用的主机URL（localhost或heroku）。

我现在意识到即使NODE_ENV被设置为生产，它在浏览器上下文中总是“未定义”，因为环境不是节点。

由于我无法从反应组件访问NODE_ENV，我该如何动态设置主机服务器？

Answer 1

其中一个组件尝试访问NODE_ENV以确定要使用的主机URL（localhost或heroku）。

是的，绝对是！

在构建时和运行时之间存在差异。你会在构建时遇到NODE_ENV - 说你运行webpack或者什么来构建一些JSX，或者其他什么。

当用户访问您的网站时，您在运行时没有NODE_ENV。该网页浏览环境中没有环境变量的概念。

我在这种情况下所做的是以编程方式创建一个有条件地拥有Web服务器URL的文件。甚至可以捕获NODE_ENV并将值放在应用程序中以供日后使用。

作为一个实际例子：在几年前的一个React项目中，我们自动生成了我们的index.html文件。这是一个愚蠢的小文件，引入我们需要的<script> Javascript标记，并为React应用添加<div>以进行渲染。在模板语言中，我们做了类似这样的事情：

index.html.templ

<html><body ENVIRONMENT="$NODE_ENV"></body></html>

在该文件出现在我们的构建管道的另一端之后，它对于我们的生产构建看起来像这样：

的index.html

<html><body ENVIRONMENT="PRODUCTION"></body></html>

然后我们只使用普通的DOM Javascript来获取body元素并检查属性（然后把它放在Redux存储中？我完全忘了）。

在用户访问时，我们有一个明显硬编码的＆＃34;生产＆＃34;。但你和我知道的更好！

更新：我忘记了，实际上有两种方法在Webpack本身中执行此操作，而不使用外部模板工具并生成像我描述的文件这里！

使用WebPack定义插件。这实际上将为您的转换阶段添加另一个步骤：一个进入并用一些其他文字字符串替换文字字符串。因此let e = "NODE_ENV"将成为let e = "production"。那里有一个good Medium blog post about defineplugin，而且很酷。
Webpack本身有一些环境变量支持。显然，如果您使用webpack --env.NODE_ENV=production运行webpack。那么......也许你可以使用process.env.NODE_ENV？ Webpack documentation for this feature在此

Answer 2

将NODE_ENV变量用于API网址等方面，这是一种很好的做法。

如果您使用了create-react-app，那么REACT_APP_开头的所有环境变量都应该可以通过process.env.REACT_APP_VARIABLE_NAME访问。
您可以尝试REACT_APP_TEST=5 npm start然后console.log(process.env.REACT_APP_TEST)。

如果您不使用create-react-app，则必须在webpack配置中导入它们。

您还可以选择使用dotenv通过process.env文件为应用定义.env个变量。

Answer 3

我认为你误解了这里的范围。 Node是一个javascript运行时，作为服务器运行以处理后端内容。 NODE_ENV是节点中用于设置环境变量的变量，因此，它只能在节点环境中访问，而不能在客户端访问。

无论如何，首先，没有理由要将配置变量暴露给客户端（这是一个漏洞问题）。如果它与某些依赖于服务器端变量的配置相关，则必须单独在客户端设置它。我能想象的一个用例是定义一个套接字主机和端口来监听从客户端到服务器端。希望能够解决问题：）

想象一下生命周期：

客户请求
节点服务器处理并响应请求
响应通过浏览器提供

Answer 4

您可以使用以下方法在index.html中检查NODE_ENV：

在生产环境中编译index.html时，它将看起来像这样

if ("%NODE_ENV%" === "production") {
  // ...do production stuff
} else {
  // ...do development stuff
}

访问NODE_ENV在前端代码中有意义吗？

4 个答案: