WordPressからmicroCMS + Next.jsに移行しコスト削減

2024/07/12に公開

2024/09/18

 はじめに住宅建築に関する部品を紹介するWebサービスを運営する中で、レンタルサーバー上のWordPressのパフォーマンスに課題がありました。サーバースペックを増強してもレスポンスが改善されず、コストが増大していました。そこで、Next.jsのStatic Site Generation（SSG）を活用し、高速なページ表示とサーバー負荷の軽減を実現しつつ、microCMSを採用することで管理業務の負荷も削減しました。本記事では、その移行プロセスについて紹介します。
 導入前の課題移行前の環境では以下のような課題がありました。
WordPressの管理画面の動作が遅く、部品登録の作業効率が悪い
レスポンス改善のためサーバースペックを増強しても効果が限定的
運用コストが増大しており、長期的な負担が懸念
 支援内容弊社では、以下のような移行プロセスを実施しました。
 1. 技術選定フレームワークの選定: 高速化とメンテナンス性を考慮し、Next.jsを採用
インフラの選定: 運用コストやパフォーマンスを踏まえ、最終的にAWSに決定
 2. Next.js + microCMS への移行Next.jsの導入: Static Site Generation（SSG）を活用し、静的ファイルを生成することでページの読み込み速度を大幅に向上
microCMSの採用: WordPressの管理画面に比べ直感的なUIを提供し、部品登録の負荷を軽減
APIベースのデータ取得: 必要なデータのみを取得し、動的な部分も最小限の負荷で運用可能に
 3. パフォーマンス最適化とコスト削減サーバーレス構成: サーバー不要のSSGにより、インフラコストを大幅削減
CDN活用: 生成した静的ファイルをCDNにキャッシュし、高速なレスポンスを実現
運用負荷の低減: microCMSの導入により、管理業務を効率化し、編集作業をスムーズに
 Next.js + microCMSの導入メリット 1. 高速なページ表示Next.jsのSSGを活用することで、事前に静的ファイルを生成し、レンダリング負荷を軽減しました。その結果、ページの表示速度が向上し、ユーザー体験が改善されました。
 2. サーバーコストの大幅削減WordPressのレンタルサーバーでは高スペックが必要でしたが、Next.jsに移行することで、静的サイトとしてホスティングが可能になり、月額費用を大幅に削減できました。
 3. 管理画面の利便性向上microCMSの導入により、部品登録の作業が簡単になり、運用の負荷が軽減されました。直感的なUIとAPI連携の柔軟性により、運営者の負担を大幅に減らすことができました。
 スケジュール・移行期間1ヶ月目: 課題の整理、移行計画の策定
2〜3ヶ月目: Next.js + microCMSの導入、データ移行
4ヶ月目以降: 運用改善とパフォーマンス最適化
WordPressからNext.js + microCMSに移行することで、コスト削減とパフォーマンス向上を両立し、運用負荷も軽減することができました。今後も、さらなる最適化を進めていきます。