Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Avatar for hacomono Inc.

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 のパスなどが 名前衝突で上書きされる ビルドタイム結合なので デプロイタイミングが制限される  → モジュラーモノリスフロントエンド・・としてはアリ・・? • • • • • •