Micro Frontends フレームワーク single-spa を試してみる。

こんにちは k-jun です。今日は Micro Frontends という謎の言葉を関したフレームワーク single-spa を試してみます。

https://github.com/single-spa/single-spa

Micro Frontends という言葉自体初耳でした...。こんなものがあるんですね。

https://single-spa.js.org/docs/microfrontends-concept

Micro Service のように大きいアプリケーションから機能的に分割した箇所を、サービスとして別で切り出すように、 フロントエンドの特定の UI 領域も別アプリケーションとして切り出すアーキテクチャのようです。

create-single-spa というコマンドでテンプレートを生成できるようなのでやってみます。

Install

$ npm install -D create-single-spa

Example

create-single-spa を使ってテンプレートを生成できるようなのでやってみたが、どうもピンとこない、、 tutorial で更新言われている箇所が対象ファイル内に存在しない。

具体的には。

$ npx create-single-spa --moduleType root-config
? Directory for new project ./playground-single-spa
? Which package manager do you want to use? npm
? Will this project use Typescript? No
? Would you like to use single-spa Layout Engine Yes
? Organization name (can use letters, numbers, dash or underscore) emanon[f:id:K-jun1221:20210828235318p:plain]

で、ディレクトリを生成し、

$ cd playground-single-spa
$ npm start

> start
> webpack serve --port 9000 --env isLocal

で、root-config 内部の application 登録を変更しろとか、... の XXX の箇所を更新しろなど言われているが、どうも存在しない。

よくわからなくなってきたので、sample を clone してくる 笑。

https://github.com/react-microfrontends

疑問だった箇所を確認してみると、知らん Tag が入っている。

...
    <single-spa-router>
      <nav class="topnav">
        <application name="@react-mf/navbar" loader="topNav" error="topNav"></application>
      </nav>
      <div class="main-content mt-16">
        <route path="people">
          <application name="@react-mf/people"></application>
        </route>
        <route path="planets">
          <application name="@react-mf/planets"></application>
        </route>
        <redirect from="/earth" to="/planets"></redirect>
        <route default>
          <h1 class="flex flex-row justify-center p-16">
            <p class="max-w-md">This example project shows independently built and deployed microfrontends that use React and single-spa. Each nav link above takes you to a different microfrontend.</p>
          </h1>
        </route>
      </div>
    </single-spa-router>
...

まあサンプルが動けば何でもいいや。ということで root-config と planets を落としてきて npm start してみた。

http://localhost:9000 にアクセスしてみると、以下のような画面に。People など clone してきていない、プロジェクトまで動作している。

root-config の内部にこんなコードは無いので、どうやっているのだろうと色々見ていると 別で起動していた planets の方のページに答えがあった。

書いてある内容に従って、config を開いてみてびっくり。default は Internet を経由して全く別のところの 画面を表示している様子。 これが Micro Frontends...。

更新することで、向き先がローカルになりました。これはおもしろそうです。フロントエンドも知らないうちに色々と進化しているんですね...。 それでは今回はこのへんで。