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. チャリティーカンファレンス沖縄
    株式会社 菅家大地
    サイトを

    構成にリニューアルした話

    View full-size slide

  2. 株式会社 フロントエンドエンジニア
    菅家 大地
    元デザイナーのフロントエンドエンジニア
    福島→宮城→東京→宮城
    仙台フロントエンド

    View full-size slide

  3. 年に ヶ月ほど
    沖縄に住んでいました

    View full-size slide

  4. ファイルを事前にレンダリングし、CDNから直接配信するこ
    とで、Webサーバーの管理や運用の必要性を排除し、高速
    で安全なサイトやアプリを配信します。

    https://jamstack.org/
    JavaScript
    APIs
    Markup

    View full-size slide

  5. ● リニューアルしたサイトの概要
    ● 使っている技術要素の紹介
    ● からのデータ移行
    ● で作ってみてどうだったか
    ● 苦労したポイント
    今日話すこと

    View full-size slide


  6. ● ニュースだけ
    ページくらい
    ● ニュース以外の更新は
    非エンジニアでは触れない
    ● を検討
    ● ニュース以外も を
    導入したい
    ● 社内で の実績があり
    を使いたい

    View full-size slide

  7. 各技術要素の紹介


    View full-size slide

  8. ● サーバーサイドレンダリング( )
    ● シングルページアプリケーション( )
    ● 静的ファイルの生成
    Vue.jsのフレームワーク。
    さまざまなターゲットをサポート。
    で からデータ取得すれば、
    として静的に生成することが可能 のライフサイクル
    参照

    View full-size slide

  9. ● 静的 生成していてもページ遷移時に にアクセスする
    → リリースの で の機能が追加
    ● 以下のようなケースがある場合は気になる?
    ○ のデータ転送量を減らしたい
    ○ セキュリティ面を考慮して隠蔽したい
    ● の遷移は使わずに タグでリンクをするなども可能
    余談

    View full-size slide

  10. ● テンプレートを持たずに だけ提供
    するヘッドレス 日本製
    ● インストールなどの手間が不要。
    アカウント作成してすぐ始められる。
    ● 国産 を使用していて
    コンテンツ配信が高速。
    ● 機能開発や改善が爆速。
    参照 https://microcms.io/

    View full-size slide

  11. ● 管理画面の がわかりやすくて使いやすい
    ● 必要な だけを用意できるので更新部分がわかりやすい
    デフォルトで色々付いてるとここは触らないでみたいなことが
    ● 自動でアップデートされるのは良いが、
    が変わったりする場合があるのは良し悪し
    ● サポート対応が神
    使用感 個人的感想

    View full-size slide

  12. ● リッチエディタの使い勝手が少し悪い印象がある
    ● 記事 コンテンツ が増えると管理画面の使い勝手が悪い
    ● 管理画面内での検索などが不十分な印象
    ● 画面プレビュー機能を使うには一手間必要
    デメリットはありますが、意見を言うと爆速で改善してくれます。総合的に
    はとても満足しています。
    使用感 個人的感想

    View full-size slide

  13. ● 静的コンテンツのホスティングサービス
    ● コンテンツは の を使って配信される
    ● のサービスと連携し、 や があったら がビルドや
    デプロイをしてくれる。とにかく簡単
    ● を使った との連携も簡単
    ● という言葉を提唱したのは の創業者

    View full-size slide

  14. WordPressからのデータ移行


    View full-size slide

  15. ● 既存 の約 件の記事を移行する必要があった
    ● インポート機能があるが使わなかった
    ○ インポート用に整形する手間 記事がゼロの時しか使えない
    ● で記事を登録することが可能なのでこちらを採用
    ○ のエクスポートした データを整形して
    ○ 用に整形 画像のパス変換
    ● 画像は全選択→ドラッグ ドロップで 分くらいでいけた
    の を使用して移行

    View full-size slide

  16. ● の元記事のデータが でそ
    のまま のリッチエディタに登録す
    るとうまくいかない
    ● 旧記事 用のフィールドを用意
    ● リッチエディタをチェックボックスで
    切り替え可能に
    ● 何かあれば 側で対応できるように、移
    行記事というチェックボックスを用意
    エディタの互換性の問題

    View full-size slide

  17. 余談:最終的にリッチエディタを使わずに繰り返しフィールドを使用

    View full-size slide

  18. JAMstackで作ってみてどうだったか


    View full-size slide

  19. ● セキュリティやパフォーマンス面でのメリットは大きい
    ● 各要素が疎結合なので、一部だけ置き換えるなどもしやすい
    ● 開発体験が圧倒的に良かった
    → や などの フレームワークを サイト制作で使うという
    選択肢が持てる
    体制やコスパの問題はあると思いますが
    メリットや良かったこと

    View full-size slide

  20. ● 主にサイトの運用面で課題が出てくると感じた
    ● 記事が多いほどビルドにかかる時間が長くなる
    ● そのため公開時間がシビアなものには使いにくい
    ● 基本的に一部だけビルド・配信はできない
    ● 単体ではプレビューできない ビルドしないと確認できない
    ○ では のパラメータをつけると下書きを取得してく
    れる機能がある 多少の開発が必要
    に感じたデメリット

    View full-size slide

  21. 現時点での対策
    開発環境だけSPAにし
    て、ビルドなしのプレ
    ビュー環境として使用し
    ています。
    Netlifyの環境変数を使
    用することでワンソース
    で実現可能。

    View full-size slide

  22. 苦労ポイントなど


    View full-size slide

  23. ● 動的ルーティング のような の は
    自動で生成してくれないので指定する必要がある
    ● に のデータを取得して配列で渡す処理を書く
    例:
    ● ニュース詳細・カテゴリ・ページング・期間・期間 カテゴリとやっていか
    ないといけないので地味に大変
    静的 生成時の動的ルーティング

    View full-size slide

  24. HTML生成失敗時に
    エラー終了せずに
    デプロイされる
    何食わぬ顔で通常終了デプロイされ に
    なるので、イベントをキャッチして、明示的に
    エラーを返す処理を入れる

    View full-size slide

  25. /hooks/generate.js
    /nuxt.config.js

    View full-size slide

  26. ● データ移行をしたら総ページ数が 弱になった
    ● 静的 生成時に に負荷がかかりエラーに
    ● ページ生成時の ページ毎のインターバル時間を設定でき、 秒に設定
    したら のエラーが起きにくくなった
    ● が、その分ビルドにかかる時間は長くなり、 はビルドの が 分
    越えると落ちるのでそこで落ちた
    ● 秒にしてなんとか 分くらいに落ち着く エラーはたまに発生
    ビルド時間と 負荷との戦い

    View full-size slide

  27. ● という仕組みを使い、 生成時にあらかじめデータを渡す設
    定をすることができる
    ○ ビルド時間が 分くらい 約半分 になりエラーも起きなくなった
    ○ ドキュメントに書いてあるのでちゃんと読みましょう
    ● 参考: ページ弱のトータルデプロイ時間 分 〜 分
    ○ ビルド時間:約 〜 分 の 分の対象はこっち
    ○ の 画像圧縮など 約 分
    ビルド時間と 負荷との戦い

    View full-size slide

  28. ● でコンテンツが追加・更新されたら に を送りビ
    ルドをトリガーするような設定にしていた
    ● 月のビルド時間に制限がある プランによるが今回は 時間
    ● で更新できる部分がかなり増えたので、更新の度に を
    送ったら、それなりにビルド時間を消費することが予想された
    ● ニュース以外のコンテンツは を送らないことにして、
    を送るだけのコンテンツを用意した
    ビルド時間と のビルド時間制限との戦い

    View full-size slide

  29. ● はユーザーにも開発者にもメリットがある
    運用面などの課題はあるが解消する技術や手法は今後出てくると思う
    ● モダンなフロントエンド技術や開発手法が使える場面が増え
    ている
    ● おすすめです!
    まとめ

    View full-size slide


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


    View full-size slide