Nuxt 2から3へマイグレーションする方法考えてたら、マイクロフロントエンドのフレームワークができた話

by hacomono Inc.

Slide 1

Slide 1 text

Nuxt2 から 3 へマイグレーションする方法考えてたらマイクロフロントエンドのフレームワークができた話

Slide 2

Slide 2 text

自己紹介みゅーとん趣味 .. VR, エレクトーン, アバターでの活動アバターワーク推進してます vue-fes 2022 でもアバターで出てました採用面談で " アバターで来て" と依頼が・・ "VRChat フロントエンドエンジニア集会" 毎月開催してます • • • ⚬ ⚬ • X(twitter) .. @_mew_ton github .. mew_ton avatar .. © まめひなた/ もち山金魚

Slide 3

Slide 3 text

自己紹介 ( 中の人) 所属: 株式会社hacomono Platform Group / Enabling Team Frontend Tech Lead いろんなプロジェクト・チームを横断で面倒みます基盤のメンテもしてます今年になって、はじめて OSS 公開しました • ⚬ ⚬ ⚬ ⚬ • X(twitter) .. @_mew_ton github .. mew_ton avatar .. © まめひなた/ もち山金魚

Slide 4

Slide 4 text

注意 ※ 以下については説明を省略します所属 (hacomono) についてブースがあるので見てねマイクロフロントエンド is 何？マイクロサービス, モジュラーモノリスドメインの境界 Nuxt Bridge を導入できない理由直接聞きに来てください • ⚬ • ⚬ ⚬ • ⚬

Slide 5

Slide 5 text

あらすじ

Slide 6

Slide 6 text

はじまり ※ 実際の出来事とは異なります。説明のために歴史の歪曲や誇張があります。

Slide 7

Slide 7 text

はじまり弊社のフロントエンドのプロジェクトは合計４つある

Slide 8

Slide 8 text

はじまり管理サイトとメンバーサイトがある今回は管理サイトのお話

Slide 9

Slide 9 text

はじまり管理者向けアプリ ( 以後: 管理サイト) は多くのドメインを集約していった結果・・・ Components .. 700 vue files, 100000 lines Pages .. 600 paths, 50000 lines Vuex Store .. 200 files, 700 stores → クソデカモノリスフロントエンド

Slide 10

Slide 10 text

はじまり mixin 依存などのアンチパターンも多く踏んでいる Nuxt Bridge を導入できない仕組みにもなっている導入推進できる人員が私 1 人しかいない私自身も横断でプロジェクトを面倒みるのでほぼ無理 → 半ば諦めてた

Slide 11

Slide 11 text

はじまりデザイナーチームからページ階層構造を含む大きめのリデザインが提案される → どうせ作り直すなら、リアーキテクチャを同時に走らせてくれ

Slide 12

Slide 12 text

要件 Nuxt2 → Nuxt3 移行を逐次的に行う Nuxt Bridge を導入できない Nuxt2 側も継続してメンテを続けるフロントエンドの基盤まわりに手を入れられる人がほぼいない複雑なことを任せない ※ 走り切るための施策など様々ありますが、今回はスコープ外なので割愛 • • • • •

Slide 13

Slide 13 text

Nuxt2 → Nuxt3

Slide 14

Slide 14 text

管理サイトのレイアウト

Slide 15

Slide 15 text

解決のアプローチ (1) Nuxt3 で同じレイアウトを作る

Slide 16

Slide 16 text

解決のアプローチ (2) iframe だけのページを作る

Slide 17

Slide 17 text

解決のアプローチ (3) 旧サイトのヘッダーとサイドバーを非表示にして、 iframe からこれを見に行く

Slide 18

Slide 18 text

解決のアプローチ (4) Nuxt3 側に新しいページを実装していく Nuxt2 側でアクセスしなくなったページへの遷移を Nuxt3 の新しいページへのリダイレクトに変更 • •

Slide 19

Slide 19 text

おわり …?

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Q&A そもそも iframe 使いたくない目を背けるな NuxtBridge が使えないなら、残りの選択肢は作り直し iframe 諦めるの３択だぞ・・！ • • •

Slide 22

Slide 22 text

Q&A Cookie どうするの nuxt.config.ts で app.baseURL を /v2 などの適当な値にする /v2 へのアクセスが新しい方にルーティングするように nginx 等で組めば良いパフォーマンスに影響でない？ 1 ページに 1 個 iframe を置くので、問題ない問題あるなら、それは旧サイト側が重いページ遷移アニメーションは？そもそもしないんで・・

Slide 23

Slide 23 text

Q&A iframe 内側でページが変わった時、ブラウザのアドレスバーが更新されない・・・・・ iframe 内側から、外側のページ遷移を呼び出すには？・・・・・・・モーダルやドロワーの位置ずれない？・・・・・・・・・・・・・・旧サイトを同期的にいじりたくない・・・・・・・・・・・・・・・・・・

Slide 24

Slide 24 text

追加要件 1 iframe で SPA を開きつつ、1 つの SPA として見せかけるような仕組みにするページ遷移を iframe 間で同期 e.g. 外が #/bridge/user/3 にアクセスしたら、 iframe 内は #/user/3 iframe 内の modal などの位置調整の仕組み旧サイトの修正を頻繁にしない Nuxt3 側に新ページができたときのルーティング先変更を Nuxt2 側に実装しない ( 複雑になってきた・・) • ⚬ • •

Slide 25

Slide 25 text

解決のアプローチ v2 可能な限りシンプルに解決する iframe の親と子間で Post Message を用いて必要な情報伝達をする

Slide 26

Slide 26 text

事前準備 1 iframe 用ページを可変長のパスにする

