使用Webpack模块联合在运行时注入环境变量

Question

关于在与Webpack绑定后注入环境变量的问题已经得到了询问和回答。

答案始终基于在index.html文件中加载更新的环境变量。

但是，当使用Webpack模块联合时，我们只公开一个component.js文件，那么我如何在docker build阶段绑定源，而在服务期间读取环境变量(例如，当在k8s中作为pod运行我们的绑定时(。

Answer 1

目前，我们正在将webpack.EnvironmentPlugin与Docker相结合。

在webpack.config.js中，我们将环境变量替换为一个特殊字符串：

plugins: [
new EnvironmentPlugin({
MY_CUSTOM_ENV_VAR: '{{MY_CUSTOM_ENV_VAR}}',
ANOTHER_ENV_VAR: '{{ANOTHER_ENV_VAR}}',
}),
],

这意味着，在构建期间，如果没有这样的环境变量，则捆绑包将包括字符串'{{MY_CUSTOM_ENV_VAR}}'和'{{MY_CUSTOM_ENV_VAR}}'。

现在，为了替换容器启动上的那些变量，我们为RUN命令添加了一个替代项：

CMD sed -i "s@{{MY_CUSTOM_ENV_VAR}}@${MY_CUSTOM_ENV_VAR}@g" /usr/share/nginx/html/*.bundle*.js 
&& sed -i "s@{{ANOTHER_ENV_VAR}}@${ANOTHER_ENV_VAR}@g" /usr/share/nginx/html/*.bundle*.js 
&& nginx -g "daemon off;"

(它将用捆绑文件上的${MY_CUSTOM_ENV_VAR}值替换字符串{{MY_CUSTOM_ENV_VAR}}：/usr/share/nginx/html/*.bundle*.js(nginx((

Answer 2

我也有同样的问题。。。我只能考虑在容器中使用一个约定来处理这个问题。

所有微前端都可能在中暴露其环境变量/assets/env.template.js(最后是./assets/env.js(，${MY_ENVIRONMENT_VARIABLE}作为占位符。

这个env.template.js将是一个自动执行的javascript函数，它只引入环境变量值作为窗口的全局属性(请参阅下面的示例(。

env.template.js

(function (window) {
window.env = window.env || {};
window['env']['clientId'] = '${CLIENT_ID}';
window['env']['baseUrl'] = '${BASE_URL}'
})(this);

创建docker镜像时，将生成一个最终的资产env.js，它将替换环境变量。例如，使用创建dockernginx映像

CMD ["/bin/sh", "-c", "envsubst < /usr/share/nginx/html/assets/env.template.js > /usr/share/nginx/html/assets/env.js && exec nginx -g 'daemon off;'"]

加载远程设备时，容器可以尝试动态加载资产中暴露的env.js文件。

正常的角度注入环境将从窗口获取值。

Answer 3

在webpack.config中

const webpack = require('webpack');       
require('dotenv').config({ path: './.env' }); 

然后在插件模块部分添加这个

new webpack.DefinePlugin({
"process.env": JSON.stringify(process.env);
}),

这将使机器中的所有环境变量代码化。

这种方式还需要另一个改进，这样你就可以创建像.env.development或.env.production这样的文件

module.exports = (env, args) => {
require("dotenv").config({ path: `./.env.${args.mode}` });

如果只想传递在.env文件中定义的env变量，只需将要求更改为：

const dotenv = require("dotenv").config({ path: ./.env.${args.mode}` }); 

和这个的定义插件：

new webpack.DefinePlugin({ "process.env": JSON.stringify(dotenv.parsed), }),