DockerでWordPress開発環境構築

WordPress開発環境はXAMPP/MAMP、Local by FlywheelやDockerがあります。

Dockerでは環境の統一（OS、PHP、MySQL、Apacheや設定ファイル）ができるので、チーム開発では非常に有効です。

またWordPressの公式のDockerイメージを使用し、docker-compose upで一発で開発環境セットアップ、起動が可能です

Contents

1 開発環境構築手順
- 1.1 volumes有効化手順について
2 WSL2でWordPressテーマ開発環境を構築する手順

開発環境構築手順

docker-compose.ymlは複数のコンテナを一括管理する設定ファイルです。今回はMySQL（データベース）とWordPress（Webサーバー）の2つのサービスを定義し、docker-compose upで一発起動できます。

Dockerfileは使わない理由は、WordPressとMySQLの公式イメージをそのまま使用するためです。

カスタマイズが不要なので、既存イメージで十分です

作業ディレクトリ（フォルダ）を作成します
その中にdocker-compose.ymlを作成

services:
  db:
    image: mysql:8.0
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - "8080:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wordpress:/var/www/html

      # 開発テーマ以外は同期せずコピー（表示早くなります、快適）
      # - ./wordpress/wp/wp-content/themes:/var/www/html/wp/wp-content/themes

      # debug.logはバインドマウント（エラーログ見たいとき）
      # - ./wordpress/wp/wp-content/debug.log:/var/www/html/wp/wp-content/debug.log

volumes:
  db_data:

docker-compose up -dでコマンドを立ち上げます

volumes有効化手順について

全体バインドマウント → 部分的バインドマウントへの切り替え

全体バインドマウント

wordpress:
  volumes:
    - ./wordpress:/var/www/html

docker-compose up -d

docker-compose.ymlを編集（コンテナは動いたまま）

wordpress:
  volumes:
    # 全体マウント（コメントアウト）
    # - ./wordpress:/var/www/html
    
    # 部分マウント（コメントを外す）
    - ./wordpress/wp-content/themes:/var/www/html/wp-content/themes
    - ./wordpress/wp-content/uploads:/var/www/html/wp-content/uploads

docker-compose up -d

WSL2でWordPressテーマ開発環境を構築する手順

WSL2での環境構築で開発効率が大幅に向上します

WSL2で構築するとLinuxに近い環境をWindows上で構築できます

→デプロイ先の環境に近い、Linuxコマンドが使える

WSL2はDocker Desktopと統合されていて、Linuxカーネル上でDockerが動いてるため、volume/bind mountが高速に動作します

bind mountのPermissionが難しい

Windowsと違いLinuxでは所有者/グループ、書き込み権限が厳格です

そのため正しく設定しないと「Permission denied」となり権限のエラーがおきて環境構築できないことになります。

手順

WSL2の作業ディレクトリに移動

cd ~/dev/wp-theme-dev

docker-compose.yml .envファイルを作成

services:
  db:
    image: mysql:8.0
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    volumes:
      - db_data:/var/lib/mysql

  wordpress:
    image: wordpress:latest
    depends_on:
      - db
    ports:
      - "8080:80"
    restart: always
    user: "${UID}:${GID}"
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
    volumes:
      - ./wordpress:/var/www/html

volumes:
  db_data:

コンテナ内で全プロセスを uid=33、gid=33 のユーザーで実行するよう指定

WordPressコンテナの中で実行されてるプロセスのユーザがwww-data（UID=33）で動くのが標準のため合わせます

UID=33
GID=33

ホストの ./wordpress を 33:33 所有にする

sudo chown -R 33:33 ./wordpress

ただし、一部だけ開発者用に編集したい＝子テーマとかは自分に戻す

sudo chown -R $(id -u):$(id -g) ./wordpress/wp-content/themes/twentysixteen-child

上記のようにしておかないと、テーマ内のものにアクセスができない

Dockerコンテナ起動（docker compose up -d）

（注意）管理画面からテーマの追加はできない

ホスト側の ./wordpress/wp-content/themes は bind mountとなってます

そしてホストの所有者は yourname:yourname（UID=1000）でだけどコンテナ内はおそらく www-data（UID=33）で動いてるため書き込みができません。

そのため代替方法として、ホスト側でzipファイルを添加してエクスプローラーでいれたり、Gitクローンしたりする必要があります

有効化自体は管理画面上から可能です

エラーログの確認方法

WordPressのデバッグログ（WP_DEBUG_LOG）は、デフォルトでは /wp-content/debug.log に出力されます

ですが、wp-config.phpに下記のように設定してもログファイルが確認できません

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);

なぜならphpinfo();で確認してみるとわかるのですが、標準エラー出力となってます

Directive	Local Value	Master Value
error_log	/dev/stderr	/dev/stderr

そして、Dockerコンテナの場合、エラーログの出力先はコンテナの標準出力のみでログファイルは生成されません

エラーログの出力先（環境別）

環境	`/dev/stderr` の実際の出力先
レンタルサーバー	サーバーのエラーログファイル（例：/var/log/apache2/error.log、/var/log/nginx/error.log）
ローカルDockerコンテナ	コンテナの標準出力（docker logs [コンテナ名]で確認可能）
XAMPP/MAMP	アプリケーションのエラーログ（例：xampp/apache/logs/error.log）
本番サーバー（Linux）	システムのエラーログ（/var/log/apache2/error.logなど）
開発サーバー（php -S）	ターミナルに直接表示

コンテナの標準出力ではなく、ログファイルを生成したい場合は、error_log を debug.log に明示し、iniファイルで上書きする必要があります。

zz-log.ini（docker-compose.ymlと同じ階層にしました）

; ログファイルのパスを指定
error_log = /var/www/html/wp-content/debug.log

zz-log.iniをコンテナ側にもマウント、WORDPRESS_DEBUGについての記述も（wp-config.phpで

services:

...
    
  wordpress:

...

    environment:

...

      WORDPRESS_DEBUG: "true"
    volumes:
      - ./wordpress:/var/www/html
      - ./zz-log.ini:/usr/local/etc/php/conf.d/zz-log.ini

参考）PHP公式Dockerイメージ

/usr/local/etc/php/
├── php.ini               ← メイン設定（編集非推奨）
└── conf.d/
    ├── 10-mysqli.ini
    ├── 20-opcache.ini
    └── zz-log.ini        ← 追加（最後に読み込まれる）