さくらのレンタルサーバー上にWordPressとNextJsでJamstackな技術ブログを構築

はじめまして、ねづたけるです。

技術ブログ最初の投稿は、「このブログをどのように構築したのか」にします。

ブログ構築は何度も経験をしているのですが、WordPressについては5.0のグーテンベルク（ブロックエディタ）が出たくらいから止まっています笑

当時WPをいじっていた頃から、技術力も上がり、それっぽい構成でもブログ構築できそうだなと思ったので、それっぽい構成で皆さんのブログ構築の参考になればと思います。

前提

それっぽい構成といいつつ、インフラについては、普通にレンタルサーバを想定しています。

僕が、すでにさくらのレンタルサーバを契約しているのでそれにあいのりしたいからです。
ちなみに、さくらのレンタルサーバは神がかってるレンタルサーバで、スタンププランが毎月500円くらいで、無料でDBも何個も立ち上げられます。個人開発や練習としては本当に神なので、皆さんどうぞ使ってみてください。

さくらのレンタルサーバだけで記事かけちゃうくらいすごいんです。

ただ、さくらのレンタルサーバにもデメリットはあります。

それは、サーバーサイドの言語として使用できる言語に限りがあるということです。

さくらのレンタルサーバでなんの設定もなく利用できるのは、PHPのみです。
したがって、どれだけそれっぽい構成にしたくても、サーバーサイドはPHPという縛りがあります。
原則PHPしか動かせないので、NextjsのSSRとかも実装できないです。

そこで、WordPressをGraphQLのAPIとして運用し、NextJsでSSGを利用してJamstackにブログ構築をします。

Jamstack構成なら、サーバーサイドの言語関係なく配信できちゃいます。

1. さくらのレンタルサーバにWPをホスティングしておく

まずはじめに、さくらのレンタルサーバでDBを作成し、データベース名、ユーザー名、パスワードを取得してメモしておきましょう。

次に、WPのソースコードを展開します。

さくらのレンタルサーバにSSHで接続して、以下のコマンドを実行していきます。

cd ~/www
wget https://ja.wordpress.org/latest-ja.zip
unzip latest-ja.zip
mv wordpress/ hogehoge/

hogehogeには、今回作成するブログの英語名等を入れておいてください。

さくらのレンタルサーバ側で設定したURLにアクセスして、WPの初回セットアップを完了させてください。

この際に、先程メモしたDB接続情報が必要になります。

ダッシュボードへの接続が完了したら、便利なので以下のプラグインを入れておいてください。

• WP GraphQL

Reactとの情報連携時に利用します。

!!注意!!

環境によるかもしれませんが、WP GraphQLが以下の条件でエラーになります。

• 表示言語 → 日本語

問題なければ、日本語のままでも良いですが、エラーでうまくWP GraphQLが動作しない場合は、表示言語を英語に変更してみてください。

2. ローカルでNextJsの環境を構築する

これで、WPのAPI環境が構築できました。次に、NextJSの環境をローカルに構築して、フロント側の実装を進めていきます。

Dockerを構築（スキップ可）

どんな環境でも開発できるように、まず、Docker環境を構築します。

必ずしも必須ではないので、必要な方のみ構築してください。

Dockerを導入する場合、プロジェクトの構成を以下のようにします。

• プロジェクトルート（サイトの英語名）
  • appディレクトリ
    • nextjsのソースコード
  • docker-compose.yaml
  • Dockerfile

docker-compose.yaml、Dockerfileは以下のようにしてください。

services:
  app:
    container_name: app
    build:
      context: ./
    ports:
      - '3300:3000'
    volumes:
      - ./app:/var/www/app
    command: tail -f /dev/null

FROM node:16-alpine

RUN apk update && npm install -g npm@9.3.1

WORKDIR /var/www/app

上記の２ファイルを作成して、upすれば、nodeが構築済みのコンテナが立ち上がります。

次に、立ち上げたコンテナ内で以下のコマンドを実行してプロジェクトを作成します。

npx create-react-app my-app --template typescript
mv my-app/* ./
rm -rf my-app

WORKDIRで、/var/www/appを指定しているため、コンテナのコンソールに入ると、初期で/var/www/appにいると思います。

/var/www/appの直下にプロジェクトを展開したいため、上記のようにディレクトリを移動しています。

3. Github Actionsを設定する