Node.js 如何在客户端为graphql指定环境变量？

对于上下文，我在应用程序上运行graphql。这个应用程序使用SSR（服务器端渲染），在这方面的所有调用都可以正常工作。当客户端点击应用程序时，我呈现应用程序，就像任何其他标准react应用程序一样：

渲染（路由，createClient（））

问题是。。在createclient（创建apolloclient的地方，它告诉提供者如何连接到外部graphql服务器），我引用了一个env变量

const serverLocation =
  process.env.SERVER_LOCATION || 'http://localhost:8080/graphql

---

现在，在SSR的情况下，在服务器上这一切都很好，但是在客户端上没有env变量的概念-只是没有定义。鉴于此值可以配置并在客户机上实例化，我应该如何填充此值

有很多很多方法可以做到这一点。实际上，您希望在编译时以某种方式读取环境变量，并将它们烘焙到最终在客户端运行的已编译JS文件中

使用webpack的React应用程序实现这一点的一种方法是使用自定义插件：

const webpack = require('webpack');

module.exports = (env) => {
  // Create an object from the env variable
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };
};

这将为客户端代码提供对

process.env

变量的访问

来源（和一些替代解决方案）：

编辑：因为这是一个非常常见的场景，所以使用

.env

文件也可以这样做

const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = (env) => {
  const env = dotenv.config().parsed;

  // Create an object from the env variable
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };
};

---

有很多很多方法可以做到这一点。实际上，您希望在编译时以某种方式读取环境变量，并将它们烘焙到最终在客户端运行的已编译JS文件中

使用webpack的React应用程序实现这一点的一种方法是使用自定义插件：

const webpack = require('webpack');

module.exports = (env) => {
  // Create an object from the env variable
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };
};

这将为客户端代码提供对

process.env

变量的访问

来源（和一些替代解决方案）：

编辑：因为这是一个非常常见的场景，所以使用

.env

文件也可以这样做

const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = (env) => {
  const env = dotenv.config().parsed;

  // Create an object from the env variable
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };
};

---

简而言之，您不能从客户机使用envvars。相反，您需要构建最终提供给客户机的代码，以便在服务器上设置变量时包含这些变量。相反，您需要构建最终提供给客户机的代码，以便在服务器上设置变量时包含这些变量。我应该如何在编译时获取实际的env映射？考虑到这可能会被停靠和配置，或者只是通过webpack中的--env传递它们？在这种情况下，使用npm包dotenv-这允许您在源代码的根目录中提供一个

.env

文件，该文件可以包含所有环境变量。我链接的那篇文章解释了如何将这个

.env

文件与webpack连接起来（我只是想让答案相当通用）。啊，好吧，这很有意义。我应该如何在编译时获取实际的env映射？考虑到这可能会被停靠和配置，或者只是通过webpack中的--env传递它们？在这种情况下，使用npm包dotenv-这允许您在源代码的根目录中提供一个

.env

文件，该文件可以包含所有环境变量。我链接的这篇文章解释了如何将这个

.env

文件与webpack连接起来（我只是想让答案相当通用）。