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を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
Search
Chinen
November 02, 2022
Technology
2
1.4k
クライアントワーク(受託)の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 2023
chinen
1
280
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.2k
WWDC2023-Recap-LT
chinen
1
86
Web Push対応状況2023
chinen
0
430
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
110
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
120
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.2k
frontend-conf-okinawa-2022
chinen
0
350
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
310
Other Decks in Technology
See All in Technology
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
3
360
How to do well in consulting–Balkan Ruby 2024
irinanazarova
0
160
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
0
340
さらばあのボタンとは言わせない SORACOM LTE-M Button powerd by AWSをまだ使えるようにした(前編?)
miura55
0
100
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
4
910
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
1
1.8k
生産性向上チームの紹介
cybozuinsideout
PRO
1
950
MapLibreとAmazon Location Service
dayjournal
1
190
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
1.1k
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
7
1.9k
require(ESM)とECMAScript仕様
uhyo
4
1k
How to Lead? Testimonial of a Lead Android Engineer
oleur
1
120
Featured
See All Featured
Teambox: Starting and Learning
jrom
128
8.4k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
The Mythical Team-Month
searls
217
42k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
In The Pink: A Labor of Love
frogandcode
138
21k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Building Your Own Lightsaber
phodgson
100
5.7k
Design by the Numbers
sachag
274
18k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
How to Ace a Technical Interview
jacobian
273
22k
A Philosophy of Restraint
colly
197
16k
Raft: Consensus for Rubyists
vanstee
133
6.3k
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で一緒にお仕事したい方も歓迎! ご依頼・採用も募集中