构建 React 项目后如何设置节点环境变量（运行时）？

Question

我正在设置 ReactJS 项目以在运行时更改环境变量。

我有 2 个 ENV 变量：

1) NODE_ENV = 生产、开发

2) 风味 = 阿尔法、贝塔

我想根据 FLAVOUR 变量加载不同的配置、主题和图像。已经完成并正在运行。

构建命令：

1) 跨环境 NODE_ENV=production --env.FLAVOUR=Alpha webpack

2) cross-env NODE_ENV=production --env.FLAVOUR=Beta webpack

--

但是上面的命令在构建时改变了环境变量。但是我只想在构建后的运行时间为生产环境更改 FLAVOUR 变量。

例如。 ./build cross-env --env.FLAVOUR=Alpha节点服务器

例如。 ./build cross-env --env.FLAVOUR=Beta 节点服务器

./build 为构建目录，由npm 运行 build 命令创建。

--

这意味着当我将 FLAVOUR 变量更改为 Beta 并重新启动网络应用程序时我的期望是 Beta 应用程序和主题。这有助于我们扩展这些网络应用程序。它们可以在很短的时间内重新利用。

Webpack 生产：

new webpack.DefinePlugin({
   'process.env.FLAVOUR': JSON.stringify(process.env.FLAVOUR),
})

Answer 1

我不知道这是否回答了你的问题，但我已经使用 webpack 如下设置我的项目

  new webpack.EnvironmentPlugin({
      ENV: process.env.ENV || 'development',
      API_BASE: process.env.API_BASE,
    }),

我在 .env 文件中定义了 API_BASE，当我运行 yarn start 进行开发

时，webpack 会获取该文件

完成开发后，我构建了一个生产 docker 映像，我可以覆盖环境文件中的 API_BASE，同时运行将映像设置为

docker build -t yourProjectName .
docker run -e API_BASE='http:\/\/yourIPAddress:port/' -p 9000:80 yourProjectName

这是可能的，因为在我的 Dockerfile 中，我运行 bash 脚本每当图像运行s

RUN chmod +x setup.sh

ENTRYPOINT ["sh","/setup.sh"]
CMD ["nginx", "-g", "daemon off;"]

和 setup.sh 文件

/bin/sed -i "s||${API_BASE}|g" /usr/share/nginx/html/app.*.js
exec "$@"

脚本查找字符串 http://localhost:5000/ 并将其替换为您在运行time

期间传递的任何内容

希望对您有所帮助！

Answer 2

我今天遇到了这个问题，并通过 webpack externals 提供 process.env 解决了这个问题。

const config = {
  externals: [{ processEnv: 'process.env' }, nodeExternals({})],
}

上面的行告诉 webpack 有一个名为 processEnv 的依赖项，应该通过引用 process.env 来解决。它输出一个小的 commonjs 模块。

// WEBPACK'S BUILD
/***/ "processEnv":
/*!******************************!*\
  !*** external "process.env" ***!
  \******************************/
/***/ ((module) => {

"use strict";
module.exports = process.env;

/***/ }),

在您的代码中，您可以通过执行来要求此 shim。

const processEnv = require('processEnv')

我在这里更详细地记录了这个过程https://blog.freemiumpn.com/docs/developer/how-to/web/runtime-configs-with-webpack-and-docker-v2

构建 React 项目后如何设置节点环境变量（运行时）？

How to set node env variables (runtime) after build the React project?

runtime

environment-variables

npm

reactjs

redux