Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
クライアントワーク(受託)のJamstack開発でNuxt 3を提案・実装する / Rejec...
Search
Chinen
November 02, 2022
Technology
2
1.6k
クライアントワーク(受託)のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
Reject Conference - Vue Fes Japan Online 2022の登壇資料です。
Chinen
November 02, 2022
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
94
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.4k
MTDDC Meetup TOKYO 2023
chinen
2
370
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.9k
WWDC2023-Recap-LT
chinen
1
150
Web Push対応状況2023
chinen
0
560
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
190
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
200
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Technology
See All in Technology
こんなデータマートは嫌だ。どんな? / waiwai-data-meetup-202504
shuntak
5
1.7k
AI Agentを「期待通り」に動かすために:設計アプローチの模索と現在地
kworkdev
PRO
2
310
SRE NEXT CfP チームが語る 聞きたくなるプロポーザルとは / Proposals by the SRE NEXT CfP Team that are sure to be accepted
chaspy
1
560
試験は暗記より理解 〜効果的な試験勉強とその後への活かし方〜
fukazawashun
0
310
All You Need Is Kusa 〜Slackデータで始めるデータドリブン〜
jonnojun
0
140
「家族アルバム みてね」を支えるS3ライフサイクル戦略
fanglang
4
640
はじめてのSDET / My first challenge as a SDET
bun913
1
180
Spice up your notifications/try!Swift25
noppefoxwolf
2
160
Classmethod AI Talks(CATs) #20 司会進行スライド(2025.04.10) / classmethod-ai-talks-aka-cats_moderator-slides_vol20_2025-04-10
shinyaa31
0
110
50人の組織でAIエージェントを使う文化を作るためには / How to Create a Culture of Using AI Agents in a 50-Person Organization
yuitosato
6
3k
ペアーズにおけるData Catalog導入の取り組み
hisamouna
0
270
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM, Prompt Engineering and Building Tutors
ks91
PRO
1
200
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Faster Mobile Websites
deanohume
306
31k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Invisible Side of Design
smashingmag
299
50k
Site-Speed That Sticks
csswizardry
5
470
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
4.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Into the Great Unknown - MozCon
thekraken
37
1.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Visualization
eitanlees
146
16k
KATA
mclloyd
29
14k
Transcript
クライアントワーク(受託)の Jamstack開発で Nuxt 3を提案・実装する 2022/11/2 まぁし(知念)
なぜこのテーマで話そうと思ったか Vue.js/Nuxtコミュニティを応援したい (Vue.jsで開発するの楽しい) 受託の最新事例がほぼない (Nuxt 2の情報は豊富だが、Nuxt 3については・・・)
クライアントワークでのNuxt 3 導入事例を話します ※クライアント名は出せないため、いくつか担当したプロジェクトから共通項 をまとめています。特定はご遠慮ください
株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主 知念 昌史 / まぁし Twitter@chocodogmagic •
沖縄でリモートワーク/元・美容師 • 技術コミュニティ運営 ◦ PWA Night(東京)/ v-okinawa(沖縄) • Vue.js/Nuxt/Jamstack/セマンティックHTML/ アクセシビリティ/SEO/パフォーマンス改善/CMS • 最近のハマり:スプラトゥーン3(弓ウデマエS+12)
今日話すこと 1. Nuxt 3の状況 2. 提案までの経緯 3. RC版での実装時の悩み
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 もう一踏ん張り、応援
プロジェクト提案までの経緯
要望 運用担当(非エンジニア)が自由にサイト更新できない、CMS導入したい CMS候補 • WordPress・・・有名、知見が多い、対応できるエンジニア多い • ヘッドレスCMS(Jamstack)・・・microCMSなら実績あり だが、社内では学習コストあり やりたいことはどちらでも達成できるのでギリギリまで検討
検討時の懸念点 WordPress • アップデート対応必須 • PHPサーバー保守 • 表示速度、セキュリティ面ではStatic Generationに劣る Jamstack(microCMS)
• JSフレームワークが必要 • ビルド環境(Node.jsが必要) • プレビューやページャーは 自前で実装 CMS保守をクラウド化したい → WordPress管理コスト避けたい 今までAWSを利用しており、S3で完結したい(保守・運用コスト) エンジニアの成長視点ではJamstackを採用したい、実績にもなる
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
Nuxt 3を採用!!! リリースまだじゃな い?大丈夫そ? 動作検証してるし、 6月には安定版になる ので間に合うす〜
構成例 • AWS Amplify • CodeCommit • Nuxt 3 •
microCMS • Webhookでbuild→SSG • S3 → CloudFront • Route 53
実装時の注意・悩み Nuxt 3を採用したが、RC版では思わぬ不具合が出る可能性があったため、 いつでもNuxt 2に切り替えられるように対策する • Nuxtの初期ディレクトリ構造は変更しない ◦ nuxt.config.tsで極力設定変更しない、pages、components等はそのまま
◦ 追加するプラグインも最低限に抑える方針 • <script setup>は使うが、できるだけSFCに収める ◦ 極端に分割せず、Nuxt 2 + Composition APIプラグイン構成に移植しやすく Nuxt 2でも動く、を意識
悩みポイント:旧環境との共存 改修前はgulpで静的生成したファイルをサーバーにアップロードしていた Nuxt移行後も一部ページを残す必要あり 1. publicディレクトリ(旧static)に生成後のファイルをそのまま設置 2. 共通ヘッダー・フッターを新サイト用に変更するものは、 コンテンツ部分のみコードを抜き出してpagesに配置 ※新環境のCSSは旧環境のファイルと干渉しないよう作成しておく
悩みポイント:旧環境との共存 旧環境のgulpタスクでビルド時にパスを書き換える処理があり必要になる 該当の処理を抜き出して(task.js)Node.jsで実行できるようにしておく package.jsonの scripts に追加して npm run generate でまとめて実行
悩みポイント:トレイリングスラッシュ URLの末尾の “/” (トレイリングスラッシュ)が消えてしまう ローカル開発中は問題なかったが、AWSでデプロイしたページにアクセスするとスラッ シュ無しにリダイレクトされるような挙動が判明 → nuxt.configで設定変更するもうまくいかず(当時RC.2) → RC.4がリリースされた段階でアップデートすることで解消
最新版であれば問題ない
悩みポイント:Crawlerが404 Nuxtにはデフォルトでクロールする機能があり、nuxt generate時はpages配下とHTML内 のリンクをたどってファイル生成してくれる しかし、publicに置いたファイルはクロールしないため、pages内のコンテンツからpublic管 理のページへリンクしている場合はCrawlerが404を返してしまい、ページ内容も404に置 き換えられてしまう nuxt.configで crawler: false
を設定し、generate.routesを手動で 設定することになる(レアケースかも)
悩みポイント:特定の状況でuseHeadを認識しない titleやmeta関連を設定するために useHead() が提供されている ドキュメント通りに書いていれば問題なく動作するが、一部ページでuseHead()が undefinedエラーになる。 原因は特定できていないが、<script setup>でAPIのフェッチ useFetch()を実行している ところで使った際にエラーとなっていた
何らかの不具合でAuto importsが失敗していると思われたため、 明示的にimportすることで解消(最新Ver.なら解決しているかも)
悩みポイント:Nuxt 2のプラグインが動かない @nuxtjs/gtm Google Tag Managerを設定するプラグイン。Jamstackでは静的な画面遷移のため、 scriptは外部ファイルとして遅延読み込みで対処(NuxtLinkは使わない) @nuxtjs/sitemap sitemap.xmlを生成するプラグイン。 ローカルでは動いたが
nuxt generate時に生成されず、 有志のnpmパッケージを参考にモジュール追加して対応
悩みポイント:generate.routes()でasync使えない Nuxt 2では nuxt.configのgenerate内で asyncとawaitで受け取った結果を配列で返して いれば良かったが、Nuxt 3ではroutes()がエラーになる
悩みポイント:generate.routes()でasync使えない defineNuxtConfigの設定項目を asyncの関数で返すことで対処
苦労はあったが無事リリース 👏
まとめ
受託のJamstack開発でもNuxt 3(RC)は使える ただし、 • Nuxt 2でのJamstack実績があり、万が一の際はNuxt 2でも対応できたこと • Beta →
RCのリリース時点から開発環境の検証をしていたこと • 開発しながら、リアルタイムでNuxt 3対応状況を追っていたこと • プロジェクト担当ディレクターやクライアントに対応状況を説明し、 安心して任せてもらったこと これらの条件がうまく重なり、チーム内で準備や声かけがあってこそ RC版でもうまくいったと言える
Nuxt 3はもうすぐ安定版が 正式リリース
楽しみですね 今のうちに準備しましょう Nuxtで困ったら相談ください、TAMでは実装のお仕事も待ってます
Nuxt 3はいいぞ デフォルトでTypeScript対応、Auto Importsが強力、useFetchの使い勝手の良さ、 Composablesで関数の取り回し◎など、Nuxt 2と比べても開発しやすい環境が整っている
Nuxtについて話したい方はぜひご連絡を! Twitter まぁし@chocodogmagic フォローしてね PWA Night CONFERENCE 2022 12/3(土) 平日9:00〜SpacesでWeb情報発信中!
TAMで一緒にお仕事したい方も歓迎! ご依頼・採用も募集中