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

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

Transcript

1. チャリティーカンファレンス沖縄 株式会社 菅家大地 サイトを の 構成にリニューアルした話
2. 株式会社 フロントエンドエンジニア 菅家 大地 元デザイナーのフロントエンドエンジニア 福島→宮城→東京→宮城 仙台フロントエンド
3. 年に ヶ月ほど 沖縄に住んでいました
6. ファイルを事前にレンダリングし、CDNから直接配信するこ とで、Webサーバーの管理や運用の必要性を排除し、高速 で安全なサイトやアプリを配信します。
 https://jamstack.org/ JavaScript APIs Markup
7. • リニューアルしたサイトの概要 • 使っている技術要素の紹介 • からのデータ移行 • で作ってみてどうだったか • 苦労したポイント 今日話すこと
10. • • ニュースだけ ページくらい • ニュース以外の更新は 非エンジニアでは触れない • を検討 • ニュース以外も を 導入したい • 社内で の実績があり を使いたい
12. 各技術要素の紹介

13. • サーバーサイドレンダリング（ ） • シングルページアプリケーション（ ） • 静的ファイルの生成 Vue.jsのフレームワーク。 さまざまなターゲットをサポート。 で からデータ取得すれば、 として静的に生成することが可能 のライフサイクル 参照
14. • 静的 生成していてもページ遷移時に にアクセスする → リリースの で の機能が追加 • 以下のようなケースがある場合は気になる？ ◦ のデータ転送量を減らしたい ◦ セキュリティ面を考慮して隠蔽したい • の遷移は使わずに タグでリンクをするなども可能 余談
15. • テンプレートを持たずに だけ提供 するヘッドレス 日本製 • インストールなどの手間が不要。 アカウント作成してすぐ始められる。 • 国産 を使用していて コンテンツ配信が高速。 • 機能開発や改善が爆速。 参照 https://microcms.io/
16. • 管理画面の がわかりやすくて使いやすい • 必要な だけを用意できるので更新部分がわかりやすい デフォルトで色々付いてるとここは触らないでみたいなことが • 自動でアップデートされるのは良いが、 が変わったりする場合があるのは良し悪し • サポート対応が神 使用感 個人的感想
17. • リッチエディタの使い勝手が少し悪い印象がある • 記事 コンテンツ が増えると管理画面の使い勝手が悪い • 管理画面内での検索などが不十分な印象 • 画面プレビュー機能を使うには一手間必要 デメリットはありますが、意見を言うと爆速で改善してくれます。総合的に はとても満足しています。 使用感 個人的感想
19. • 静的コンテンツのホスティングサービス • コンテンツは の を使って配信される • のサービスと連携し、 や があったら がビルドや デプロイをしてくれる。とにかく簡単 • を使った との連携も簡単 • という言葉を提唱したのは の創業者
20. WordPressからのデータ移行

21. • 既存 の約 件の記事を移行する必要があった • インポート機能があるが使わなかった ◦ インポート用に整形する手間 記事がゼロの時しか使えない • で記事を登録することが可能なのでこちらを採用 ◦ のエクスポートした データを整形して ◦ 用に整形 画像のパス変換 • 画像は全選択→ドラッグ ドロップで 分くらいでいけた の を使用して移行
22. • の元記事のデータが でそ のまま のリッチエディタに登録す るとうまくいかない • 旧記事 用のフィールドを用意 • リッチエディタをチェックボックスで 切り替え可能に • 何かあれば 側で対応できるように、移 行記事というチェックボックスを用意 エディタの互換性の問題
23. 余談：最終的にリッチエディタを使わずに繰り返しフィールドを使用
24. JAMstackで作ってみてどうだったか

25. • セキュリティやパフォーマンス面でのメリットは大きい • 各要素が疎結合なので、一部だけ置き換えるなどもしやすい • 開発体験が圧倒的に良かった → や などの フレームワークを サイト制作で使うという 選択肢が持てる 体制やコスパの問題はあると思いますが メリットや良かったこと
26. • 主にサイトの運用面で課題が出てくると感じた • 記事が多いほどビルドにかかる時間が長くなる • そのため公開時間がシビアなものには使いにくい • 基本的に一部だけビルド・配信はできない • 単体ではプレビューできない ビルドしないと確認できない ◦ では のパラメータをつけると下書きを取得してく れる機能がある 多少の開発が必要 に感じたデメリット
27. 現時点での対策 開発環境だけSPAにし て、ビルドなしのプレ ビュー環境として使用し ています。 Netlifyの環境変数を使 用することでワンソース で実現可能。
28. 苦労ポイントなど

29. • 動的ルーティング のような の は 自動で生成してくれないので指定する必要がある • に のデータを取得して配列で渡す処理を書く 例： • ニュース詳細・カテゴリ・ページング・期間・期間 カテゴリとやっていか ないといけないので地味に大変 静的 生成時の動的ルーティング
30. HTML生成失敗時に エラー終了せずに デプロイされる 何食わぬ顔で通常終了デプロイされ に なるので、イベントをキャッチして、明示的に エラーを返す処理を入れる
31. /hooks/generate.js /nuxt.config.js
32. • データ移行をしたら総ページ数が 弱になった • 静的 生成時に に負荷がかかりエラーに • ページ生成時の ページ毎のインターバル時間を設定でき、 秒に設定 したら のエラーが起きにくくなった • が、その分ビルドにかかる時間は長くなり、 はビルドの が 分 越えると落ちるのでそこで落ちた • 秒にしてなんとか 分くらいに落ち着く エラーはたまに発生 ビルド時間と 負荷との戦い
33. • という仕組みを使い、 生成時にあらかじめデータを渡す設 定をすることができる ◦ ビルド時間が 分くらい 約半分 になりエラーも起きなくなった ◦ ドキュメントに書いてあるのでちゃんと読みましょう • 参考： ページ弱のトータルデプロイ時間 分 〜 分 ◦ ビルド時間：約 〜 分 の 分の対象はこっち ◦ の 画像圧縮など 約 分 ビルド時間と 負荷との戦い
34. • でコンテンツが追加・更新されたら に を送りビ ルドをトリガーするような設定にしていた • 月のビルド時間に制限がある プランによるが今回は 時間 • で更新できる部分がかなり増えたので、更新の度に を 送ったら、それなりにビルド時間を消費することが予想された • ニュース以外のコンテンツは を送らないことにして、 を送るだけのコンテンツを用意した ビルド時間と のビルド時間制限との戦い
36. • はユーザーにも開発者にもメリットがある 運用面などの課題はあるが解消する技術や手法は今後出てくると思う • モダンなフロントエンド技術や開発手法が使える場面が増え ている • おすすめです！ まとめ
37. 
 ご静聴ありがとうございました