Jamstackの実案件で躓いたことや工夫したこと

2021年9月30日に行われたジャムジャム！！Jamstack【初心者歓迎LT会】で使用したスライドです。

NuxtJS コマンドと開発
https://nuxtjs.org/ja/docs/get-started/commands

Nuxt Sitemap Module
https://github.com/nuxt-community/sitemap-module

Netlifyでリダイレクト
https://docs.netlify.com/routing/redirects/redirect-options/

WordPressからmicroCMSに記事を移行した時の覚え書き
https://zenn.dev/kandai/articles/f6a034d166e4c977a78e

Transcript

1. 2021.09.30 @ ジャムジャム！！Jamstack！！ Daichi Kanke （@kan_dai） Jamstackの実案件で 躓いたことや工夫したこと
2. 株式会社TAM フロントエンドエンジニア Daichi Kanke 元デザイナーのフロントエンドエンジニア 福島→宮城→東京→宮城 PWA Night / 仙台フロントエンドUG Vue.js / Nuxt.js / PWA @kan_dai
4. • 1年くらい前にリニューアルしたコーポレートサイトの話 • WordPress → microCMS × Nuxt • 全部で4000ページくらい • NuxtJS 2.11.0 ざっと概要
6. 躓いたこと

7. • 開発中は意外と気づかない？ • クライアントの入力テスト時に気付いた りする • 必須にするか、テンプレートで入力がな い場合の処理をちゃんとする 入力がなくてビルド時エラー
8. • ビルド時にJSで日付処理などを行うと日付 や時間がずれる • Netlify側のタイムゾーンの問題 • 環境変数でタイムゾーンを設定する ◦ netlify.toml ◦ 管理画面 • -9hなので日付だけだと意外と気づかない 日付や時間がずれる
9. • めんどくさい • 仕様ちゃんと考えとかないと辛い (増えたとき・1ページの表示件数・etc…) • カテゴリや日付の組み合わせがたくさんあると動 的ルート生成が大変 NuxtJS 2.13以降は動的リンク自動で生成してくれるの？ ページネーションや動的ルート生成
10. • 最終的な総ページ数が4000弱になった • 静的HTML生成時にAPIに負荷がかかりエラーに • ページ生成時の1ページ毎のインターバル時間を設定できる → 0.2秒に設定したらAPIのエラーが起きにくくなった • が、その分ビルドにかかる時間は長くなる → NetlifyはビルドのCIが15分越えると落ちるのでそこで落ちた • 0.1秒にしてなんとか10分くらいに落ち着く(エラーはたまに発生) ビルド時間とAPI負荷との戦い
11. • Payloadという仕組みを使い、HTML生成時にあらかじめデータを渡す設 定をすることができる ◦ ビルド時間が5分くらい(約半分)になりエラーも起きなくなった ◦ ドキュメントに書いてあるのでちゃんと読みましょう • 参考：4000ページ弱のトータルデプロイ時間 15分 〜 20分 ◦ ビルド時間：約 5〜10分 (Netlifyの15分の対象はこっち) ◦ NetlifyのPost Process (画像圧縮など) 約10分 ビルド時間とAPI負荷との戦い
12. --fail-on-errorがうまく動いてくれない
13. HTML生成失敗時に エラー終了せずに デプロイされる 何食わぬ顔で通常終了デプロイされ404に なるので、イベントをキャッチして、明示的に エラーを返す処理を入れる
14. /hooks/generate.js /nuxt.config.js
15. • sitemap.xmlってどうやって作るの？ ◦ NuxtJSの公式のプラグインがある(3系の対応はわからん) • Netlifyってリダイレクトとかできるの？ ◦ ルートに `_redirects` というファイルをおいてそこに書く ◦ staticの中に置けばOK • お問い合わせは？ ◦ NetlifyForm・NetlifyFunctions・その他のSaaSとかが選択肢？ おまけ
16. 工夫したこと

17. • 記事が多いほどビルドにかかる時間が長くなる • そのため公開時間がシビアなものには使いにくい • 基本的に一部だけビルド・配信はできない • microCMS単体ではプレビューできない(ビルドしないと確認できない) ◦ microCMSではdraftKeyのパラメータをつけると下書きを取得してく れる機能がある (多少の開発が必要) 運用面での課題
18. 開発環境だけSPAにする 開発環境だけSPAにし て、ビルドなしのプレ ビュー環境として使用し ました。 Netlifyの環境変数を使 用することでワンソース で実現可能。
19. • 記事更新の度にWebhookを送って ビルドしてたらSPAの開発環境の意味がない • CMSで更新できる部分がかなり増えた ◦ 都度ビルドしてたらビルド時間を消費してしまう ◦ 一度に複数箇所を更新することも多い • Webhookを送るだけのコンテンツを用意した 本番ビルドだけ用のコンテンツを作る
21. • 通知がないと、ビルドがいつ終 わったのかも、正常終了したのか もわからない • Webhookを利用して、ビルド開始 時や終了時に簡単にSlackに通 知を送ることができる • クライアントにとても喜ばれた Slack通知
22. • 既存WordPressの約3000件の記事を移行する必要があった • CSVインポート機能があるが使わなかった ◦ インポート用に整形する手間 / 記事がゼロの時しか使えない • POST APIで記事を登録することが可能なのでこちらを採用 ◦ WordPressのエクスポートしたxmlデータを整形してPOST ◦ microCMS用に整形 / 画像のパス変換 • 画像は全選択→ドラッグ&ドロップでOK(10分くらいでいけた) WordPressからのデータ移行
23. • WordPressの元記事のデータがHTMLでそ のままmicroCMSのリッチエディタに登録す るとうまくいかない • 旧記事(HTML)用のフィールドを用意 • HTML or リッチエディタをチェックボックスで 切り替え可能に • 何かあればNuxt側で対応できるように、移 行記事というチェックボックスを用意 エディタの互換性の問題
24. https://zenn.dev/kandai/articles/f6a034d166e4c977a78e
25. 
 ご静聴ありがとうございました