Slide 1
Slide 1 text
2021.09.30 @ ジャムジャム！！Jamstack！！
Daichi Kanke （@kan_dai）
Jamstackの実案件で
躓いたことや工夫したこと
Slide 2
Slide 2 text
株式会社TAM フロントエンドエンジニア
Daichi Kanke
元デザイナーのフロントエンドエンジニア
福島→宮城→東京→宮城
PWA Night / 仙台フロントエンドUG
Vue.js / Nuxt.js / PWA
@kan_dai
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
● 1年くらい前にリニューアルしたコーポレートサイトの話
● WordPress → microCMS × Nuxt
● 全部で4000ページくらい
● NuxtJS 2.11.0
ざっと概要
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
躓いたこと
Slide 7
Slide 7 text
● 開発中は意外と気づかない？
● クライアントの入力テスト時に気付いた
りする
● 必須にするか、テンプレートで入力がな
い場合の処理をちゃんとする
入力がなくてビルド時エラー
Slide 8
Slide 8 text
● ビルド時にJSで日付処理などを行うと日付
や時間がずれる
● Netlify側のタイムゾーンの問題
● 環境変数でタイムゾーンを設定する
○ netlify.toml
○ 管理画面
● -9hなので日付だけだと意外と気づかない
日付や時間がずれる
Slide 9
Slide 9 text
● めんどくさい
● 仕様ちゃんと考えとかないと辛い
(増えたとき・1ページの表示件数・etc…)
● カテゴリや日付の組み合わせがたくさんあると動
的ルート生成が大変
NuxtJS 2.13以降は動的リンク自動で生成してくれるの？
ページネーションや動的ルート生成
Slide 10
Slide 10 text
● 最終的な総ページ数が4000弱になった
● 静的HTML生成時にAPIに負荷がかかりエラーに
● ページ生成時の1ページ毎のインターバル時間を設定できる
→ 0.2秒に設定したらAPIのエラーが起きにくくなった
● が、その分ビルドにかかる時間は長くなる
→ NetlifyはビルドのCIが15分越えると落ちるのでそこで落ちた
● 0.1秒にしてなんとか10分くらいに落ち着く(エラーはたまに発生)
ビルド時間とAPI負荷との戦い
Slide 11
Slide 11 text
● Payloadという仕組みを使い、HTML生成時にあらかじめデータを渡す設
定をすることができる
○ ビルド時間が5分くらい(約半分)になりエラーも起きなくなった
○ ドキュメントに書いてあるのでちゃんと読みましょう
● 参考：4000ページ弱のトータルデプロイ時間 15分 〜 20分
○ ビルド時間：約 5〜10分 (Netlifyの15分の対象はこっち)
○ NetlifyのPost Process (画像圧縮など) 約10分
ビルド時間とAPI負荷との戦い
Slide 12
Slide 12 text
--fail-on-errorがうまく動いてくれない
Slide 13
Slide 13 text
HTML生成失敗時に
エラー終了せずに
デプロイされる
何食わぬ顔で通常終了デプロイされ404に
なるので、イベントをキャッチして、明示的に
エラーを返す処理を入れる
Slide 14
Slide 14 text
/hooks/generate.js
/nuxt.config.js
Slide 15
Slide 15 text
● sitemap.xmlってどうやって作るの？
○ NuxtJSの公式のプラグインがある(3系の対応はわからん)
● Netlifyってリダイレクトとかできるの？
○ ルートに `_redirects` というファイルをおいてそこに書く
○ staticの中に置けばOK
● お問い合わせは？
○ NetlifyForm・NetlifyFunctions・その他のSaaSとかが選択肢？
おまけ
Slide 16
Slide 16 text
工夫したこと
Slide 17
Slide 17 text
● 記事が多いほどビルドにかかる時間が長くなる
● そのため公開時間がシビアなものには使いにくい
● 基本的に一部だけビルド・配信はできない
● microCMS単体ではプレビューできない(ビルドしないと確認できない)
○ microCMSではdraftKeyのパラメータをつけると下書きを取得してく
れる機能がある (多少の開発が必要)
運用面での課題
Slide 18
Slide 18 text
開発環境だけSPAにする
開発環境だけSPAにし
て、ビルドなしのプレ
ビュー環境として使用し
ました。
Netlifyの環境変数を使
用することでワンソース
で実現可能。
Slide 19
Slide 19 text
● 記事更新の度にWebhookを送って
ビルドしてたらSPAの開発環境の意味がない
● CMSで更新できる部分がかなり増えた
○ 都度ビルドしてたらビルド時間を消費してしまう
○ 一度に複数箇所を更新することも多い
● Webhookを送るだけのコンテンツを用意した
本番ビルドだけ用のコンテンツを作る
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
● 通知がないと、ビルドがいつ終
わったのかも、正常終了したのか
もわからない
● Webhookを利用して、ビルド開始
時や終了時に簡単にSlackに通
知を送ることができる
● クライアントにとても喜ばれた
Slack通知
Slide 22
Slide 22 text
● 既存WordPressの約3000件の記事を移行する必要があった
● CSVインポート機能があるが使わなかった
○ インポート用に整形する手間 / 記事がゼロの時しか使えない
● POST APIで記事を登録することが可能なのでこちらを採用
○ WordPressのエクスポートしたxmlデータを整形してPOST
○ microCMS用に整形 / 画像のパス変換
● 画像は全選択→ドラッグ&ドロップでOK(10分くらいでいけた)
WordPressからのデータ移行
Slide 23
Slide 23 text
● WordPressの元記事のデータがHTMLでそ
のままmicroCMSのリッチエディタに登録す
るとうまくいかない
● 旧記事(HTML)用のフィールドを用意
● HTML or リッチエディタをチェックボックスで
切り替え可能に
● 何かあればNuxt側で対応できるように、移
行記事というチェックボックスを用意
エディタの互換性の問題
Slide 24
Slide 24 text
https://zenn.dev/kandai/articles/f6a034d166e4c977a78e
Slide 25
Slide 25 text
ご静聴ありがとうございました