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

by Tech Leverages

Slide 1

Slide 1 text

Nuxt3への移行プロセスとその結果レバレジーズ株式会社レバテック開発部 LTPtoB開発チーム古庄和也 2023/03/24

Slide 2

Slide 2 text

自己紹介古庄和也（25歳） ● 経歴： ○ 2020年4月レバレジーズ株式会社新卒入社 ● 出身： ○ 大分県臼杵市 ● 業務： ○ 企業向けレバテックプラットフォームの PdM兼開発全般 ● 趣味： ○ ゴルフ、シーシャ ● 2023年の目標： ○ 沖縄のゴルフコンペで優勝すること

Slide 3

Slide 3 text

目次 ● Nuxt3への移行背景 ● 移行のプロセス ● 移行結果 ● まとめ

Slide 4

Slide 4 text

Nuxt3への移行背景

Slide 5

Slide 5 text

・開発言語：TypeScript ・フロントエンド：Nuxt2系・バックエンド：gRPC, BFF ・アーキテクチャ：DDD, 　マイクロサービスアーキテクチャ・クラウド：　AWS(ECS,RDS,ALB/NLB ...etc) 既存システムの技術構成

Slide 6

Slide 6 text

・TypeScriptへのサポートがデフォルトではない ...😇 追加の設定や手動での型定義が必要かつ型定義が完全でない・Vue2のみのサポート...😇 Vue2は2023年12月31日にEOLとなり、サポートが終了・Node18系で動作しない...😇 LTSのNode18系で動かず、Node16系のEOLは今年の9月 Nuxt2系の課題

Slide 7

Slide 7 text

2022年11月に待望のNuxt3リリース (公式アナウンス) Nuxt2がVue2のみのサポートのため 2022年中に Vue3サポートがされている Nuxt3へのアップデートもしくは別フレームワークへの移行の必要があった

Slide 8

Slide 8 text

Nuxt3の特徴主要な変更点 ● Vue3のサポート ○ CompositionAPI , フラグメント, 仮想DOMの最適化(静的ツリー, 静的プロパティ, メモ化...etc) ● Viteによるビルドの高速化 ○ WebPackではなくViteをデフォルトビルドツールに採用 ● NitroEngineによるパフォーマンス改善 ○ SSRとサーバーレスデプロイのパフォーマンスを大幅に向上 (最大75倍の軽量化/高速化) ● TypeScriptをデフォルトサポート ○ TypeScriptの型チェックに対応

Slide 9

Slide 9 text

Nuxt3の特徴メリット ● Vue3のサポート ○ CompositionAPI, 構文の利用でコンポーネントのロジックを柔軟かつ再利用しやすい方法で簡潔に構築可能に！ Nuxt2 Nuxt3

Slide 10

Slide 10 text

Nuxt3の特徴メリット ● Vue3のサポート ○ Vue3のフラグメント機能が利用できるので、余分な DOMを削除できる！ Nuxt2 Nuxt3

Slide 11

Slide 11 text

Nuxt3の特徴メリット ● Viteによるビルド高速化 ○ モジュールを個別にビルドし、開発サーバーの起動時間を大幅に短縮！ Wepack4 Vite (Is Vite Better than Webpack?より引用)

Slide 12

Slide 12 text

Nuxt3の特徴デメリット ● 移行コスト ○ プロジェクトの設定やディレクトリ構造に変更が必要 ○ 一部制限されている機能が存在するため代替手段を見つける必要 ● プラグイン互換性 ○ Nuxt3では内部のアーキテクチャが大幅に変更されているため、 Nuxt2系で使用していたプラグインやミドルウェアがそのまま動作しないことがある ○ 互換性の問題解決のための手間が発生する可能性 ● 学習コスト ○ Vue3やViteに慣れていない開発者にとっては、学習ハードルが高い場合がある

Slide 13

Slide 13 text

Nuxt3への移行プロセス

Slide 14

Slide 14 text

前提と移行指針システムの前提： - コンポーネントはフルスクラッチで AtomicDesignを元に設計・実装 - 2022/9末には@nuxt/composition-api利用してCompositionAPI移行済プロセス大きく2つ： 1. Nuxt-Bridgeへの移行 2. Nuxt3への移行

Slide 15

Slide 15 text

Nuxt Bridge Nuxt2の状態でNuxt3の機能を使える前方互換性を持つバージョン・Nuxt3移行時の修正量が減る(はずだった) ・非対応のNuxtModuleが多い調査した結果対応システムのnuxtモジュールの互換性が高く、不確実性が少なかったため、 NuxtBridge移行を決定 (nuxt-2-to-nuxt-bridgeより引用)

Slide 16

Slide 16 text