Slide 27

Slide 27 text

事前準備 2 pageMeta の key に固定の文字列を設定 /bridge/[…paths] の paths が変わっても再描画されなくする

Slide 28

Slide 28 text

ルーティング更新のイメージ 1 /bridge に続くパスと同じパスへアクセスする

Slide 29

Slide 29 text

ルーティング更新のイメージ 2 Nuxt3 側にページを作ったら、存在するパスへリダイレクトする親側がルーティングを制御するため子側は修正不要

Slide 30

Slide 30 text

ルーティングの同期 (1) ルート変更を検知子に変更情報を伝える ↓ ↓ 受け取ったパスへそのまま遷移する

Slide 31

Slide 31 text

ルーティングの同期 (2) 受け取ったパスから遷移すべきパスを算出し遷移する ↑ ↑ ルート変更を検知親へ変更情報を伝える

Slide 32

Slide 32 text

モーダル等の位置調整 iframe の位置やスタイルで調整すれば、目的の場所に表示させることはできるずらすべき値は親側のみが知っている

Slide 33

Slide 33 text

モーダルの位置調整 DOM の変化トリガーで子に位置情報をおくる ↓ ↓ Vue の Reactive に落とし込む

Slide 34

Slide 34 text

💡

Slide 35

Slide 35 text

気づきメインの仕組みは Vue/Nuxt ではなく、 Post Message である要件の Nuxt3, Nuxt2 に限定する必要性がそもそもない限定しなければ、マイクロフロントエンド化ができる

Slide 36

Slide 36 text

新構成のアイデア

Slide 37

Slide 37 text

マイクロフロントエンド右の本で紹介されている垂直分割アーキテクチャの手法に同じページパスがマイクロフロントエンドを分割するマイクロフロントエンドの分割単位はドメイン毎であるべきだが管理サイトはページパスごとにゆるく別れてるのでOK

Slide 38

Slide 38 text

追加要件 2 クソデカモノリスフロントエンドはもうやめたい Nuxt3 でまた 700 Component, 600 Pages 作るの？もう嫌だよ API のモジュラーモノリス化が並行して動いていたので丁度よい

Slide 39

Slide 39 text

解決のアプローチ v3 マイクロフロントエンドにしてしまう post message 部分を共通化し、 Vue に依存する部分を切り分けて実装できるように作り直す

Slide 40

Slide 40 text

ロジックの分割コアロジックを汎用化できる, vue プラグインはそのラッパーでしかない

Slide 41

Slide 41 text

💡

Slide 42

Slide 42 text

OSS 化

Slide 43

Slide 43 text

@passerelle

Slide 44

Slide 44 text

@passerelle 命名: Chat-GPT 3 passerelle .. 人道橋, 橋渡し ( フランス語) 親側 .. enclosure 子側 .. insider • • • •

Slide 45

Slide 45 text

ライブラリ化

Slide 46

Slide 46 text

@passerelle フレームワーク iframe を使う垂直分割アーキテクチャでのマイクロフロントエンドフレームワークコアロジックは post message 部分のみフロントエンドフレームワークのプラグインとして導入現在 vue 2.7, 3 (vue-router 3.6, 4) のみサポート鋭意制作中 ! vue -2.6 / nuxt 2 / nuxt 3 サポート開発中ドキュメント作成中 GitHub: https://github.com/hacomono-lib/passerelle https://github.com/hacomono-lib/passerelle-vue ※ 重要: 年収アップに直結してるので、ぜひスターください • • • • • ⚬ ⚬

Slide 47

Slide 47 text

Pros / Cons Pros 他の重厚な MFE フレームワークに比べて、実装がシンプル Router とのつなぎ込み部分だけでほぼ構成されるフレームワークの選定自由度が上がる Cons iframe を利用するためデザイン周りがつらくなる Modal / Drawer などの positon absolute や z-index が絡むスタイル調整が特に面倒になる私がしんどい (react とか技術的にできそうだけど、やるのかな) • • • • • •

Slide 48

Slide 48 text

まとめ Nuxt2 → Nuxt3 に逐次的にアップデートしていく方法を考えた iframe を使ってちまちま作ってたら、マイクロフロントエンド化のアイデアができたせっかくなので OSS 化 • • •

Slide 49

Slide 49 text

おわり

Slide 50

Slide 50 text

おまけ ※ 本題からズレます

Slide 51

Slide 51 text

マイクロフロントエンド化の別解

Slide 52

Slide 52 text

Nuxt3 のみで作るマイクロフロントエンドアーキテクチャ

Slide 53

Slide 53 text

マイクロフロントエンド化する範囲赤枠で iframe を使わないアイデア

Slide 54

Slide 54 text

Nuxt3 だけで作る MFE: 手順1 pages 配下が競合しないように複数のプロジェクトを作る結合用の Nuxt3 プロジェクトを 1 個作る • •

Slide 55

Slide 55 text

Nuxt3 だけで作る MFE: 手順2 結合用 Nuxt3 プロジェクトの Nuxt Config で extends を設定する結合用 Nuxt3 プロジェクトを Build する複数のプロジェクトが結合されてビルドされる！！！！ • • •

Slide 56

Slide 56 text

完成!

Slide 57

Slide 57 text

Pros / Cons Pros 最もシンプルモノレポにすると便利 Cons Nuxt3 以外の選択肢が失われる１から作るケースには向かなさそう ( 根拠なし) Component や Page のパスなどが名前衝突で上書きされるビルドタイム結合なのでデプロイタイミングが制限される → モジュラーモノリスフロントエンド・・としてはアリ・・？ • • • • • •

Slide 58

Slide 58 text

おわり