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の実案件で
   躓いたことや工夫したこと
   

   View Slide

2. 株式会社TAM フロントエンドエンジニア
   Daichi Kanke
   元デザイナーのフロントエンドエンジニア
   福島→宮城→東京→宮城
   PWA Night / 仙台フロントエンドUG
   Vue.js / Nuxt.js / PWA
   @kan_dai
   

   View Slide

3. View Slide

4. ● 1年くらい前にリニューアルしたコーポレートサイトの話
   ● WordPress → microCMS × Nuxt
   ● 全部で4000ページくらい
   ● NuxtJS 2.11.0
   ざっと概要
   

   View Slide

5. View Slide

6. 躓いたこと

   

   View Slide

7. ● 開発中は意外と気づかない？
   ● クライアントの入力テスト時に気付いた
   りする
   ● 必須にするか、テンプレートで入力がな
   い場合の処理をちゃんとする
   入力がなくてビルド時エラー
   

   View Slide

8. ● ビルド時にJSで日付処理などを行うと日付
   や時間がずれる
   ● Netlify側のタイムゾーンの問題
   ● 環境変数でタイムゾーンを設定する
   ○ netlify.toml
   ○ 管理画面
   ● -9hなので日付だけだと意外と気づかない
   日付や時間がずれる
   

   View Slide

9. ● めんどくさい
   ● 仕様ちゃんと考えとかないと辛い
   (増えたとき・1ページの表示件数・etc…)
   ● カテゴリや日付の組み合わせがたくさんあると動
   的ルート生成が大変
   NuxtJS 2.13以降は動的リンク自動で生成してくれるの？
   ページネーションや動的ルート生成
   

   View Slide

10. ● 最終的な総ページ数が4000弱になった
    ● 静的HTML生成時にAPIに負荷がかかりエラーに
    ● ページ生成時の1ページ毎のインターバル時間を設定できる
    → 0.2秒に設定したらAPIのエラーが起きにくくなった
    ● が、その分ビルドにかかる時間は長くなる
    → NetlifyはビルドのCIが15分越えると落ちるのでそこで落ちた
    ● 0.1秒にしてなんとか10分くらいに落ち着く(エラーはたまに発生)
    ビルド時間とAPI負荷との戦い
    

    View Slide

11. ● Payloadという仕組みを使い、HTML生成時にあらかじめデータを渡す設
    定をすることができる
    ○ ビルド時間が5分くらい(約半分)になりエラーも起きなくなった
    ○ ドキュメントに書いてあるのでちゃんと読みましょう
    ● 参考：4000ページ弱のトータルデプロイ時間 15分 〜 20分
    ○ ビルド時間：約 5〜10分 (Netlifyの15分の対象はこっち)
    ○ NetlifyのPost Process (画像圧縮など) 約10分
    ビルド時間とAPI負荷との戦い
    

    View Slide

12. --fail-on-errorがうまく動いてくれない
    

    View Slide

13. HTML生成失敗時に
    エラー終了せずに
    デプロイされる
    何食わぬ顔で通常終了デプロイされ404に
    なるので、イベントをキャッチして、明示的に
    エラーを返す処理を入れる
    

    View Slide

14. /hooks/generate.js
    /nuxt.config.js
    

    View Slide

15. ● sitemap.xmlってどうやって作るの？
    ○ NuxtJSの公式のプラグインがある(3系の対応はわからん)
    ● Netlifyってリダイレクトとかできるの？
    ○ ルートに `_redirects` というファイルをおいてそこに書く
    ○ staticの中に置けばOK
    ● お問い合わせは？
    ○ NetlifyForm・NetlifyFunctions・その他のSaaSとかが選択肢？
    おまけ
    

    View Slide

16. 工夫したこと

    

    View Slide

17. ● 記事が多いほどビルドにかかる時間が長くなる
    ● そのため公開時間がシビアなものには使いにくい
    ● 基本的に一部だけビルド・配信はできない
    ● microCMS単体ではプレビューできない(ビルドしないと確認できない)
    ○ microCMSではdraftKeyのパラメータをつけると下書きを取得してく
    れる機能がある (多少の開発が必要)
    運用面での課題
    

    View Slide

18. 開発環境だけSPAにする
    開発環境だけSPAにし
    て、ビルドなしのプレ
    ビュー環境として使用し
    ました。
    Netlifyの環境変数を使
    用することでワンソース
    で実現可能。
    

    View Slide

19. ● 記事更新の度にWebhookを送って
    ビルドしてたらSPAの開発環境の意味がない
    ● CMSで更新できる部分がかなり増えた
    ○ 都度ビルドしてたらビルド時間を消費してしまう
    ○ 一度に複数箇所を更新することも多い
    ● Webhookを送るだけのコンテンツを用意した
    本番ビルドだけ用のコンテンツを作る
    

    View Slide

20. View Slide

21. ● 通知がないと、ビルドがいつ終
    わったのかも、正常終了したのか
    もわからない
    ● Webhookを利用して、ビルド開始
    時や終了時に簡単にSlackに通
    知を送ることができる
    ● クライアントにとても喜ばれた
    Slack通知
    

    View Slide

22. ● 既存WordPressの約3000件の記事を移行する必要があった
    ● CSVインポート機能があるが使わなかった
    ○ インポート用に整形する手間 / 記事がゼロの時しか使えない
    ● POST APIで記事を登録することが可能なのでこちらを採用
    ○ WordPressのエクスポートしたxmlデータを整形してPOST
    ○ microCMS用に整形 / 画像のパス変換
    ● 画像は全選択→ドラッグ&ドロップでOK(10分くらいでいけた)
    WordPressからのデータ移行
    

    View Slide

23. ● WordPressの元記事のデータがHTMLでそ
    のままmicroCMSのリッチエディタに登録す
    るとうまくいかない
    ● 旧記事(HTML)用のフィールドを用意
    ● HTML or リッチエディタをチェックボックスで
    切り替え可能に
    ● 何かあればNuxt側で対応できるように、移
    行記事というチェックボックスを用意
    エディタの互換性の問題
    

    View Slide

24. https://zenn.dev/kandai/articles/f6a034d166e4c977a78e
    

    View Slide

25. 

    ご静聴ありがとうございました

    

    

    View Slide