如何從 Node 應用程序客戶端訪問環境變量

Question

我有一個部署到 Elastic Beanstalk 的 Node 應用程序。 我有運行客戶端的 javascript 來發出 HTTP 請求。 客戶端 javascript 指的是在 URI 中具有硬編碼端口的路由。

Elastic Beanstalk 偵聽端口 8081。在我的 app.js 文件中，我可以寫const port = process.env.PORT || 3000 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 config 的plugins部分：

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

這將允許您訪問js的變量

process.env.<VARIABLE NAME>

並在HTML為：

%<VARIABLE NAME>%