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

Question

与Webpack捆绑后注入环境变量的问题已经被询问和回答。

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

但是当使用Webpack Module Federation时，我们只公开了一个component.js文件，所以我如何在docker build阶段捆绑源代码，但在服务阶段读取环境变量（当我们的包作为 k8s 中的 pod 运行时，例如）。

Answer 1

我正在努力解决同样的问题......而且我只能想到在容器中使用约定来处理这个问题。

所有微前端都可能在./assets/env.template.js（最后是./assets/env.js）中公开它们的环境变量，并使用 ${MY_ENVIRONMENT_VARIABLE} 作为占位符。

这个 env.template.js 将是一个自动执行的 javascript function 它将只引入环境变量值作为 window 的全局属性（参见下面的示例）。

env.template.js

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

创建 docker 图像时，将生成最终资产 env.js，它将替换环境变量。 例如，使用以下命令创建 docker nginx 映像：

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 文件。

正常的 angular 注入环境将从 window.env 中获取值。

Answer 2

在 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 文件中定义的环境变量，只需将要求更改为：

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

以及对此的definePlugin：

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

Answer 3

目前，我们正在将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/ /usr/share/nginx/html/*.bundle*.js /nginx/html/*.bundle*.js (nginx)）