ホストのWordPressをDocker+NGINX+WSL2上で動かす

はじめに

2020年に PJ 内で実現したい機能が WordPress で使えるかどうか確認するため、Windows のホストにインストールしたのですが、PC を修理に出して環境が消えたので、環境作成がてら Docker 化することにします
本当は 1週間後の IPA の応用情報技術者試験の勉強から逃げたくなったからですが

バージョン

• docker desktop
  • 4.0.1
• Windows 11 Pro
• Ubuntu
  • 20.04.2 LTS

前提

• Docker で WSL2 の設定が済んでいること
• 以下のリンクから WordPress のダウンロードが済んでいること

https://ja.wordpress.org/download/#download-install

• WSL2 （Ubuntu）上に展開済であること
  • Windwos 上にダウンロードした上記リンクのファイルすべてをgit pushして、WSL2 内でgit cloneする等で

環境は Docker + NGINX + WSL2 とします
今回紹介するソースは、以下のリポジトリにあります

https://github.com/q23isline/wordpress

手順

1．./docker-compose.yml作成

./docker-compose.yml

version: '3.5'

networks:
  frontend:
    driver: bridge
    ipam:
      driver: default
      config:
        # IP アドレス固定化のため、サブネット指定（backend も）
        - subnet: 192.168.0.0/24
  backend:
    driver: bridge
    ipam:
      driver: default
      config:
        - subnet: 192.168.10.0/24
volumes:
  db-data:
    driver: local
services:
  web:
    image: nginx:1.17-alpine
    container_name: web
    ports:
      - 80:80
    volumes:
      - ./docker/local/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./:/var/www/html
    networks:
      frontend:
        # IP アドレス固定化
        ipv4_address: 192.168.0.10
      backend:
        ipv4_address: 192.168.10.11
    depends_on:
      - db
  app:
    # <https://hub.docker.com/_/wordpress?tab=tags&page=1&ordering=last_updated>
    # Docker Hub で、ダウンロードした WordPress と一致するバージョンを TAG 検索して
    # image キーの値に指定
    image: wordpress:5.8.1-php8.0-fpm
    container_name: app
    volumes:
      - ./:/var/www/html
    networks:
      - backend
    extra_hosts:
      # WordPress のプラグイン等の更新にエラーが出ないよう localhost の名前解決
      # backend と同じ IP アドレスを指定
      - localhost:192.168.10.11
    depends_on:
      - db
  db:
    build: ./docker/local/mysql
    container_name: db
    ports:
      - 3306:3306
    environment:
      - MYSQL_DATABASE=wordpress
      - MYSQL_USER=default
      - MYSQL_PASSWORD=secret
      - MYSQL_ROOT_PASSWORD=root
    volumes:
      - db-data:/var/lib/mysql
    networks:
      - backend

2．./docker/local/nginx/default.conf作成

./docker/local/nginx/default.conf

server {
    listen 80;
    listen [::]:80;
    server_name _;

    root  /var/www/html;
    index index.php;

    access_log /var/log/nginx/access.log;
    error_log  /var/log/nginx/error.log;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        try_files $uri =404;
        include fastcgi_params;
        # コンテナ名:ポート番号
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        fastcgi_intercept_errors on;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
}

3．./docker/local/mysql/Dockerfile作成

./docker/local/mysql/Dockerfile

FROM mysql:5.7

ADD ./etc-mysql.cnf /etc/mysql/conf.d/etc-mysql.cnf

RUN apt-get update

RUN apt-get install -y tzdata && \
    cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime && \
    chmod 644 /etc/mysql/conf.d/etc-mysql.cnf

4．./docker/local/mysql/etc-mysql.cnf作成

./docker/local/mysql/etc-mysql.cnf

[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_general_ci

[client]
default-character-set=utf8mb4

5．Dockerコンテナ立ち上げ

docker-compose build
docker-compose up -d

6．WSL2 のファイル・ディレクトリのパーミッション解決

• 本番環境でこの権限設定はダメだが、ひとまず開発できるようにする

# WSL2 上で WordPress を展開したユーザーを www-data グループに追加
# この環境での WordPress は www-data グループ・ユーザーによって
# ファイルアップロードやログ出力、アップデートを行うため
sudo usermod -aG www-data ｛※WSL2 のユーザー｝
# WordPress 本体を WordPress 自身で更新できるようにグループ変更
sudo chgrp -R www-data ../*
# Wordpress 本体を更新できるようにオーナーを変更
sudo chown www-data wp-admin/includes/file.php
# WordPress 本体を更新できるように書き込み可能とする
sudo chmod g+w -R ../*

7．画面にアクセスし初期設定

1．画面にアクセス

• http://localhost

2．データベース設定入力

項目名	入力値	備考
データベース名	wordpress	手順1の db の environment の設定
ユーザー名	root
パスワード	root	手順1の db の environment の設定
データベースのホスト名	db	手順1の db の container_name

3．その後の初期設定は画面に従って よしなに入力
4．ログインできれば、管理画面のサイドメニュー「ツール > サイトヘルス」にアクセス
5．更新しなさい以外の致命的な問題がなければ完了

おわりに

昔コミットしていた WordPress でバージョンがやや古かったため、ついでに最新にアップデートしましたが、やたらpermission deniedで苦しかったです
困ったら 手順6 の下 3行を実行していました
もっとうまいやり方はないものか。。。
ファイルアップロードや、プラグイン・WordPress の更新による最新化も、WordPress の管理画面から問題なくできたため、よいできかなと思います
この記事が他のエンジニアの助けになれば幸いです
今回対応したリポジトリに、デバッグ実行環境も併せて追加してありますので、よかったら参考にどうぞ（#前提にてリポジトリへのリンクあり）