ホストとリモートのReactアプリを設定する

remoteアプリケーションでは、webpackの設定にModuleFederationPluginを追加し、3つの主要なプロパティを指定します。name（一意の識別子。例："buttonApp"）、filename（"remoteEntry.js"。マニフェストの出力先）、exposes（公開名からソースファイルパスへのマップ）です。

exposesの設定では、公開するモジュールパスをローカルファイルにマッピングします：{ './Button': './src/Button' }。これにより、hostは'buttonApp/Button'をimportして、./src/Button.tsxにあるコンポーネントを受け取れます。複数のコンポーネントやユーティリティ、さらにはページ全体を公開することもできます。

sharedプロパティは、重複して読み込むのではなく、hostとremoteの間で共有するモジュールをModule Federationに伝えます。Reactの場合は、shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } }と設定します。singleton:trueにより、複数のインスタンスが同時に読み込まれるのを防ぎます。

hostアプリケーションのModuleFederationPlugin設定には、remotesプロパティを含めます：{ buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' }。キーはimport名前空間、値はremoteの名前とURLを@で結合したものです。これにより、Webpackに実行時のremoteの取得先を伝えます。

hostのReactコードでは、動的importを使ってremoteコンポーネントを読み込みます：const Button = React.lazy(() => import('buttonApp/Button'))。importパスはremoteの名前空間と公開されたモジュール名に対応しています。React.lazyによって、importはコード分割され、非同期で読み込まれます。

remoteモジュールは非同期で読み込まれるため、遅延読み込みするremoteコンポーネントは必ずSuspense境界でラップします：Suspense fallback=Loading... /。Module Federationがremote URLからremoteEntry.jsとコンポーネントのチャンクを取得している間、fallbackが表示されます。

Reactのフック（useState、useContext、useEffect）は、コンポーネントの状態を追跡するために、単一の内部Reactインスタンスに依存します。hostとremoteがそれぞれ独自のReactのコピーを読み込むと、フックは"invalid hook call"エラーをスローします。singleton:trueを指定すると、両者が1つのReactインスタンスを共有するため、この種類のバグを完全に解消できます。

hostがreact@18.2.0を使用し、remoteがreact@18.3.0を使用している場合、Module Federationの共有スコープが使用するバージョンを調整します。singleton:trueとrequiredVersionを指定すると、通常は互換性がある場合に高いバージョンが使用されます。固定バージョンの代わりにrequiredVersion: '>=18.0.0'を設定すると、柔軟なバージョン範囲を指定できます。

TypeScriptはコンパイル時にはremoteモジュールを認識できないため、import('buttonApp/Button')のようなimportは、宣言がないと型エラーになります。@module-federation/typescriptを使用するか、モジュールの型を宣言する.d.tsファイルを手動で作成して、remoteコンポーネントのpropsに対する型安全性を確保します。

両方のアプリケーションを同時に実行します。remoteはポート3001、hostはポート3000で起動します。hostを開くと、Module Federationランタイムがhttp://localhost:3001/remoteEntry.jsを取得し、Buttonモジュールを見つけ、そのチャンクをダウンロードして、ローカルコンポーネントであるかのようにhostアプリ内でレンダリングします。

本番環境では、localhost:3001をデプロイ済みremoteのURLに置き換えます。一般的な方法は、remote URLに環境変数を使用し、CI/CDから環境ごとに正しいURLを注入できるようにすることです：buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'。

Module Federationの共有設定で、Reactをシングルトンとして構成する必要があるのはなぜですか？

Module Federationを設定するには、remote側（name、filename、exposesを指定）とhost側（remotesを指定）の両方にModuleFederationPluginが必要です。remoteコンポーネントは、React.lazyと動的importを組み合わせ、Suspenseでラップして利用します。ReactとReact DOMは、複数インスタンスによるフックエラーを防ぐため、共有シングルトンにする必要があります。TypeScriptの宣言と環境変数によるremote URLの設定を加えることで、本番環境に対応した構成が完成します。