如何从 Node 应用客户端访问环境变量

Question

我有一个 Node 应用程序部署到 Elastic Beanstalk。我有运行客户端进行HTTP请求的javascript。客户端 JavaScript 是指在 URI 中硬编码端口的路由。

Elastic Beanstalk 侦听端口 8081。在我的应用程序.js文件中，我可以编写const port = process.env.PORT || 3000并且工作正常(因为它在服务器端运行(。

我遇到的困难在于我的客户端javascript。假设我有这样的东西

fetch('http://localhost:3000/users/login', {...})

要在 Elastic Beanstalk 上运行，我需要将其更改为 8081，但如果我尝试像在 app.js 中那样使其动态化，则找不到process变量。具体来说，如果我将路线更改为

const port = process.env.PORT || 3000 
fetch('http://localhost:' + port + '/users/login', {...})

然后我得到以下错误：ReferenceError: Can't find variable: process.

我想我理解问题的症结(环境变量仅在服务器上可用(，但我是 Node/Express 菜鸟，我不确定在客户端上访问 PORT 环境变量的最佳方法是什么。

Answer 1

如果使用webpack捆绑 FE 应用程序，则可以将应用程序配置为将环境变量传递给 FE 应用程序。

此博客介绍了使用create react app时如何完成此操作。在检查 webpack 配置时，两个基本上可以解决问题的功能是：

function getClientEnvironment () {
const raw = Object.keys(process.env)
// Custom regex to allow only a certain category of variables available to the application
.filter(<restrict the variables available to the application>)
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
NODE_ENV: process.env.NODE_ENV || 'development'
}
);
// Stringify all values so we can feed into Webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
return { raw, stringified };
}

const env = getClientEnvironment()

在您的 webpack 配置页面中，您可以将这些添加到 webpack 配置的plugins部分：

new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
new webpack.DefinePlugin(env.stringified)

这将允许您访问js中的变量

process.env.<VARIABLE NAME>

在HTML中为：

%<VARIABLE NAME>%