Webpack Module Federation场景下运行时注入环境变量方案咨询

常规Webpack环境变量注入方案依赖index.html作为入口写入变量，而Module Federation仅对外暴露component.js远程组件文件的场景下，可通过以下两种主流方案实现docker构建阶段打包、serving阶段动态读取环境变量：

方案1：容器启动时占位符替换 #

改造成本最低，运行时无额外开销，适合中小型项目使用。

• 源码中统一约定全局环境变量占位符，开发阶段使用本地默认值兜底：

// 源码全局环境变量读取逻辑
const runtimeEnv = typeof window.__MF_RUNTIME_ENV__ !== 'undefined' 
  ? window.__MF_RUNTIME_ENV__ 
  : {
    // 本地开发默认配置
    API_BASE_URL: 'http://localhost:3000/api',
    APP_NAME: 'mf-demo-app'
  };

• Webpack配置中保留占位符不被编译替换，使用DefinePlugin绑定到全局对象：

// webpack.config.js
const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'window.__MF_RUNTIME_ENV__': 'window.__MF_RUNTIME_ENV__'
    })
  ]
}

• 编写Docker镜像启动脚本（entrypoint.sh），容器启动时用实际注入的环境变量替换component.js中的占位符：

#!/bin/sh
# 提取前缀为MF_的环境变量，转义后生成JSON字符串
ENV_JSON=$(env | grep ^MF_ | jq -c -n 'reduce inputs as $i ({}; .[$i | split("=")[0]] = ($i | split("=")[1:] | join("=")))')
# 替换component.js中的占位符
sed -i "s/window.__MF_RUNTIME_ENV__ = window.__MF_RUNTIME_ENV__/window.__MF_RUNTIME_ENV__ = $ENV_JSON/g" /usr/share/nginx/html/component.js
# 启动静态服务
nginx -g 'daemon off;'

• k8s部署时直接将需要的环境变量通过Pod的env或secret字段注入即可，变量名与脚本提取的前缀保持一致。
  该方案的优势：无需额外网络请求，性能损耗为0，仅需修改少量配置即可实现。

方案2：运行时请求公共配置接口 #

适合多MF组件共享配置、配置变更频率高的大型项目使用。

• 所有MF组件初始化前先请求固定路径的配置接口，获取运行时环境变量后再执行组件逻辑：

// 远程组件入口逻辑
let runtimeEnv = {};
async function initComponent() {
  const res = await fetch('/api/mf-runtime-config');
  runtimeEnv = await res.json();
  // 后续组件初始化、渲染逻辑
}
initComponent();

• 静态服务层（如Nginx）直接根据当前Pod的环境变量返回配置内容，无需额外部署配置服务：

# nginx.conf 配置片段
location /api/mf-runtime-config {
  default_type application/json;
  return 200 '{"API_BASE_URL":"$MF_API_BASE_URL","APP_NAME":"$MF_APP_NAME"}';
}

• 若存在多个MF组件由同一宿主加载的场景，可由宿主统一请求一次配置，通过组件props或Module Federation共享模块传递给所有远程组件，避免重复请求。
  该方案的优势：配置与镜像完全解耦，修改配置无需重新构建镜像，适合多环境多集群部署场景。

注意事项 #

• 前端环境变量完全对用户可见，禁止将密钥、密码等敏感信息放入前端环境变量，敏感信息需通过后端鉴权接口获取。
• 占位符替换方案需注意环境变量中特殊字符的转义，建议使用jq工具处理JSON格式，避免替换语法错误。

内容的提问来源于stack exchange，提问作者baruchiro