バージョン管理、デプロイ、オーケストレーション

Module Federationの主な価値は独立デプロイです。あるチームは、hostチームとの調整やhostの再デプロイを発生させることなく、remoteを更新、テスト、デプロイできます。hostは次回remoteのURLからremoteEntry.jsを読み込む際に、変更を自動的に取得します。

デプロイのたびに変わるremoteEntry.jsを固定URLで配信するのではなく、URLにコンテンツハッシュを含めます：remoteEntry.[hash].js。これにより各デプロイが不変になり、古いURLは引き続き機能します。また、hostを新しいデプロイに更新すると、新しいハッシュを持つURLを参照するようになります。不変URLによって、CDNで積極的にキャッシュできるようになります。

hostはURLを介してremoteを検出するため、インフラレベルでA/Bテストを実装できます。異なるユーザーに、異なるバージョンのremoteを指す別々のremoteEntry.js URLを配信する方法です。これにより、アプリケーションコードにフィーチャーフラグのロジックを追加せずに、マイクロフロントエンドで真のカナリアデプロイを実現できます。

Webpack設定にremote URLをハードコードする代わりに、hostが起動時にJSONマニフェストを取得します：GET /federation-manifest.json returns { buttonApp: 'https://cdn.example.com/button/remoteEntry.abc123.js' }。hostが使用するバージョンを更新するには、マニフェストを更新するだけで済み、hostの再ビルドは必要ありません。

remoteのデプロイによってリグレッションが発生した場合、ロールバックは即座に行えます。federation-manifest.jsonを更新して、以前のremoteEntry.js URLを指すようにします。hostは次のリクエストサイクルから、すぐに古いバージョンを使用し始めます。hostの再ビルドもロールバックも、チーム間の調整も必要ありません。

Module Federation 2.0（@module-federation/enhanced パッケージ）では、大幅な改善が加えられています。リモートマニフェストからの型の自動生成による TypeScript サポートの強化、独自の読み込みロジックに対応するランタイムプラグイン API、複雑なバージョン交渉にも対応する共有スコープ管理の強化などです。

vite-plugin-federation パッケージを使うと、Module Federation を Vite ベースのプロジェクトで利用できます。Webpack の ModuleFederationPlugin と同様の設定 API を使用し、Vite のリモートと Webpack のホスト、またはその逆の組み合わせにも対応しています。これにより、Module Federation を手放すことなく、チームは段階的に Vite へ移行できます。

高度に動的なアーキテクチャでは、リモート URL を完全に実行時に設定できます。たとえば、remoteRegistry[featureName] が API 呼び出しによって設定されている場合に import(remoteRegistry[featureName]) とします。これにより、シェルアプリケーションを一度も再ビルドせずに新しいマイクロフロントエンドを追加できる、プラグインのようなアーキテクチャを実現できます。

シェルアプリケーションの主な役割はオーケストレーションです。リモートマニフェストを読み込み、Module Federation のランタイムを初期化し、名前付きルートにリモートモジュールを登録して、現在の URL に応じたリモートを描画します。シェルは意図的に薄く設計されており、何を読み込むかは把握しますが、どのように描画するかは関知しません。

リモートの読み込みにパフォーマンス監視を追加します。リモートの import を try/catch で囲んで読み込み失敗を適切に処理し、リモートが利用できない場合はフォールバック UI を描画します。また、remoteEntry.js とコンポーネントチャンクのダウンロード時間を測定し、リモートの読み込み時間がしきい値を超えた場合は通知します。これは CDN の問題を示している可能性があります。

成熟した Module Federation の CI/CD パイプラインは、次のようになります。リモートチームがコミット → CI がリモートをビルド → 不変の remoteEntry.[hash].js を CDN にアップロード → federation-manifest.json を更新 → ホストが次回のユーザーリクエスト時に新しいリモートを取得します。各ステップが自動化されているため、ホストチームがリモートのデプロイに関与する必要はありません。

Module Federation によって、真に独立したデプロイが可能になります。リモートはホストを再ビルドせずにデプロイでき、ホストは新しいバージョンを自動的に検出します。不変の CDN キャッシュを利用するにはコンテンツハッシュ付きのリモート URL を使用し、柔軟なバージョンルーティングと即時ロールバックには動的マニフェストを使用します。vite-plugin-federation によってこれらの機能を Vite でも利用でき、動的なリモート import によってプラグインのようなアーキテクチャを実現できます。シェルがリモートの読み込みをオーケストレーションすることで、自身は意図的に薄く保たれます。