
などの疑問や悩みを解決してまいります。
開発環境を構築する上でデバッグ機能は必須です。
今回はWordPress環境をDocker×Xdebugで構築する方法を解説します。
WordPress×Dockerの開発環境の構築手順は以下記事よりご確認ください!
本記事では、WordPress×Dockerの開発環境の構築手順についての内容は省略しています。
-
-
【WordPress×Docker】開発環境構築手順を解説
続きを見る
本記事の目次
完成例
最初に各ファイルの内容とディレクトリ構成を紹介します。
ディレクトリ構成
├── .vscode
│ └── launch.json
├── docker
│ ├── mysql
│ │ └── Dockerfile
│ └── wordpress
│ ├── Dockerfile
│ └── xdebug.ini
├── docker-compose.yml
└── wordpress // WordPressのディレクトリが格納
/.vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9013,
"hostname": "localhost",
"pathMappings": {
"/var/www/html": "${workspaceFolder}/wordpress"
}
}
]
}
docker-compose.yml
version: "3.7"
services:
mysql:
container_name: mysql_local
build:
context: ./docker/mysql
restart: always
ports:
- "3310:3306"
environment:
MYSQL_DATABASE: wordpress_db
MYSQL_ROOT_PASSWORD: password
MYSQL_USER: wordpress_db_user
MYSQL_PASSWORD: password
wordpress:
container_name: wordpress_local
build:
context: ./docker/wordpress
restart: always
depends_on:
- mysql
ports:
- 10081:80
environment:
WORDPRESS_DB_HOST: mysql_local:3306
WORDPRESS_DB_USER: wordpress_db_user
WORDPRESS_DB_PASSWORD: password
WORDPRESS_DB_NAME: wordpress_db
WORDPRESS_DEBUG: 1
volumes:
- ./wordpress:/var/www/html
/docker/mysql/Dockerfile
FROM mysql:8.0 // ※バージョンは要件に合わせ変更してください
/docker/wordpress/Dockerfile
FROM wordpress:latest // ※バージョンは要件に合わせ変更してください
ENV PHP_IDE_CONFIG="serverName=wordpress_local"
RUN pecl install xdebug && docker-php-ext-enable xdebug
COPY ./xdebug.ini /usr/local/etc/php/conf.d/
/docker/wordpress/xdebug.ini
[xdebug]
xdebug.idekey = "wordpress_local"
xdebug.client_host = host.docker.internal
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.discover_client_host = 0
xdebug.remote_handler = "dbgp"
xdebug.client_port = 9013
xdebug.log = /var/log/xdebug.log
Docker起動
docker-compose up -d // docker-composeの起動
// 実行結果
Starting mysql_local ... done
Starting wordpress_local ... done
http://localhost:10081/ にアクセスしましょう。以下のように使用言語を選択する画面に遷移しますので「日本語」を選択してください。

次に必要情報を入力していきます。

設定後は以下の画面に遷移したら構築完了となります。

次にXdebugが正常に動作されるか確認します。まず有効となっているテーマのトップページにアクセスする際に実行される任意のコードにブレークポイントを設定します。(例ではtwentytwentyfiveテーマのfunctions.php内のスタイル読み込み処理にブレーキポイントを設定しています。)

サイドメニューの「実行とデバッグ」を押下し、launch.jsonに記述した「Listen for Xdebug」の▷ボタンを押下してください。するとデバッグが開始されます。

デバッグが開始されている状態でトップページにアクセスしてください。ブレークポイントを設定した箇所で処理が以下のように止まります。このような状態になればXdebugは正常に動作していることになります。


コード解説
それでは、開発環境構築に至るまでの手順について解説していきます。
WordPress×Dockerの開発環境の構築手順は以下記事よりご確認ください!
本記事では、WordPress×Dockerの開発環境の構築手順についての内容は省略しています。
-
-
【WordPress×Docker】開発環境構築手順を解説
続きを見る

Dockerfileの修正
元々WordPress側のDockerfileにはイメージの指定しか記述がありませんでしたが、Xdebugを導入するにあたって一部コードが追記されています。
# WordPressの公式最新イメージをベースに使用
FROM wordpress:latest
# PHPStormなどのIDEでXdebugを利用するための設定
# serverNameには、IDEの設定と一致する名前を指定する
ENV PHP_IDE_CONFIG="serverName=wordpress_local"
# Xdebugをインストールし、有効化する
RUN pecl install xdebug && docker-php-ext-enable xdebug
# ローカルのxdebug.ini設定ファイルをコンテナ内の適切なディレクトリにコピー
COPY ./xdebug.ini /usr/local/etc/php/conf.d/
xdebug.iniを作成
xdebug.iniは、Xdebugの設定ファイルです。このファイルを使用して、Xdebugの動作をカスタマイズできます。
[xdebug] ; Xdebugの設定セクション
xdebug.idekey = "wordpress_local"
; IDEとの接続に使用する識別キー(PHPStormなどのIDEと一致させる)
xdebug.client_host = host.docker.internal
; Xdebugのクライアント(デバッガーを実行するIDE)のホストを指定
; "host.docker.internal" はDockerコンテナからホストマシンを指す特別な値(Mac/Windowsで使用可能)
xdebug.mode = debug
; Xdebugの動作モードを指定(debugはリモートデバッグを有効化)
xdebug.start_with_request = yes
; PHPのリクエストが発生したら自動的にXdebugを開始する
xdebug.discover_client_host = 0
; クライアントのホストを自動検出しない(明示的に `xdebug.client_host` を使用)
xdebug.remote_handler = "dbgp"
; Xdebugが使用するプロトコルを指定(DBGPはデフォルトのデバッグプロトコル)
xdebug.client_port = 9013
; IDEと接続するXdebugのポート番号(IDE側も同じポートをリスンする必要がある)
xdebug.log = /var/log/xdebug.log
; Xdebugのログファイルを指定(デバッグ時に役立つ)
launch.json
launch.jsonは、VSCodeでデバッグ設定を管理するための構成ファイルです。.vscodeフォルダに保存されます。
{
"version": "0.2.0", // 設定ファイルのバージョン
"configurations": [
{
"name": "Listen for Xdebug", // デバッグ構成の名前(任意)
"type": "php", // デバッグ対象の言語(PHP)
"request": "launch", // デバッグのリクエストタイプ(Xdebugをリッスン)
"port": 9013, // Xdebugが接続するポート(xdebug.client_portと一致させる)
"hostname": "localhost", // Xdebugをリッスンするホスト名(通常はlocalhost)
"pathMappings": {
"/var/www/html": "${workspaceFolder}/wordpress"
// コンテナ内のPHPファイルのパスとローカルのプロジェクトフォルダを対応付ける
// "/var/www/html" はコンテナ内のWordPressディレクトリ
// "${workspaceFolder}/wordpress" はローカルのWordPressフォルダ
}
}
]
}
まとめ
ここまで読んでいただきありがとうございました。
本記事では、WordPress×Docker×Xdebugを用いた環境構築の手順を解説しました。
WordPress×Dockerの環境構築の手順は以前解説していましたので、Xdebugの導入がメインとなりました。
開発環境においてデバッグはもはや必須級ですので、ぜひこの記事を参考に開発環境にXdebugを導入してみてはいかがでしょうか。