datahub-mfe-configure-app

在 DataHub 中配置 MFE

介绍如何向 DataHub 前端注册微前端应用，使其可通过 /mfe/<path> 加载，并可选择在导航侧边栏中显示。涵盖本地开发、生产环境／k8s 部署和故障排查。

步骤 1：收集信息

使用 AskQuestion 工具，通过一次调用收集以下信息。

问题	ID	选项
你要为本地开发还是生产环境／k8s 进行配置？	env_target	Local development / Production / Kubernetes
MFE 应用名称——MFE 的 webpack.config.js 中 new ModuleFederationPlugin({ name: '...' }) 里的 name 字段。必须完全匹配。	mf_name	testAppMFE / N/A - I'll fill it in later
MFE 应可访问的 URL 路径，例如 /dashboard（必须以 / 开头）	mfe_path	/test_page / N/A - I'll fill it in later
remoteEntry.js URL，例如 http://localhost:3002/remoteEntry.js	remote_entry_url	http://localhost:3002/remoteEntry.js / N/A - I'll fill it in later
导航显示标签，例如 Team Dashboard	display_label	Test Dashboard / N/A - I'll fill it in later
是否要在左侧导航栏中显示 MFE？	show_in_nav	Yes / No
导航图标	nav_icon	ChartBar / Trophy / Gear / HandWaving / Lightning / MagnifyingGlass / Database / Users / Shield / Bell / Flag / Star / Heart / Cube / Table / Code / Globe / Rocket

如果 env_target 为 Local development，请先使用 AskQuestion 提出一个后续问题，再继续：

问题	ID	选项
你在本地如何运行 DataHub？	local_mode	Docker / datahub-dev.sh (standard) / Play server directly (sbt / IntelliJ)

对于 N/A - I'll fill it in later 字段（mf_name、mfe_path、 remote_entry_url、display_label），不要从工作区中编造或建议值。用户会自行填写。

查找 MFE 应用名称：打开 MFE 的 webpack.config.js，查找 ModuleFederationPlugin 代码块。name 属性就是此处需要填写的值：

new ModuleFederationPlugin({ name: 'teamDashboardMFE', ... })
//                                   ^^^^^^^^^^^^^^^^^  ← this value

如果 YAML 配置中的名称与此处不完全一致，MFE 将 无法加载。如果你使用了 datahub-mfe-create-app 技能，摘要中会打印此名称，标记为 "Module Federation name"。

步骤 2：生成 YAML 配置条目

根据收集到的值构建配置条目：

- id: __MFE_ID__
  label: __DISPLAY_LABEL__
  path: __MFE_PATH__
  remoteEntry: __REMOTE_ENTRY_URL__
  module: __MF_NAME__/mount
  flags:
    enabled: true
    showInNav: __SHOW_IN_NAV__
  navIcon: __NAV_ICON__

其中，__MFE_ID__ 根据路径得出（去掉前导 /，将 / 替换为 -），例如路径 /dashboard 对应的 ID 为 dashboard。

步骤 3：应用配置

本地开发 — Docker / datahub-dev.sh（标准方式）

Docker 镜像在构建时已将 MFE_CONFIG_FILE_PATH 设置为 /datahub-frontend/conf/mfe.config.dev.yaml（在 docker/datahub-frontend/Dockerfile 中设置）。 对于任何基于 Docker 的工作流，都应编辑此文件。

1. 读取当前的 datahub-frontend/conf/mfe.config.dev.yaml。
2. 在 microFrontends: 下方追加新条目。如果文件为空，请使用：

subNavigationMode: false
microFrontends:
  - id: ...
    ...

1. 重新构建前端容器，将更新后的文件打包进镜像：

scripts/dev/datahub-dev.sh rebuild --wait

本地开发 — 直接运行 Play server（sbt / IntelliJ）

datahub-frontend/run/frontend.env 将 MFE_CONFIG_FILE_PATH 指向 ../conf/mfe.config.local.yaml。请改为编辑此文件。

1. 读取当前的 datahub-frontend/conf/mfe.config.local.yaml。
2. 在 microFrontends: 下方追加新条目。
3. 重启 Play server——无需重新构建，文件会直接从磁盘读取：

cd datahub-frontend/run && ./run-local-frontend

生产环境 / Kubernetes

告诉用户：

由于你选择了生产环境 / Kubernetes，我不会编辑任何本地配置 文件，以下是你需要执行的操作。

1. 向用户展示要添加到生产环境配置文件中的完整 YAML 配置 （该文件可能位于单独的配置仓库中）。

2. 说明环境变量和卷挂载的设置。完整的 k8s ConfigMap 模式请参阅 reference.md。

3. 提醒用户注意 MFE_PUBLIC_PATH：

将 MFE 部署到 CDN 或静态托管服务时，请在 MFE 的生产构建期间设置 MFE_PUBLIC_PATH 环境变量，以便 webpack 知道正确的 分块加载公共 URL。

MFE_PUBLIC_PATH=https://cdn.example.com/my-mfe/ npm run build

步骤 4：验证

引导用户完成以下检查：

1. 独立检查：在浏览器中打开 __REMOTE_ENTRY_URL__——应 返回 JavaScript 内容（而非 404 或 HTML）。

2. 集成检查：访问 http://localhost:9002/mfe__MFE_PATH__ （本地）或对应的生产环境 URL。MFE 应在 DataHub 界面中渲染。

3. 导航检查（如果 showInNav: true）：侧边栏应显示 __DISPLAY_LABEL__ 项及所选图标。点击该项进行导航。

如果任何检查失败，请参阅 reference.md 中的故障排除部分。

步骤 5：摘要

向用户提供摘要。仅展示与其 env_target 相关的配置文件——如果用户选择了生产环境，则不要提及本地配置文件。

如果是本地开发：

MFE registered in DataHub:
  Path:            /mfe__MFE_PATH__
  Remote entry:    __REMOTE_ENTRY_URL__
  Module:          __MF_NAME__/mount
  Nav sidebar:     __SHOW_IN_NAV__ (icon: __NAV_ICON__)
  Config file:     datahub-frontend/conf/mfe.config.dev.yaml    (Docker / datahub-dev.sh)
                   datahub-frontend/conf/mfe.config.local.yaml  (Play server / IntelliJ)

如果是生产环境 / Kubernetes：

MFE registered in DataHub:
  Path:            /mfe__MFE_PATH__
  Remote entry:    __REMOTE_ENTRY_URL__
  Module:          __MF_NAME__/mount
  Nav sidebar:     __SHOW_IN_NAV__ (icon: __NAV_ICON__)
  Config file:     <your production config file>