<p>今回はマイクロフロントエンド入門したのでまとめます。</p>
<h2>🐵 マイクロフロントエンド って?</h2>
<p>マイクロサービスの考えをフロント側にも広げたもの。(語弊あり)
<a href="https://micro-frontends-japanese.org/">こちら</a>で詳しく言及されているが、
フロントエンド側の UI を単独のアプリで管理するのではなくコンポーネント単位、
プロジェクト単位で区切ることでフロントエンド層の肥大化を防ぐ。
新しい feature フラグメント(ページ、コンポーネント)を作る際にそのチームで選定する技術が既存のコードに依存しないものにする。

Header などの共通部分を React で、新たにイベントページを作る際に Vue.js でのような柔軟なフロント層を実現する。</p>
<h3>👉 やり方</h3>
<p>実際のやり方としてはいくつかあります。</p>
<ol>
<li>サーバーサイドで Html を描画する際にコンテナサーバー経由で各フロントサーバーにリクエストを送り合体する</li>
<li>npm ライブラリとしてフラグメントを export+import する</li>
<li>JavaScript 経由でランタイム時に統合する</li>
</ol>
<p>2 に関してはフラグメントの更新が入った時にコンテナ側の更新が必要 -> 静的なものだったら良さそう
3 が柔軟に使えそうで、Webpack を用いて重複ライブラリを多重ロードしないように設定したりできる</p>
<h3>🗒 解説</h3>
<p>container/webpack.config.js ファイルにて</p>
<pre><code>{
  mode: 'development',
  devServer: {
    port: 8080,
    historyApiFallback: {
      index: 'index.html'
    }
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',
      remotes: {
        header: 'header@http://localhost:8081/remoteEntry.js',
      },
      shared: packageJson.dependencies
    }),
  ]
}
</code></pre>
<p>header/webpack.config.js ファイルにて</p>
<pre><code>{
  mode: 'development',
  devServer: {
    port: 8081,  // port変える
    historyApiFallback: {
      index: 'index.html'
    }
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'header',
      filename: 'remoteEntry.js',
      exposes: {
        './Header': './src/bootstrap'
      },
      shared: packageJson.dependencies
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}
</code></pre>
<p>今回 container 側は React にしています。
container から header を読み込むには header 側からマウント用のメソッドを提供してあげる必要があります。</p>
<pre><code>const mount = (el) => {
  ReactDOM.render(&#x3C;App history={history} />, el);
};

if (process.env.NODE_ENV === 'development') {
  const devRoot = document.querySelector('#header-dev-root');

  if (devRoot) {
    mount(devRoot);
  }
}

export { mount };
</code></pre>
<p>これで header 側は独立して開発ができ、container 側にも mount メソッドを提供できます。
container 側ではこんな感じで header を import して使います。</p>
<pre><code>import { mount } from 'header/Header';

export default () => {
  const ref = useRef(null);

  useEffect(() => {
    mount(ref.current);
  });

  return &#x3C;div ref={ref} />;
};
</code></pre>
<h2>📌 終わりに</h2>
<p>少し前に話題になったみたいで気になったので動かしてみました。
Webpack の ModuleFederation を使うと結構シンプルに実装できていい感じです。</p>
