Question

我有一个部署到Elastic Beanstalk的Node应用程序。我有运行客户端发出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>%

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

1 个答案: