Vite + Module FederationによるReactマイクロフロントエンド構築と独立デプロイパイプライン

巨大なモノリシックフロントエンドは、開発チームの拡大に伴いビルド時間の増大、コード競合、単一障害点による全体ダウンという課題に直면します。これを解決するため、バックエンドのマイクロサービス概念を導入した**マイクロフロントエンド（Micro-frontends）**が注目されています。

Vite環境においても、Module Federation 2.0および @originjs/plugin-module-federation を使用することで、高速なHMRとESMベースのビルドを維持しながらマイクロフロントエンドを構築できます。

要点

• Module Federationの価値: ビルド時ではなくランタイムにリモートモジュールを動的読み込みするため、Hostアプリの再ビルドなしで各リモートアプリを完全に独立デプロイ可能です。
• シングルトン共有: react や react-dom などの共通ライブラリは shared 設定によりシングルトン化され、重複数信を防ぎます。
• エラー隔離: ErrorBoundary を併用することで、特定リモートの障害がHostアプリ全体へ波及するのを防ぎます。

1. Vite Remote設定の例 (vite.config.ts)

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/plugin-module-federation';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'paymentApp',
      filename: 'remoteEntry.js',
      exposes: {
        './CheckoutForm': './src/components/CheckoutForm.tsx',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
});