Tweet
Tweet

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


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