Coding Methodology

Next.js + Vercel + Headless WordPressで作るWEBサイト

2022 / 11 / 29

昨年、コーディングファクトリー(以下CF)のサイトをリニューアルしました。
今回はCFサイトのリニューアルに使用した開発の技術構成やリニューアル後の運用の構成をご紹介したいと思います。

Next.js + Vercel + Headless WordPressで作るWEBサイト

開発の構成

開発や運用の効率を考えてフレームワークやCMS、サーバー選定を行い開発を行いました。

フレームワーク・CMS

  • Next.js・・・Reactベースのフレームワーク
  • WordPress・・・記事やコンテンツ管理用のCMS

サーバー

  • Vercel ・・・静的ホスティングサーバー
  • WordPress用サーバー

APIランタイム

  • GraphQL・・・Next.jsとWordPressに登録されているデータのやりとり(WPGraphQLプラグイン使用)

実際の開発環境の構成は以下になります。

  1. 開発者がVercelと連携しているGitのブランチに開発したコードをPushします。
  2. Vercelが連携しているGitブランチのコードのビルドを実行し、静的HTMLファイルを生成します。
  3. ビルド中、News一覧など、WordPressで管理しているデータが必要であれば、WordPressからデータを取得します。
  4. HTMLとWordPressに登録されているデータを組み合わせ、静的HTMLを生成します。
  5. 静的HTMLをVercelにデプロイし公開されます。

運用の構成

CFサイトでは、毎月、コーディングにまつわるメソドロジーやCFに関するトピックスを記事として掲載しています。
コンテンツの作成方法として、サイト全体で、ISR(incremental static regeneration)の方式を採用しました。
以下は記事更新時にユーザーに提供されるまでのフローになります。

  1. 運用者が記事を更新します。
  2. 記事更新後、一般ユーザーが1回目のアクセスを行います。この時、記事は更新前のキャッシュされた画面(Page_v1)が表示されます。
  3. 1回目のアクセスと同時に、バックグラウンドで更新された記事(Page_v2)をビルドするトリガーが設定されます。
  4. 更新された記事データを取得し、ビルドします。
  5. 更新された記事(Page_v2)をデプロイします。
  6. 一般ユーザーが2回目のアクセスを行います。更新された記事(Page_v2)が表示されます。

実際の運用では、更新した運用者が2回アクセスし、ユーザーの方は更新された記事が表示されている状態を提供しています。

サイトリニューアルの効果

開発体験の向上

今回の構成では、UIなどのサイトの見た目を構成するソースと、記事などの動的データを分けて管理しています。
見た目のソースとデータを分けて管理する事で、UIの変更でWordPressに変更を加える必要がなくなり、お互いを疎結合に保つ事ができ、開発体験が向上しました。

運用効率の向上

ISRの方式にする事によって、即時反映はされないものの、記事の更新や一部動的なデータも柔軟に更新できるようになっています。
慣れ親しんだCMSを使用する事による記事管理の容易さや、Next.jsを使用した共通データの管理により、コンテンツの更新性が格段にあがりました。
また、サイトを更新するたびに、FTPなどで作業者が別途サーバーにアップするなどの作業もなく、安全に本番公開できるようになりました。

画面の表示速度の向上

リニューアルしてから、社内、社外からも「表示速度が早い」という声を頂くことが多くなりました。
Vercel上へデプロイする事により、難しい設定をする事がなく、Vercelが提供するCDNや画像の圧縮の恩恵を受ける事ができ、高速なコンテンツの表示が可能となっています。

VercelのCDNにキャッシュされたコンテンツが配信されるイメージ図

データがあるサーバーに直接アクセスするのではなく、あらかじめコンテンツがキャッシュされたCDNからアクセスしたユーザーに配信されます。

どれぐらいのパフォーマンスがでているのか、Googleが提唱するUXの指標である、core web vitalsのLCP(読み込みのパフォーマンスを測定するための指標)を測定してみました。

PageSpeed Insightsで測定。(他の測定ツールでは違った結果になる場合があります)画像は実際にアクセスしたPCユーザーの統計データに基づいて算出した結果になります。

良好なユーザー体験を提供するために、サイトは Largest Contentful Paint(LCP) を 2.5 秒以下にするように努力する必要があると言われています。
個別レポートやモバイルのレポートでは、パフォーマンスの点で改善点を指摘されているものの、CFサイトは1.3秒の為、ある程度満足のいく結果となっています。


CFサイトのリニューアルに対して使用した技術・運用の構成をご紹介しました。
サイトリニューアルに関わったメンバーの思いはこちらの記事にて公開されていますので、是非ご覧ください。
今回紹介した構成が気になる方は、是非お問い合わせください。

一覧に戻る

CODING FACTORYのWebサイトにご訪問いただき、ありがとうございます!サイトの改善や情報発信に活かすために、個人情報保護方針に基づいたCookieの取得と利用のご同意をお願いいたします!
個人情報保護方針の詳細