Nuxt3への移行プロセスステップ１：Nuxt2系からNuxt Bridgeへの移行(10人日) 移行に必要な作業：基本は公式の手順に準拠 ● Nuxt-edgeへの切り替え、Nuxt-Bridgeの導入 ● Compistion API のマイグレーション ● CJS から ESM へのマイグレーション ● 互換性のないモジュールの代替 ○ @nuxtjs/proxy の代わりに自前でプロキシを用意した実装例→ ● nuxi での動作検証 ● リグレッションテスト, シナリオテスト

Slide 17

Slide 17 text

Nuxt3への移行プロセス Nuxt2系からNuxt Bridgeに移行した結果 ● 良かったこと ○ フロント↔BFFのレスポンスタイム162%改善...！ ■ MiddlewareのでNitro Engineの恩恵を教授 ● 辛かったこと ○ 変更箇所多すぎい...！ ○ コンポーネントほぼ全て修正 ○ useAsyncDataや useFetch非対応

Slide 18

Slide 18 text

● 移行に必要な作業 ○ @nuxt/bridge→Nuxt3パッケージへのアップデート ○ Nuxt.conﬁgの変更 ○ コンポーネントとプラグインの更新 ■ Vue3に対応するため CompositionAPIや新しいディレクティブ構文に合わせる ○ ミドルウェアとサーバーミドルウェアの更新 ○ ストアの移行 ■ Nuxt3ではVuexではなくPiniaが推奨されている ○ ビルドとデプロイ設定の更新 ○ リグレッションテスト, シナリオテスト Nuxt3への移行プロセスステップ2：Nuxt BridgeからNuxt3系への移行(約30人日)

Slide 19

Slide 19 text

● 辛かった事象(一部抜粋) ○ useRoute 関数など、利用箇所によって正しい値が取れない ■ layoutで利用するとundeﬁnedが取得されてしまうなど ○ viteのproxyサーバーが本番環境で使えると思ったら使えなかった ■ server.proxyオプションは開発用で、 npm run devでないと利用できない ○ その他公式ドキュメントの整備が完了してなくて検索してやってみて NGを繰り返す ■ Nuxt Conﬁguration Reference ■ https://github.com/nuxt/nuxt/issues/13998 Nuxt3への移行プロセスステップ2：Nuxt BridgeからNuxt3系への移行(約30人日)

Slide 20

Slide 20 text

Nuxt3移行結果

Slide 21

Slide 21 text

Nuxt3に移行した結果良かったこと ● 移行によるパフォーマンス改善 ○ サイトのロード時間の短縮 ...！ ○ バンドルサイズ約40%削減...！ ● 新機能・開発効率の向上 ○ CompositionAPIによるコードの簡潔化 ○ コンポーネントの静的型付けによる型安全な実装が可能に ○ 開発サーバーのビルド時間大幅に改善 (PageSpeed Insightsで測定)

Slide 22

Slide 22 text

Nuxt3に移行した結果これから取り組みたいこと ● Viteのライブラリモードを活用したUIライブラリの作成 ○ 社内UIライブラリから複数システムがコンポーネントを再利用 ○ (Reactのコンポーネントも出力可能 ...!) ● StoryBookの導入 ○ @storybook/builder-viteを利用して ○ 上記のライブラリと合わせた UIカタログ作成

Slide 23

Slide 23 text

まとめ

Slide 24

Slide 24 text

Nuxt2からNuxt3移行するメリットは大きい！ただ、ライブラリの依存度によってはフルリプレイス並の工数が必要...😇 (Nuxt Bridgeの恩恵はあまりなかった)

Slide 25

Slide 25 text

Nuxt3移行の詳細は弊社テックブログで4月中に公開予定です！

Slide 26

Slide 26 text

Leverages スライドテンプレート基本カラー基本フォントサイズアイコン（欲しいモノがあれば言ってくださいませ！） #333333 #fbfbfb #95100e メインタイトル : 42 サブタイトル : 24 本文 : 16 （あくまで基本なのでご自身でカスタマイズしてもらって大丈夫です :D）

Slide 27

Slide 27 text

スライドタイトルレバレジーズ株式会社　〇〇〇〇 2018/01/01

Slide 28

Slide 28 text

目次 ● 始めに ● 内容１ ○ 1の内容 ● 内容２ ○ 2の内容1 ○ 2の内容2 ● 内容３ ● まとめ ● さいごに

Slide 29

Slide 29 text

伝えたいメッセージメッセージの説明とか。解説とかをここでする。

Slide 30

Slide 30 text

内容１

Slide 31

Slide 31 text

内容１内容１のサブタイトル内容がここに入ってくる。

Slide 32

Slide 32 text

見出し見出し見出し1 内容1 見出し2 内容2 見出し3 内容3 見出し4 内容4

Slide 33

Slide 33 text

ワークシート・チーム名・チーム目標・チームルール　　　ルールその① 　　ルールその② 　　ルールその③