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

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

    Vue.js / Nuxt.js / PWA @kan_dai
  3. None
  4. • 1年くらい前にリニューアルしたコーポレートサイトの話 • WordPress → microCMS × Nuxt • 全部で4000ページくらい

    • NuxtJS 2.11.0 ざっと概要
  5. None
  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を送るだけのコンテンツを用意した 本番ビルドだけ用のコンテンツを作る
  20. None
  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. 
 ご静聴ありがとうございました