クライアントワーク（受託）のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022

Reject Conference - Vue Fes Japan Online 2022の登壇資料です。

Transcript

1. クライアントワーク（受託）の

   Jamstack開発で

   Nuxt 3を提案・実装する

   2022/11/2　まぁし（知念）

   

   View Slide

2. なぜこのテーマで話そうと思ったか

   Vue.js/Nuxtコミュニティを応援したい

   （Vue.jsで開発するの楽しい）

   

   受託の最新事例がほぼない

   （Nuxt 2の情報は豊富だが、Nuxt 3については・・・）

   

   View Slide

3. クライアントワークでのNuxt 3

   導入事例を話します

   ※クライアント名は出せないため、いくつか担当したプロジェクトから共通項
   をまとめています。特定はご遠慮ください 

   

   View Slide

4. 株式会社TAM/TAMTO：フロントエンドエンジニア 兼 個人事業主
   

   知念 昌史 / まぁし Twitter@chocodogmagic

   ● 沖縄でリモートワーク/元・美容師

   ● 技術コミュニティ運営

   ○ PWA Night（東京）/ v-okinawa（沖縄）
   

   ● Vue.js/Nuxt/Jamstack/セマンティックHTML/

   アクセシビリティ/SEO/パフォーマンス改善/CMS

   ● 最近のハマり：スプラトゥーン3（弓ウデマエS+12）

   

   View Slide

5. 今日話すこと

   1. Nuxt 3の状況

   2. 提案までの経緯

   3. RC版での実装時の悩み

   

   View Slide

6. Nuxt 3の状況

   時期 状況 お気持ち
   2021年10月 Beta版リリース この時点ではまだ様子見
   2022年2月 3月にRC版リリース予定と発表 導入の検討を始める
   2022年3月 RC版リリースされず4月へ延期 まぁ大丈夫
   2022年4月 RCリリース（Stable版は6月予定と発表） 業務プロジェクト選定候補へ
   6月以降に公開するプロジェクトなら
   導入しても良さそう
   2022年6月 RC.4 Stable版のリリースが夏へ延期 ？！
   2022年9月 RC.10 Full Static Generation（Stable版は秋へ） SSGが安定した・・・はず
   2022年11月2日 本日時点の最新はRC.12 もう一踏ん張り、応援
   

   View Slide

7. プロジェクト提案までの経緯

   

   View Slide

8. 要望

   運用担当（非エンジニア）が自由にサイト更新できない、CMS導入したい

   

   CMS候補

   ● WordPress・・・有名、知見が多い、対応できるエンジニア多い

   ● ヘッドレスCMS（Jamstack）・・・microCMSなら実績あり

   だが、社内では学習コストあり

   やりたいことはどちらでも達成できるのでギリギリまで検討

   

   View Slide

9. 検討時の懸念点

   WordPress

   ● アップデート対応必須

   ● PHPサーバー保守

   ● 表示速度、セキュリティ面ではStatic
   Generationに劣る

   Jamstack（microCMS）

   ● JSフレームワークが必要

   ● ビルド環境（Node.jsが必要）

   ● プレビューやページャーは

   自前で実装

   CMS保守をクラウド化したい → WordPress管理コスト避けたい

   今までAWSを利用しており、S3で完結したい（保守・運用コスト）

   エンジニアの成長視点ではJamstackを採用したい、実績にもなる

   

   View Slide

10. Jamstack提案といえばJSフレームワーク選定

    ● Vue 2 + Nuxt 2

    ● Vue 3 + Nuxt 3

    ● Vue.js + Vite

    ● （今ならAstroも候補）

    社内ではVueが得意なエンジニアが多かったため、Nuxtを採用することに

    ※検討時点ではNuxt 3はまだBeta版（2系のメンテ終了リスク避けたい）

    安定しているNuxt 2でいくか、最新のNuxt 3に挑戦するか

    6月にはStable版が出るはず・・・！

    ● React + Next.js

    ● React + Gatsby

    

    View Slide

11. Nuxt 3を採用！！！

    リリースまだじゃな
    い？大丈夫そ？ 動作検証してるし、
    6月には安定版になる
    ので間に合うす〜
    

    View Slide

12. 構成例

    ● AWS Amplify

    ● CodeCommit

    ● Nuxt 3

    ● microCMS

    ● Webhookでbuild→SSG

    ● S3 → CloudFront

    ● Route 53

    

    View Slide

13. 実装時の注意・悩み

    Nuxt 3を採用したが、RC版では思わぬ不具合が出る可能性があったため、

    いつでもNuxt 2に切り替えられるように対策する

    ● Nuxtの初期ディレクトリ構造は変更しない

    ○ nuxt.config.tsで極力設定変更しない、pages、components等はそのまま 

    ○ 追加するプラグインも最低限に抑える方針 

    ● は使うが、できるだけSFCに収める
<br/>○ 極端に分割せず、Nuxt 2 + Composition APIプラグイン構成に移植しやすく 
<br/>Nuxt 2でも動く、を意識
<br/>
<br/>

    View Slide

