1 functions.phpの設定

前回までで作成したディレクトリ構造

headless-wordpress/
├── frontend-next/
├── backend-wp/
│   └── my-theme/
│       ├── index.php
│       ├── functions.php
│       └── style.css
└── docker/
    ├── development/
    │   ├── Dockerfile
    │   └── docker-compose.yml
    └── production/
        ├── Dockerfile
        └── docker-compose.yml

前回も書きましたがfrontend-nextはyarn create next-appで作成したものです。

それでは上から順番にまずはbackend-wp/functions.phpファイルにキャッチアップ画像をアップロードできるようにする設定を書いていきます。

backend-wp/my-theme/functions.php~

<?php

// アイキャッチ画像を有効化
add_theme_support('post-thumbnails');

phpの閉じタグは必要ないようです。これだけでキャッチアップ画像をアップロードできるようになります。

2 Dockerfile作成

./docker/development/Dockerfile~

FROM node:18-alpine

WORKDIR /app

COPY ../../frontend-next/package.json ../../frontend-next/yarn.lock ./

RUN yarn install

COPY ../../frontend-next/ .

EXPOSE 3000

3 docker-compose.yml作成

webサーバーにはssl化を簡単にやってくれるhttps-portalを使用していますがその際、localhost.netのような通常のドメイン名の形にしないといけないようなのでローカルマシンの/etc/hostsファイルに次の設定を加えておきます。

127.0.0.1	localhost.net
127.0.0.1	wp.localhost.net

次にdocker-compose.ymlファイルの作成。

./docker/development/docker-compose.yml~

---
services:
  https-portal:
    image: steveltn/https-portal:latest
    container_name: https-portal
    environment:
      WEBSOCKET: "true"
      DOMAINS: "localhost.net -> http://frontend-next:3000, wp.localhost.net -> http://backend-wp:80"
      STAGE: local
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - https_portal_data:/var/lib/https-portal
    restart: always

  db:
    image: mariadb:latest
    container_name: db
    environment:
      MYSQL_ROOT_PASSWORD: root_password
      MYSQL_DATABASE: wp_db
      MYSQL_USER: wp_user
      MYSQL_PASSWORD: wp_password
    volumes:
      - db_data:/var/lib/mysql
    restart: always

  backend-wp:
    depends_on:
      - db
    image: wordpress:latest
    container_name: backend-wp
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_NAME: wp_db
      WORDPRESS_DB_USER: wp_user
      WORDPRESS_DB_PASSWORD: wp_password
    ports:
      - "8080:80"
    volumes:
      - ../../backend-wp/my-theme:/var/www/html/wp-content/themes/my-theme
      - wordpress_data:/var/www/html
    restart: always

  frontend-next:
    container_name: frontend-next
    build:
      context: ../../
      dockerfile: docker/development/Dockerfile
    ports:
      - "3000:3000"
    environment:
      - WATCHPACK_POLLING=true
    volumes:
      - ../../frontend-next:/app
      - ../../frontend-next/node_modules:/app/node_modules
    command: sh -c "yarn dev"
    # command: sh -c "yarn build && yarn start"
    restart: always

volumes:
  https_portal_data:
  db_data:
  wordpress_data:

https-portalの WEBSOCKET: “true”とfrontend-nextのWATCHPACK_POLLING=trueはホットリロードの為、あと自分はlinux環境(arch linux)ですが、macの場合

DOMAINS: “localhost.net -> http://frontend-next:3000, wp.localhost.net -> http://backend-wp:80”

の部分を

DOMAINS: “localhost.net -> http://host.docker.internal:3000, wp.localhost.net -> http://host.docker.internal:8080”

といった書き方にしたほうがいいかもしれません。

command: sh -c “yarn build && yarn start”はビルドテスト用。

4 コンテナの立ち上げ

Dockerfile, docker-compose.ymlが作成できたら、早速コンテナを立ち上げてみます。

./docker/development~

docker compose up -d

立ち上がったら

docker ps -a

としてそれぞれのコンテナが問題なく動いていることを確認

docker logs frontend-next

としてnextjsおなじみの起動画面が表示されているのを確認したら、ブラウザからhttps://localhost.netとしてアクセスしてみます。

https-portalのSTAGEをlocalとした場合、Let’s encryptによる正式のssl証明書ではなく、いわば仮の自己証明書なのでブラウザから警告が表示されますが「詳細設定」をクリック〜「localhost.netにアクセスする」をクリックしてアクセスを許可します。

ブラウザにnextjsのオープニング画面が表示されたら無事成功です。

次にhttps://wp.localhost.net/wp-adminとしてwordpressの初期画面が表示されたらこちらも成功、もしうまく行かない場合はコンソールで

docker logs frontend-next

docker logs backend-wp

などとしてログを表示、エラーが出ていないか確認してみましょう。