Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Daichi
September 30, 2021

 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

Daichi

September 30, 2021
Tweet

More Decks by Daichi

Other Decks in Technology

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