mcpField
D
datahub-mfe-configure-app

datahub-mfe-configure-app

github.com/datahub-project開発45158 回インストール4 週間前に更新
リポジトリ

datahub-mfe-configure-app について

DataHubにMicro Frontendアプリを登録するためのワークフロースキルです。設定情報の収集、YAMLの作成、ローカルまたは本番環境への適用、連携の確認を案内します。

主な機能

  1. 01MFE設定情報の収集
  2. 02YAML設定項目の生成
  3. 03DockerとPlay serverの設定手順
  4. 04Kubernetes本番環境の案内
  5. 05MFEの読み込みとナビゲーション確認

活用シーン

  1. 01ローカル開発用のMFE登録
  2. 02本番またはKubernetes設定の準備
  3. 03MFE連携確認の問題調査

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/datahub-project/datahub-skills --skill datahub-mfe-configure-app

インストール後、Claude Code で/datahub-mfe-configure-appを入力して読み込まれたか確認します。

同梱ファイルreferences/reference.md

詳細

DataHub で MFE を設定する

Micro Frontend アプリを DataHub のフロントエンドに登録し、/mfe/<path> で読み込まれるようにする手順を説明します。ナビゲーションサイドバーに表示する方法も説明します。ローカル開発、本番環境／k8s へのデプロイ、トラブルシューティングを取り上げます。

ステップ 1：情報を集める

AskQuestion ツールを使って、以下の情報を一度に収集します。

質問ID選択肢
ローカル開発と本番環境／k8s のどちら向けに設定しますか？env_targetLocal development / Production / Kubernetes
MFE アプリ名 — MFE の webpack.config.js 内にある new ModuleFederationPlugin({ name: '...' }) の name フィールドです。完全に一致する必要があります。mf_nametestAppMFE / 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.jsremote_entry_urlhttp://localhost:3002/remoteEntry.js / N/A - I'll fill it in later
ナビゲーションに表示するラベル。例：Team Dashboarddisplay_labelTest Dashboard / N/A - I'll fill it in later
MFE を左側のナビゲーションサイドバーに表示しますか？show_in_navYes / No
ナビゲーションアイコンnav_iconChartBar / Trophy / Gear / HandWaving / Lightning / MagnifyingGlass / Database / Users / Shield / Bell / Flag / Star / Heart / Cube / Table / Code / Globe / Rocket

env_target が Local development の場合は、次に進む前に AskQuestion を使って追加の質問を 1 つ行います。

質問ID選択肢
DataHub をローカルでどのように実行していますか？local_modeDocker / datahub-dev.sh (標準) / Play サーバーを直接実行（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', ... })
//                                   ^^^^^^^^^^^^^^^^^  ← この値

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 サーバーを直接実行（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 サーバーを再起動します。ファイルはディスクから読み込まれるため、再ビルドは不要です。
cd datahub-frontend/run && ./run-local-frontend
本番環境 / Kubernetes

ユーザーに次のように伝えます。

本番環境 / Kubernetes を選択したため、ローカル設定ファイルは編集しません。代わりに、必要な手順を以下に示します。

  1. 本番環境の設定ファイル（別の設定リポジトリにある場合もあります）に追加する、完全な YAML 設定をユーザーに提示します。

  2. 環境変数とボリュームマウントの設定を説明します。k8s ConfigMap のパターン全体については、reference.md を参照してください。

  3. MFE_PUBLIC_PATH についてユーザーに伝えます。

MFE を CDN または静的ホストにデプロイする場合、webpack がチャンク読み込み用の正しい 公開 URL を認識できるよう、MFE の本番ビルド時に MFE_PUBLIC_PATH 環境変数を設定してください。

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 に移動します。DataHub の画面内に MFE が表示されるはずです。

  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>

コメント

Markdown 対応