Nuxt3への移行プロセス とその結果

【3/24＠オンライン開催】エイチーム×レバレジーズ フロントエンド勉強会
https://ateam.connpass.com/event/276968/

での発表資料

# 技術

Nuxt2, Nuxt Bridge, Nuxt3, TypeScript, Vite

Transcript

1. Nuxt3への移行プロセス とその結果 レバレジーズ株式会社 レバテック開発部 LTPtoB開発チーム 古庄 和也 2023/03/24
2. 自己紹介 古庄 和也（25歳） • 経歴： ◦ 2020年4月 レバレジーズ株式会社 新卒入社 • 出身： ◦ 大分県臼杵市 • 業務： ◦ 企業向けレバテックプラットフォームの PdM兼開発全般 • 趣味： ◦ ゴルフ、シーシャ • 2023年の目標： ◦ 沖縄のゴルフコンペで優勝すること
3. 目次 • Nuxt3への移行背景 • 移行のプロセス • 移行結果 • まとめ
4. Nuxt3への移行背景
5. ・開発言語：TypeScript ・フロントエンド：Nuxt2系 ・バックエンド：gRPC, BFF ・アーキテクチャ：DDD, 　マイクロサービスアーキテクチャ ・クラウド： 　AWS(ECS,RDS,ALB/NLB ...etc) 既存システムの技術構成
6. ・TypeScriptへのサポートがデフォルトではない ...😇 追加の設定や手動での型定義が必要かつ型定義が完全でない ・Vue2のみのサポート...😇 Vue2は2023年12月31日にEOLとなり、サポートが終了 ・Node18系で動作しない...😇 LTSのNode18系で動かず、Node16系のEOLは今年の9月 Nuxt2系の課題
7. 2022年11月に待望のNuxt3リリース (公式アナウンス) Nuxt2がVue2のみのサポートのため 2022年中に Vue3サポートがされている Nuxt3へのアップデート もしくは別フレームワークへの移行の必要があった
8. Nuxt3の特徴 主要な変更点 • Vue3のサポート ◦ CompositionAPI , フラグメント, 仮想DOMの最適化(静的ツリー, 静的プロパティ, メモ化...etc) • Viteによるビルドの高速化 ◦ WebPackではなくViteをデフォルトビルドツールに採用 • NitroEngineによるパフォーマンス改善 ◦ SSRとサーバーレスデプロイのパフォーマンスを大幅に向上 (最大75倍の軽量化/高速化) • TypeScriptをデフォルトサポート ◦ TypeScriptの型チェックに対応
9. Nuxt3の特徴 メリット • Vue3のサポート ◦ CompositionAPI, <script setup>構文の利用でコンポーネントのロジックを柔軟かつ再利用しや すい方法で簡潔に構築可能に！ Nuxt2 Nuxt3
10. Nuxt3の特徴 メリット • Vue3のサポート ◦ Vue3のフラグメント機能が利用できるので、余分な DOMを削除できる！ Nuxt2 Nuxt3
11. Nuxt3の特徴 メリット • Viteによるビルド高速化 ◦ モジュールを個別にビルドし、開発サーバーの起動時間を大幅に短縮！ Wepack4 Vite (Is Vite Better than Webpack?より引用)
12. Nuxt3の特徴 デメリット • 移行コスト ◦ プロジェクトの設定やディレクトリ構造に変更が必要 ◦ 一部制限されている機能が存在するため代替手段を見つける必要 • プラグイン互換性 ◦ Nuxt3では内部のアーキテクチャが大幅に変更されているため、 Nuxt2系で使用していたプラグ インやミドルウェアがそのまま動作しない ことがある ◦ 互換性の問題解決のための手間が発生する可能性 • 学習コスト ◦ Vue3やViteに慣れていない開発者にとっては、学習ハードルが高い場合がある
13. Nuxt3への移行プロセス
14. 前提と移行指針 システムの前提： - コンポーネントはフルスクラッチで AtomicDesignを元に設計・実装 - 2022/9末には@nuxt/composition-api利用してCompositionAPI移行済 プロセス大きく2つ： 1. Nuxt-Bridgeへの移行 2. Nuxt3への移行
15. Nuxt Bridge Nuxt2の状態でNuxt3の機能を使える 前方互換性を持つバージョン ・Nuxt3移行時の修正量が減る(はずだった) ・非対応のNuxtModuleが多い 調査した結果 対応システムのnuxtモジュールの互換性が高く、 不確実性が少なかったため、 NuxtBridge移行を決定 (nuxt-2-to-nuxt-bridgeより引用)
16. Nuxt3への移行プロセス ステップ１：Nuxt2系からNuxt Bridgeへの移行(10人日) 移行に必要な作業：基本は公式の手順に準拠 • Nuxt-edgeへの切り替え、Nuxt-Bridgeの導入 • Compistion API のマイグレーション • CJS から ESM へのマイグレーション • 互換性のないモジュールの代替 ◦ @nuxtjs/proxy の代わりに自前でプロキシを用意した実装例→ • nuxi での動作検証 • リグレッションテスト, シナリオテスト
17. Nuxt3への移行プロセス Nuxt2系からNuxt Bridgeに移行した結果 • 良かったこと ◦ フロント↔BFFのレスポンスタイム162%改善...！ ▪ MiddlewareのでNitro Engineの恩恵を教授 • 辛かったこと ◦ 変更箇所多すぎい...！ ◦ コンポーネントほぼ全て修正 ◦ useAsyncDataや useFetch非対応
18. • 移行に必要な作業 ◦ @nuxt/bridge→Nuxt3パッケージへのアップデート ◦ Nuxt.configの変更 ◦ コンポーネントとプラグインの更新 ▪ Vue3に対応するため CompositionAPIや新しいディレクティブ構文に合わせる ◦ ミドルウェアとサーバーミドルウェアの更新 ◦ ストアの移行 ▪ Nuxt3ではVuexではなくPiniaが推奨されている ◦ ビルドとデプロイ設定の更新 ◦ リグレッションテスト, シナリオテスト Nuxt3への移行プロセス ステップ2：Nuxt BridgeからNuxt3系への移行(約30人日)
19. • 辛かった事象(一部抜粋) ◦ useRoute 関数など、利用箇所によって正しい値が取れない ▪ layoutで利用するとundefinedが取得されてしまうなど ◦ viteのproxyサーバーが本番環境で使えると思ったら使えなかった ▪ server.proxyオプションは開発用で、 npm run devでないと利用できない ◦ その他公式ドキュメントの整備が完了してなくて検索してやってみて NGを繰り返す ▪ Nuxt Configuration Reference ▪ https://github.com/nuxt/nuxt/issues/13998 Nuxt3への移行プロセス ステップ2：Nuxt BridgeからNuxt3系への移行(約30人日)
20. Nuxt3移行結果
21. Nuxt3に移行した結果 良かったこと • 移行によるパフォーマンス改善 ◦ サイトのロード時間の短縮 ...！ ◦ バンドルサイズ約40%削減...！ • 新機能・開発効率の向上 ◦ CompositionAPIによるコードの簡潔化 ◦ コンポーネントの静的型付けによる型安全な実装が可能に ◦ 開発サーバーのビルド時間大幅に改善 (PageSpeed Insightsで測定)
22. Nuxt3に移行した結果 これから取り組みたいこと • Viteのライブラリモードを活用したUIライブラリの作成 ◦ 社内UIライブラリから複数システムがコンポーネントを再利用 ◦ (Reactのコンポーネントも出力可能 ...!) • StoryBookの導入 ◦ @storybook/builder-viteを利用して ◦ 上記のライブラリと合わせた UIカタログ作成
23. まとめ
24. Nuxt2からNuxt3移行するメリットは大きい！ ただ、ライブラリの依存度によっては フルリプレイス並の工数が必要...😇 (Nuxt Bridgeの恩恵はあまりなかった)
25. Nuxt3移行の詳細は 弊社テックブログで4月中に公開予定です！
26. Leverages スライドテンプレート 基本カラー 基本フォントサイズ アイコン（欲しいモノがあれば言ってくださいませ！） #333333 #fbfbfb #95100e メインタイトル : 42 サブタイトル : 24 本文 : 16 （あくまで基本なのでご自身でカスタマイズしてもらって大丈夫です :D）
27. スライドタイトル レバレジーズ株式会社　〇〇 〇〇 2018/01/01
28. 目次 • 始めに • 内容１ ◦ 1の内容 • 内容２ ◦ 2の内容1 ◦ 2の内容2 • 内容３ • まとめ • さいごに
29. 伝えたいメッセージ メッセージの説明とか。 解説とかをここでする。
30. 内容１
31. 内容１ 内容１のサブタイトル 内容がここに入ってくる。
32. 見出し 見出し 見出し1 内容1 見出し2 内容2 見出し3 内容3 見出し4 内容4
33. ワークシート ・チーム名 ・チーム目標 ・チームルール　 　　ルールその① 　　ルールその② 　　ルールその③