WordPressで構築されたWebサイトをNext.jsを利用したJAMStack構成に移行

概要

WordPressで構築されていたWebサイトの訪問者側をNext.jsに置き換えました。依頼主企業様の従業員の方々がWordPressの利用に慣れていたため、そのままヘッドレスCMSとして利用する構成としました。

対象のビジネス

• toC向け月額制オンラインサービス
• 従業員数10名未満

目的

Webマーケティングを強化するために、まずは開発面の生産性を上げることを目的としました。

具体的には、WordPressでサイト全体を構築していた状態で発生していた以下の不都合の解消を目指しました。

• データベースへのアクセスが多く、サイト全体のパフォーマンスが低下していた
• 前任者に属人化した実装方針で書かれたコードが多く、理解に時間がかかっていた
• ソースコードを自動でチェックしたり、自動で本番環境に公開したりする仕組みが整っておらず、削減可能な人件費があった
• ソースコードを解析し、実装の不備を自動的に発見・修正する体制がなかった
• ユーザーの操作に応じて動作するUIを効率的に構築する体制が整っていなかった
• システムのエラーを監視する体制がなく、不具合発生から修正までの時間が長くかかっていた

弊社から複数名が参加する形で継続的に関わる形となったため、品質を担保する目的で自動化やコード解析の優先度も高めに設定しました。

実施作業

1. 現状のサイト構造の把握
   • 既存のサイトについて存在しているページや機能を調査して把握しました。
2. Next.js版のサイトを構築
   • 既存のサイトから、移行のタイミングで削除するページや機能を除いた部分をNext.jsで再実装しました。
3. エラー監視ツールのセットアップ
   • システムで発生したエラーを検知し、メールやSlackで通知する体制を構築しました。
4. 訪問者側のインフラの構築
   • Next.jsを開発しているVercel社が提供するホスティングサービス「Vercel」を設定しました。
5. 既存系統を運営者側（CMS）と訪問者側に分離
   • システムが2系統からなる構成になるため、既存の構成からの移行作業を行いました。

システムの構成

変更前のアーキテクチャー

クリックして拡大表示タップして拡大表示

変更後のアーキテクチャー

クリックして拡大表示タップして拡大表示

本支援の結果

コード量が多く、かつ比較的一般化した実装規約（Webアプリケーションフレームワークなど）が利用されていなかった旧システムに比べ、開発効率が大幅に向上しました。ソースコードの静的解析体制が整ったことで、複数名で開発に参加してもコードレビューのための時間を最低限に抑えることができました。さらに、長い歴史があり、機能も多いWordPressを運営者側のみで使う形に変更したことにより、訪問者側の開発要員の確保がしやすくなりました。

また、キャッシュ機能に優れたNext.jsを使ったサイトとなったため、全体的なパフォーマンスが向上しました。