$30 off During Our Annual Pro Sale. View Details »

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

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

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

での発表資料

# 技術

Nuxt2, Nuxt Bridge, Nuxt3, TypeScript, Vite

More Decks by レバレジーズTechアカウント

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. Nuxt3への移行背景

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  13. Nuxt3への移行プロセス

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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人日)

    View Slide

  20. Nuxt3移行結果

    View Slide

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

    View Slide

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

    View Slide

  23. まとめ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. 目次 ● 始めに
    ● 内容1
    ○ 1の内容
    ● 内容2
    ○ 2の内容1
    ○ 2の内容2
    ● 内容3
    ● まとめ
    ● さいごに

    View Slide

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

    View Slide

  30. 内容1

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide