マイクロフロントエンドアーキテクチャ実践ガイド：Module Federation、Single-SPA、Web Components比較

// host-app/webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')

module.exports = {
  mode: 'production',
  output: {
    publicPath: 'https://host.example.com/',
    uniqueName: 'host_app',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        // リモートマイクロフロントエンド宣言
        productApp: 'product@https://product.example.com/remoteEntry.js',
        cartApp: 'cart@https://cart.example.com/remoteEntry.js',
        userApp: 'user@https://user.example.com/remoteEntry.js',
      },
      shared: {
        react: {
          singleton: true, // 単一インスタンスのみ許可
          requiredVersion: '^18.0.0',
          eager: true, // 即時ロード（ホストのみ）
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '^18.0.0',
          eager: true,
        },
        'react-router-dom': {
          singleton: true,
          requiredVersion: '^6.0.0',
        },
      },
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
}

// product-app/webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')

module.exports = {
  mode: 'production',
  output: {
    publicPath: 'https://product.example.com/',
    uniqueName: 'product_app',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'product',
      filename: 'remoteEntry.js',
      exposes: {
        // 外部に公開するモジュール
        './ProductList': './src/components/ProductList',
        './ProductDetail': './src/components/ProductDetail',
        './ProductSearch': './src/components/ProductSearch',
      },
      shared: {
        react: {
          singleton: true,
          requiredVersion: '^18.0.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '^18.0.0',
        },
        'react-router-dom': {
          singleton: true,
          requiredVersion: '^6.0.0',
        },
      },
    }),
  ],
}

// host-app/src/App.jsx
import React, { Suspense, lazy } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import ErrorBoundary from './components/ErrorBoundary'
import Navigation from './components/Navigation'
import LoadingSpinner from './components/LoadingSpinner'

// リモートコンポーネントをlazy loading
const ProductList = lazy(() => import('productApp/ProductList'))
const ProductDetail = lazy(() => import('productApp/ProductDetail'))
const Cart = lazy(() => import('cartApp/Cart'))
const UserProfile = lazy(() => import('userApp/UserProfile'))

// 障害分離のためのラッパーコンポーネント
function MicroFrontendWrapper({ children, fallback }) {
  return (
    <ErrorBoundary fallback={fallback || <div>このセクションを読み込めませんでした。</div>}>
      <Suspense fallback={<LoadingSpinner />}>{children}</Suspense>
    </ErrorBoundary>
  )
}

export default function App() {
  return (
    <BrowserRouter>
      <Navigation />
      <main>
        <Routes>
          <Route
            path="/products"
            element={
              <MicroFrontendWrapper>
                <ProductList />
              </MicroFrontendWrapper>
            }
          />
          <Route
            path="/products/:id"
            element={
              <MicroFrontendWrapper>
                <ProductDetail />
              </MicroFrontendWrapper>
            }
          />
          <Route
            path="/cart"
            element={
              <MicroFrontendWrapper>
                <Cart />
              </MicroFrontendWrapper>
            }
          />
          <Route
            path="/profile"
            element={
              <MicroFrontendWrapper>
                <UserProfile />
              </MicroFrontendWrapper>
            }
          />
        </Routes>
      </main>
    </BrowserRouter>
  )
}