Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

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

プロジェクトは Nuxt2 で、ページ数やコンポーネントの数、コードの絡み具合から、どうしても Nuxt Bridge を使ってのマイグレーションは困難と判断せざるを得なかった。 そこで、元の資産に手を加えずに、ページ単位で Nuxt3 にどうやって移行していくかを考えていくことにした。 試行錯誤の末、マイクロフロントエンドのフレームワークが生まれてしまったのでした。

株式会社hacomono
フロントエンドテックリード 基盤グループ Enabling チーム
VRChat フロントエンドエンジニア集会主催
みゅーとん / mew-ton

hacomono Inc.

October 31, 2023
Tweet

More Decks by hacomono Inc.

Other Decks in Technology

Transcript

  1. 自己紹介 みゅーとん 趣味 .. VR, エレクトーン, アバターでの活動  アバターワーク推進してます vue-fes

    2022 でもアバターで出てました 採用面談で " アバターで来て" と依頼が・・ "VRChat フロントエンドエンジニア集会" 毎月開催してます • • • ⚬ ⚬ • X(twitter) .. @_mew_ton github .. mew_ton avatar .. © まめひなた/ もち山金魚
  2. 自己紹介 ( 中の人) 所属: 株式会社hacomono Platform Group / Enabling Team

    Frontend Tech Lead いろんなプロジェクト・チームを横断で面倒みます 基盤のメンテもしてます  今年になって、はじめて OSS 公開しました  • ⚬ ⚬ ⚬ ⚬ • X(twitter) .. @_mew_ton github .. mew_ton avatar .. © まめひなた/ もち山金魚
  3. 注意 ※ 以下については説明を省略します  所属 (hacomono) について ブースがあるので見てね  マイクロフロントエンド

    is 何? マイクロサービス, モジュラーモノリス ドメインの境界  Nuxt Bridge を導入できない理由 直接聞きに来てください • ⚬ • ⚬ ⚬ • ⚬
  4. はじまり 管理者向けアプリ ( 以後: 管理サイト) は 多くのドメインを集約していった結果 ・・・  Components

    .. 700 vue files, 100000 lines Pages .. 600 paths, 50000 lines Vuex Store .. 200 files, 700 stores  → クソデカモノリスフロントエンド 
  5. 要件 Nuxt2 → Nuxt3 移行を逐次的に行う Nuxt Bridge を導入できない Nuxt2 側も継続してメンテを続ける

    フロントエンドの基盤まわりに手を入れられる人がほぼいない 複雑なことを任せない    ※ 走り切るための施策など様々ありますが、今回はスコープ外なので割愛 • • • • •
  6. Q&A  Cookie どうするの nuxt.config.ts で app.baseURL を /v2 などの適当な値にする

    /v2 へのアクセスが新しい方にルーティングするように nginx 等で組めば良い  パフォーマンスに影響でない? 1 ページに 1 個 iframe を置くので、問題ない 問題あるなら、それは旧サイト側が重い  ページ遷移アニメーションは? そもそもしないんで・・
  7. Q&A  iframe 内側でページが変わった時、ブラウザのアドレスバーが更新されない ・・・・・  iframe 内側から、外側のページ遷移を呼び出すには? ・・・・・・・ 

    モーダルやドロワーの位置ずれない? ・・・・・・・・・・・・・・  旧サイトを同期的にいじりたくない ・・・・・・・・・・・・・・・・・・
  8. 追加要件 1 iframe で SPA を開きつつ、1 つの SPA として見せかけるような仕組みにする ページ遷移を

    iframe 間で同期 e.g. 外が #/bridge/user/3 にアクセスしたら、 iframe 内は #/user/3 iframe 内の modal などの位置調整の仕組み  旧サイトの修正を頻繁にしない Nuxt3 側に新ページができたときのルーティング先変更を Nuxt2 側に実装しない   ( 複雑になってきた・・) • ⚬ • •
  9. 気づき メインの仕組みは Vue/Nuxt ではなく、 Post Message である  要件の Nuxt3,

    Nuxt2 に限定する必要性がそもそもない  限定しなければ、マイクロフロントエンド化ができる
  10. @passerelle  命名: Chat-GPT 3 passerelle .. 人道橋, 橋渡し (

    フランス語)  親側 .. enclosure 子側 .. insider  • • • •
  11. @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 ※ 重要: 年収アップに直結してるので、ぜひスターください • • • • • ⚬ ⚬
  12. Pros / Cons Pros  他の重厚な MFE フレームワークに比べて、実装がシンプル Router とのつなぎ込み部分だけでほぼ構成される

    フレームワークの選定自由度が上がる  Cons  iframe を利用するため デザイン周りがつらくなる Modal / Drawer などの positon absolute や z-index が絡むスタイル調整が特に面倒になる 私がしんどい (react とか技術的にできそうだけど、やるのかな) • • • • • •
  13. Nuxt3 だけで作る MFE: 手順2 結合用 Nuxt3 プロジェクトの Nuxt Config で

    extends を設定する 結合用 Nuxt3 プロジェクトを Build する 複数のプロジェクトが結合されてビルドされる!!!! • • •
  14. Pros / Cons Pros  最もシンプル モノレポにすると便利  Cons 

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