ホストの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`作成

```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`作成

```nginx:./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:./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`作成

```conf:./docker/local/mysql/etc-mysql.cnf
[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_general_ci

[client]
default-character-set=utf8mb4
```

## 5．Dockerコンテナ立ち上げ

```bash
docker-compose build
docker-compose up -d
```

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

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

```bash
# 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 の管理画面から問題なくできたため、よいできかなと思います
この記事が他のエンジニアの助けになれば幸いです
今回対応したリポジトリに、デバッグ実行環境も併せて追加してありますので、よかったら参考にどうぞ（[#前提](#前提)にてリポジトリへのリンクあり）