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

Posted 2023-02-22

【中文标题】构建 React 项目后如何设置节点环境变量（运行时）？

【英文标题】：How to set node env variables (runtime) after build the React project?

【发布时间】：2020-01-05 04:50:42

【问题描述】：

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

我有 2 个 ENV 变量：

1) NODE_ENV = 生产、开发

2) 风味 = Alpha、Beta

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

构建命令：

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

2) 跨环境 NODE_ENV=production --env.FLAVOUR=Beta webpack

--

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

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

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

./build 是构建目录，由 npm run build 命令创建。

--

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

Webpack 生产：

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

【参考方案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 脚本

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/ 并将其替换为您在运行时传递的任何内容

希望这会有所帮助！

【参考方案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 详细记录了该过程