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

Posted 2023-03-04

【中文标题】如何从 Node 应用程序客户端访问环境变量

【英文标题】：How to access environment variables from Node app client

【发布时间】：2020-04-04 08:54:20

【问题描述】：

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

Elastic Beanstalk 侦听端口 8081。在我的 app.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 环境的最佳方法是什么客户端上的变量。

【参考方案1】：

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

这个blog 描述了使用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>%