1. ホーム
2. web
3. JavaScript Module Federation：マイクロフロントエンドの実践

はじめに

Module FederationはWebpack 5で導入された、マイクロフロントエンドアーキテクチャを構築するための実行時統合メカニズムです。ビルド時の統合アプローチとは異なり、独立してデプロイされたアプリケーションが実行時にコードを共有できるため、チームの自律性と段階的な移行が可能になります。

各アプリケーションはremoteEntry.jsファイルをエントリーポイントとして公開し、ホストアプリケーションが必要なコンポーネントを実行時に動的に取得します。

ModuleFederationPluginの設定

ModuleFederationPluginがコード共有の主要な設定インターフェースです。

const { ModuleFederationPlugin } = require("webpack").container;

new ModuleFederationPlugin({
  name: "shell",
  remotes: {
    catalog: "catalog@https://cdn.example.com/catalog/remoteEntry.js",
  },
  exposes: {
    "./Header": "./src/components/Header",
  },
  shared: {
    react: { singleton: true, requiredVersion: "^18.0.0" },
  },
});

nameはアプリケーションの一意識別子です。exposesは他アプリに公開するモジュール、remotesは利用する外部アプリ、sharedは共有する依存関係を定義します。

remoteEntry.jsのランタイム

ブラウザがホストアプリを読み込む際、フェデレーションモジュールは即座にフェッチされません。ホストのWebpackランタイムが共有スコープを初期化し、リモートモジュールが必要になった時点でremoteEntry.jsを取得します。このスクリプトには利用可能なモジュールとそのチャンク位置のマニフェストが含まれています。

ランタイムは__webpack_init_sharing__で共有スコープを初期化し、__webpack_share_scopes__でフェデレーション境界を越えた共有モジュールの解決を管理します。

共有依存関係戦略

共有依存関係の管理はModule Federationにおいて最も重要な側面です。shared設定は以下のモードをサポートします：

Reactアプリケーションではシングルトンモードが必須です。singleton: trueとrequiredVersion: '^18.0.0'を組み合わせることで、全フェデレーションモジュールが互換性のあるReactインスタンスを使用することを保証します。

エラーハンドリングとフォールバック

リモートモジュールはネットワーク障害やデプロイエラーにより失敗する可能性があります。堅牢なアーキテクチャではこれらの障害を適切に処理します。

const FederatedButton = React.lazy(() =>
  import("catalog/Button").catch(() => import("./fallback/Button"))
);

function App() {
  return (
    <ErrorBoundary fallback={<FallbackUI />}>
      <Suspense fallback={<Skeleton />}>
        <FederatedButton />
      </Suspense>
    </ErrorBoundary>
  );
}

Suspenseによるローディング状態、エラーバウンダリによるレンダリング障害の捕捉、ローカルフォールバックモジュールの組み合わせにより、リモート障害がアプリ全体をダウンさせることを防ぎます。

デプロイパターン

Module Federationは柔軟なデプロイを可能にします。同一デプロイでは独立ビルドした各モジュールをまとめてデプロイ、別個デプロイではチームごとに独立してデプロイしリモートは実URLを参照、バージョンデプロイではタグ付きバージョンで安定参照を行います。

CI/CDパイプラインは各マイクロフロントエンドを独立してビルドし、remoteEntry.jsとチャンクをCDNに公開します。デプロイごとに一意のチャンクハッシュを生成し、キャッシュの無効化を確実に行うことが重要です。

まとめ

Module Federationは実績のあるマイクロフロントエンドアーキテクチャを提供します。シンプルな構成から始め、早期に共有依存関係管理に投資し、堅牢なエラーハンドリングを実装してください。webpack-bundle-analyzerでバンドルサイズを監視し、ブラウザDevToolsでランタイム解決をトレースすることを推奨します。