14. 悩みポイント：旧環境との共存

    改修前はgulpで静的生成したファイルをサーバーにアップロードしていた

    Nuxt移行後も一部ページを残す必要あり

    

    1. publicディレクトリ（旧static）に生成後のファイルをそのまま設置

    2. 共通ヘッダー・フッターを新サイト用に変更するものは、

    コンテンツ部分のみコードを抜き出してpagesに配置

    ※新環境のCSSは旧環境のファイルと干渉しないよう作成しておく

    

    View Slide

15. 悩みポイント：旧環境との共存

    旧環境のgulpタスクでビルド時にパスを書き換える処理があり必要になる

    該当の処理を抜き出して（task.js）Node.jsで実行できるようにしておく

    package.jsonの scripts に追加して npm run generate でまとめて実行

    

    

    View Slide

16. 悩みポイント：トレイリングスラッシュ

    URLの末尾の “/” （トレイリングスラッシュ）が消えてしまう

    ローカル開発中は問題なかったが、AWSでデプロイしたページにアクセスするとスラッ
    シュ無しにリダイレクトされるような挙動が判明

    → nuxt.configで設定変更するもうまくいかず（当時RC.2）

    → RC.4がリリースされた段階でアップデートすることで解消

    最新版であれば問題ない

    

    View Slide

17. 悩みポイント：Crawlerが404

    Nuxtにはデフォルトでクロールする機能があり、nuxt generate時はpages配下とHTML内
    のリンクをたどってファイル生成してくれる

    しかし、publicに置いたファイルはクロールしないため、pages内のコンテンツからpublic管
    理のページへリンクしている場合はCrawlerが404を返してしまい、ページ内容も404に置
    き換えられてしまう

    nuxt.configで crawler: false を設定し、generate.routesを手動で

    設定することになる（レアケースかも）

    

    View Slide

18. 悩みポイント：特定の状況でuseHeadを認識しない

    titleやmeta関連を設定するために useHead() が提供されている

    ドキュメント通りに書いていれば問題なく動作するが、一部ページでuseHead()が
    undefinedエラーになる。

    原因は特定できていないが、でAPIのフェッチ useFetch()を実行している<br/>ところで使った際にエラーとなっていた
<br/>何らかの不具合でAuto importsが失敗していると思われたため、
<br/>明示的にimportすることで解消（最新Ver.なら解決しているかも）
<br/>

    View Slide

19. 悩みポイント：Nuxt 2のプラグインが動かない

    @nuxtjs/gtm

    Google Tag Managerを設定するプラグイン。Jamstackでは静的な画面遷移のため、
    scriptは外部ファイルとして遅延読み込みで対処（NuxtLinkは使わない）

    @nuxtjs/sitemap

    sitemap.xmlを生成するプラグイン。

    ローカルでは動いたが nuxt generate時に生成されず、

    有志のnpmパッケージを参考にモジュール追加して対応

    

    View Slide

20. 悩みポイント：generate.routes()でasync使えない

    Nuxt 2では nuxt.configのgenerate内で asyncとawaitで受け取った結果を配列で返して
    いれば良かったが、Nuxt 3ではroutes()がエラーになる

    

    View Slide

21. 悩みポイント：generate.routes()でasync使えない

    defineNuxtConfigの設定項目を asyncの関数で返すことで対処

    

    View Slide

22. 苦労はあったが無事リリース

    👏

    

    View Slide

23. まとめ

    

    View Slide

24. 受託のJamstack開発でもNuxt 3（RC）は使える

    ただし、

    ● Nuxt 2でのJamstack実績があり、万が一の際はNuxt 2でも対応できたこと

    ● Beta → RCのリリース時点から開発環境の検証をしていたこと

    ● 開発しながら、リアルタイムでNuxt 3対応状況を追っていたこと

    ● プロジェクト担当ディレクターやクライアントに対応状況を説明し、

    安心して任せてもらったこと

    これらの条件がうまく重なり、チーム内で準備や声かけがあってこそ

    RC版でもうまくいったと言える

    

    View Slide

25. Nuxt 3はもうすぐ安定版が

    正式リリース

    

    View Slide

26. 楽しみですね

    今のうちに準備しましょう

    Nuxtで困ったら相談ください、TAMでは実装のお仕事も待ってます 

    

    View Slide

27. Nuxt 3はいいぞ

    デフォルトでTypeScript対応、Auto Importsが強力、useFetchの使い勝手の良さ、 

    Composablesで関数の取り回し◎など、Nuxt 2と比べても開発しやすい環境が整っている 

    

    View Slide

28. Nuxtについて話したい方はぜひご連絡を！

    Twitter まぁし@chocodogmagic

    フォローしてね

    PWA Night CONFERENCE 2022

    　　　　　　　　　　12/3（土）

    平日9:00〜SpacesでWeb情報発信中！
    

    TAMで一緒にお仕事したい方も歓迎！

    ご依頼・採用も募集中

    

    View Slide