Viteとvite-plugin-federationでマイクロフロントエンドしてみる。

はじめに

Twitterでvite-plugin-federation というパッケージを紹介しているツイートがあったので、どんな感じに使えるかを何回かに分けて見ていきます。今回は外部のコンポーネントを組み込む方法について見ていきます。

プロジェクトの構成とプロジェクトの作成

ShellAppでリモートに定義されたHeaderコンポーネントと、Footerコンポーネントを読み込んで合成します。構成としてはこんな感じになります。

+------------------------------------+
| Shell(ShellApp:5000)               |
| +--------------------------------+ |
| | Header(KernelMfe:5001)         | |
| +--------------------------------+ |
| +--------------------------------+ |
| | Contents                       | |
| +--------------------------------+ |
| +--------------------------------+ |
| | Footer(KernelMfe:5001)         | |
| +--------------------------------+ |
+------------------------------------+

プロジェクトを作ります。

❯ cd src
❯ yarn create vite shell --template react-swc-ts
❯ yarn create vite kernel --template react-swc-ts

すべてのプロジェクトに、vite-plugin-federationパッケージを追加します。

❯ cd src/shell
❯ yarn add @originjs/vite-plugin-federation --dev
❯ cd ../kernel
❯ yarn add @originjs/vite-plugin-federation --dev

ShellAppを5000で、KernelMFEを5001で起動するように設定します。
例えば、ShellAppを5000で提供する場合は次のように設定します。

/src/shell/package.json

{
  // ... 略 ...
  "scripts": {
    "dev": "vite --port 5000 --strictPort",
    "build": "tsc && vite build",
    "preview": "vite preview --port 5000 --strictPort"
  },
  // ... 略 ...
}

Kernel MFEにコンポーネントを作成し公開する。

KernelMFEにHeaderコンポーネントとFooterコンポーネントを追加します。
Footerコンポーネントの実装はほぼ同じなのでここでは省略します。

/src/kernel/src/compoments/Header.tsx

import styles from './Header.module.css'

export default function Header = () => {
    return (
      <div className={styles.header}>
        ヘッダー
      </div>
    );
}

vite.config.tsにモジュールフェデレーションの設定をして、外部にHeaderコンポーネントとFooterコンポーネントを公開します。

/src/kernel/vite.config.ts

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

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "remote_app",
      filename: "remoteEntry.js",
      exposes: {
        './Header': './src/components/Header',
        './Footer': './src/components/Footer'
      },
      shared: ['react','react-dom']
    })
  ],
  build: {
    modulePreload: false,
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  }
})

上記の設定をした後にビルドyarn buildすると/src/kernel/dist/assets以下にremoteEntry.jsが作成され、yarn previewすればhttp://localhost:5001/assets/remoteEntry.jsでリモートコンポーネントが公開されます。

ShellでKernelMFEのコンポーネントを合成して表示する。

ShellAppで、KernelMFEのコンポーネントを参照できるようにvite.configで参照します。

/src/shell/vite.config

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

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'kernelMfe',
      remotes: {
        kernelMfe: 'http://localhost:5001/assets/remoteEntry.js',
      },
      shared: ['react','react-dom']
    })
  ],
  build: {
    modulePreload: false,
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  }
})

App.tsxにKernel MFEのHeaderコンポーネントとFooterコンポーネントを組み込む

/src/shell/src/App.tsx

import './App.css'
import Header from 'kernelMfe/Header';
import Footer from 'kernelMfe/Footer';

export default function App() {
  return (
    <div className="App">
      <Header />
      <div>
        Shell App
      </div>
      <Footer />
    </div>
  )
}

MFEとAppを開発サーバーで起動して動作を確認する。

KernelMFEはyarn build後にyarn previewで開発サーバーを起動します。

KernelMFEを開発サーバーで起動

❯ cd src/kernel
❯ yarn build && yarn preview

App側はyarn dev開発サーバーを起動すると、リモートに定義されたコンポーネントが呼び出されていることを確認できます。

ShellAppを開発サーバーで起動

❯ cd src/Shell
❯ yarn dev

そっけない画面ですが、リモートのコンポーネントが合成されて表示されたのを確認できます。

おわりに

MFEってよくわからなかったんですけれど、雰囲気わかってきました（あやしい、、、）！
次はコンポーネント間の通信を見ていきます。