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

WordPressサイトをNuxt.js × microCMSのJAMstack構成にリニュー...

Daichi
June 21, 2020

WordPressサイトをNuxt.js × microCMSのJAMstack構成にリニューアルした話

2020年6月21日に行われたチャリティカンファレンス沖縄で使用したスライドです。

Daichi

June 21, 2020
Tweet

More Decks by Daichi

Other Decks in Technology

Transcript

  1. • • ニュースだけ ページくらい • ニュース以外の更新は 非エンジニアでは触れない • を検討 •

    ニュース以外も を 導入したい • 社内で の実績があり を使いたい
  2. • 静的 生成していてもページ遷移時に にアクセスする → リリースの で の機能が追加 • 以下のようなケースがある場合は気になる?

    ◦ のデータ転送量を減らしたい ◦ セキュリティ面を考慮して隠蔽したい • の遷移は使わずに タグでリンクをするなども可能 余談
  3. • 静的コンテンツのホスティングサービス • コンテンツは の を使って配信される • のサービスと連携し、 や があったら

    がビルドや デプロイをしてくれる。とにかく簡単 • を使った との連携も簡単 • という言葉を提唱したのは の創業者
  4. • 既存 の約 件の記事を移行する必要があった • インポート機能があるが使わなかった ◦ インポート用に整形する手間 記事がゼロの時しか使えない •

    で記事を登録することが可能なのでこちらを採用 ◦ のエクスポートした データを整形して ◦ 用に整形 画像のパス変換 • 画像は全選択→ドラッグ ドロップで 分くらいでいけた の を使用して移行
  5. • の元記事のデータが でそ のまま のリッチエディタに登録す るとうまくいかない • 旧記事 用のフィールドを用意 •

    リッチエディタをチェックボックスで 切り替え可能に • 何かあれば 側で対応できるように、移 行記事というチェックボックスを用意 エディタの互換性の問題
  6. • 動的ルーティング のような の は 自動で生成してくれないので指定する必要がある • に のデータを取得して配列で渡す処理を書く 例:

    • ニュース詳細・カテゴリ・ページング・期間・期間 カテゴリとやっていか ないといけないので地味に大変 静的 生成時の動的ルーティング
  7. • データ移行をしたら総ページ数が 弱になった • 静的 生成時に に負荷がかかりエラーに • ページ生成時の ページ毎のインターバル時間を設定でき、

    秒に設定 したら のエラーが起きにくくなった • が、その分ビルドにかかる時間は長くなり、 はビルドの が 分 越えると落ちるのでそこで落ちた • 秒にしてなんとか 分くらいに落ち着く エラーはたまに発生 ビルド時間と 負荷との戦い
  8. • という仕組みを使い、 生成時にあらかじめデータを渡す設 定をすることができる ◦ ビルド時間が 分くらい 約半分 になりエラーも起きなくなった ◦

    ドキュメントに書いてあるのでちゃんと読みましょう • 参考: ページ弱のトータルデプロイ時間 分 〜 分 ◦ ビルド時間:約 〜 分 の 分の対象はこっち ◦ の 画像圧縮など 約 分 ビルド時間と 負荷との戦い
  9. • でコンテンツが追加・更新されたら に を送りビ ルドをトリガーするような設定にしていた • 月のビルド時間に制限がある プランによるが今回は 時間 •

    で更新できる部分がかなり増えたので、更新の度に を 送ったら、それなりにビルド時間を消費することが予想された • ニュース以外のコンテンツは を送らないことにして、 を送るだけのコンテンツを用意した ビルド時間と のビルド時間制限との戦い