Next.js+WP REST API + Amazon S3 の静的配信でWebメディアを作ってみたい

弊社では、これまでホームページ制作はその大半をWordPressを採用して作ってきました。WordPressは、無料や有料のテーマも充実しており、コストを抑えたシンプルなデザインからオリジナルテーマによるデザイン性が高いページまで、高い自由度で制作が可能です。また、プラグインが充実していたり、情報も多いなど、制作を助けてくれるエコシステムも成立しています。

一方で、セキュリティに対するトラブルが時々話題になったり、一度制作したもののテーマやプラグインの更新が滞ってしまうケースも多くあることから、運用まで鑑みた時のベストの選択肢か、は常に懸念している部分でもあります。

そのセキュリティの懸念を軽くする一つの方式として、SSG（Static Site Generation）でWordPressを今後置き換えていく需要が発生するのでは、と考えています。既存のWordPressでブログ等情報発信を継続してきたので、その資産は使いたい。けど、WordPressをそのまま公開し続けるのも不安。ブログ投稿はできるけど、WordPress本体やプラグインの更新管理までは実施できない（更新してデザインが崩れたら復旧できるほどの技術者はいない）。といった中小企業の悩みを、WP REST API でデータを取得しつつ、SSGによる静的ページ生成でJamStack構成を採用することで解決！

今後、WordPressのセキュリティ対策の提案の一つとすることも踏まえて、トライしてみようと思います。

Next.jsで初めてのホームページ制作に挑戦！

今回、弊社で試す環境はこちらです。

• WP REST API（Conoha Wingレンタルサーバー）+ Amazon CloudFront + S3 + Next.js
• 開発環境：Windows11 + VS Code + github

Windowsでの開発も多く実施しており、主に本記事の執筆者である私、高仲はキャリアのほぼ全てがWindowsでしたので、今でもWinPCで頑張っています。

WP REST API を採用する理由は、前述のとおり既存のWordPressの資産をそのまま活用できることが理由の一つにあります。
※もちろん、microCMS などにコンテンツを移行することも選択肢として大いにアリだと思います

配信サイトをS3 + CloudFront とする理由は、開発部分の効率化も考慮して、という点があります。WordPressで契約したレンタルサーバー上に公開することも選択肢にありますが、github actions を使ってデプロイの自動化も試してみたい、との思いからです。

開発環境の準備①もろもろアカウント登録やインストール

• WordPress の環境構築とサンプル投稿の実施
• github のアカウント登録
• Amazon AWS のアカウント登録
• node.js のインストール

これらの細かい内容は割愛します。詳細は、またどこかで記述するかも。

開発環境の準備②Next.js のセットアップ

git と node.js の環境が整ったら、開発環境を作ります。まずはNext App を新規に作りましょう。

npx create-next-app@latest

App Router を使うかどうかは分かりませんが、基本的に全て初期値で問題無いと思います。インストールが終わったら、さっそく試してみましょう。

cd my-app
npm run dev

localhost:3000 にアクセスしてみて、Next.jsの初期画面が表示されればOKです。

空のプロジェクトは、githubにアップロードしておくといいでしょう。のちのち、github actions でAmazon S3 にデプロイを自動化してみたいと思います。

開発環境の準備③WP REST API のテスト

CMS（コンテンツ管理システム）は、著名なサービスですとmicroCMSなどがあります。microCMS、お仕事でも使っているのですが、便利なのですが無料プランのAPI３件までの制限が厳しい…。投稿とカテゴリ・タグのみでAPI３件になってしまうので、それ以上やろうとすると有料プランになってしまいます。

今回のコンセプトとしても、既存のWordPress環境を使っていきながらSSGで静的サイト配信してみよう！という観点で、WordPressの静的化によるセキュリティ対策その他を進めていく、という提案を意識しています。なので、WP REST APIで頑張ってみましょう。

WP REST API は、現在（2024/7：6.6.1）のバージョンでは、何も設定などをいじらずとも初期状態で投稿等のGETが可能です。試しに、下記のURL（ドメイン部分はWordPress環境を構築した内容に置き換えてくださいね）をブラウザのURL欄にいれてみると、JSON文字列形式で投稿データが取得されます。

https://[your-web-site.com]/wp-json/wp/v2/posts

POSTS API のスキーマはこちら。この形式でJSONデータが返却されていれば、WordPressからAPIでデータを取得することが可能です。

なお、レンタルサーバーやWordPress環境の設定によっては、JSONデータが取得できない（404）となったり、npm run dev で localhost では表示できるけどS3にデプロイすると表示できない、とか、Github Actions でビルドすると表示できない、といったケースが生じることがあります。その際は、以下の観点でチェックしてみてください。

• セキュリティ対策プラグイン（SiteGuardなど）が、REST APIを許可していない、やIP Address をブロックしている
• レンタルサーバーのセキュリティの設定に引っかかっている
  （弊社の場合は、ConoHa Wing のWAFの設定でうまくいかない、といったケースがありました）

Next.js のページが表示できて、WP REST API でデータが取得できれば、まずは開発環境は作れた、ということにしたいと思います。（GithubやS3等の設定もあるけど、そちらはまた後日の記事で）

弊社ではホームページの制作について、ご要望に応じた最適な制作方式・運用管理方式をご提案いたします。お困りごとがありましたら、お気軽にお問い合わせください。