Frontend Academy · レッスン

マイクロフロントエンド：Module Federation

Webpack Module FederationまたはVite Federationを使って大規模なフロントエンドを独立デプロイ可能なリモートに分割し、シェルアプリから利用します。

「マイクロフロントエンド：Module Federation」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

マイクロフロントエンドとは

大規模なフロントエンドを、個別に開発・デプロイできる単位に分割するアーキテクチャです。通常はチームまたはビジネスドメインごとに分割します。各単位で異なるフレームワーク、リポジトリ、デプロイパイプライン、さらには技術スタックも使用できます。シェルアプリが実行時にそれらを結合します。

マイクロフロントエンドを使う理由

10以上のフロントエンドチームを抱える組織では、単一リポジトリのボトルネック、ビルド時間の長さ、リリーススケジュールの衝突といった問題に直面します。マイクロフロントエンドならチームごとに独立してリリースできますが、その代わりにアーキテクチャは複雑になります。

Module Federation — 中核となる技術

Webpack Module Federation（Webpack 5。Viteでもプラグイン経由で利用可能）を使うと、シェルアプリは独立してデプロイされたリモートから実行時にコードをインポートできます。リモートは特定のモジュールを公開し、シェルがそれを利用します。

リモートの設定

リモートアプリはwebpackの設定を通じてモジュールを公開します。

// remote app: webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  output: { publicPath: 'https://product-team.example.com/' },
  plugins: [
    new ModuleFederationPlugin({
      name: 'productApp',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductPage': './src/ProductPage',
        './productClient': './src/api/client'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

シェル（ホスト）の設定

シェルはインポートするリモートを宣言します。

// shell app: webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        product: 'productApp@https://product-team.example.com/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

リモートモジュールのインポート

dynamic importを使用すると、webpackがフェデレーションのランタイムを通じて解決します。

// shell src/App.tsx
import { lazy, Suspense } from 'react';

const ProductPage = lazy(() => import('product/ProductPage'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <ProductPage />
    </Suspense>
  );
}

Vite Federation

Viteは@originjs/vite-plugin-federationプラグインを通じてModule Federationに対応しており、APIもよく似ています。

// vite.config.ts
import federation from '@originjs/vite-plugin-federation';

export default {
  plugins: [federation({
    name: 'shell',
    remotes: { product: 'https://product-team.example.com/remoteEntry.js' },
    shared: ['react', 'react-dom']
  })]
};

共有依存関係

Reactなどのライブラリをsharedに指定すると、二重にバンドルされなくなります。フェデレーションのランタイムが、互換性のあるバージョンのうち最も新しいものを実行時に解決します。

独立したデプロイ

各リモートは独自のビルド・デプロイパイプラインを持ちます。シェルはURLを参照するため、新しいリモートをプッシュすると、すべての利用側に自動的に反映されます。

アプリ間の通信

直接インポートして状態を共有するのではなく、イベント（CustomEvent）、小さな共有バス、またはpostMessageを使用します。独立性を保つため、境界を明確に保ちます。

代替案：iframeとWeb Components

iframe：最も強力な分離を実現しますが、ナビゲーションとCSSの扱いが難しくなります。Web Components：ブラウザのネイティブサポートがあり、特定のフレームワークにロックインされませんが、共有状態には制限があります。Module Federationは分離性と開発者体験のバランスを取ります。

トレードオフ

メリット：独立したデプロイ、技術選択の自由、チームの自律性。コスト：複雑なビルド設定、共有依存関係の競合、デバッグが難しい実行時エラー、バンドルの複雑化。実際に大規模な組織である場合にのみ価値があります。

避けるべきケース

単一チームのプロジェクト、MVP、フロントエンド担当者が100人未満のサイトでは避けてください。複雑性によるコストは現実に発生するため、ほとんどのチームでは代わりにモノレポを使用すべきです。

クイックチェック

Webアプリケーションを構成するマイクロフロントエンドで、Webpack Module Federationは何を可能にしますか？

振り返り：マイクロフロントエンド

独立してデプロイできるよう、フロントエンドをチームまたはドメイン単位に分割します。Module Federation（webpack 5 / Vite plugin）では、シェルが実行時にリモートからインポートします。リモートはモジュールを公開し、シェルはリモートを宣言します。両者でreactなどの依存関係を共有します。アプリ間の通信にはイベントを使用します。複雑な仕組みなので、実際に大規模な組織である場合にのみ採用してください。

よくある質問

「マイクロフロントエンド：Module Federation」レッスンは無料ですか？

はい。「マイクロフロントエンド：Module Federation」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「マイクロフロントエンド：Module Federation」で何を学びますか？

Webpack Module FederationまたはVite Federationを使って大規模なフロントエンドを独立デプロイ可能なリモートに分割し、シェルアプリから利用します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「マイクロフロントエンド：Module Federation」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る