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

2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024

Chinen
October 21, 2024

2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024

Vue Fes Japan 2024の登壇資料です。

SSG(Static Site Generation)で80分かかっていたbuildを15分まで縮め、現在2万ページの生成を25分で運用しています。
Build時間の削減とSSGならではの課題を共有しています。

Chinen

October 21, 2024
Tweet

More Decks by Chinen

Other Decks in Programming

Transcript

  1. ビルド・レンダリングのパターン • CSR(Client-side Rendering) • SSG(Static Site Generation) -------------------------------------------------------------- •

    SSR(Server-side Rendering) • ISR(Incremental Static Regeneration) • PPR(Partial Pre-Rendering) Hosting環境と フレームワークの黎明期 static generatorの時代 Hosting環境と フレームワークの普及後
  2. 株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主 知念 昌史 / まぁし X @chocodogmagic •

    Vue.js / Nuxt / Next.js / セマンティックHTML / PWA / アクセシビリティ • コミュニティ運営(沖縄)v-okinawa (東京)PWA Night、MT東京、CSS福笑い • 平日 9:00〜おはようエンジニア #ohayo_engineer(780回くらい) ◦ X(旧Twitter)スペースでWeb関連のラジオ発信中、フォローしてね • ゲーム好き ◦ スプラトゥーン3(トライストリンガー/ハイドラント XP2050) ◦ ポケモンSV スカーレット
  3. このスライドで話すこと 1. 前提の共有 CSR / SSG / SSR / ISR

    / PPR 2. なぜNuxt 3のSSG構成にしたか 3. SSGで発生した問題 4. 解決までに試したこと 5. SSGにおける注意点
  4. 技術選定(2021年頃) • 翌年にNuxt 3リリース(2022年4月RC → 6月→11月) • 社内でNuxt 2の実績は多かった(当時はCSR or

    SSG) • バージョンアップのリスク(Nuxt 2→3) • Hosting・ビルド環境の検討(当時NuxtのSSRがまだ不安) Nuxt 3 + SSG構成が良さそう (Nuxt 2の実績として2,000ページほどの生成10分)
  5. WebサイトのJamstack 構成図 Headless CMS + Webフレームワーク → GitHub Actions →

    S3/CloudFront エンジニアがコードを更新 
 (git push)
 Web担当者がページ更新 
 (Webhook)
 GitHub Actionsでbuildコマンド実行 
 SSGでファイル生成してS3へ転送 
 S3に静的ファイル設置 
 CDN(Cloudfront)で配信