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

Question

我已将一个Node应用程序部署到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 noob，并且我不确定访问PORT环境变量的最佳方法是什么在客户端上。

Answer 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>%