【WordPress×Docker×Xdebug】開発環境構築する手順

なやむくん

WordPressの開発環境をDockerで構築し、かつデバッグ機能も実装したい…。

などの疑問や悩みを解決してまいります。

開発環境を構築する上でデバッグ機能は必須です。

今回はWordPress環境をDocker×Xdebugで構築する方法を解説します。

WordPress×Dockerの開発環境の構築手順は以下記事よりご確認ください！
本記事では、WordPress×Dockerの開発環境の構築手順についての内容は省略しています。

: 【WordPress×Docker】開発環境構築手順を解説

続きを見る

本記事の目次

1 完成例
2 コード解説
3 まとめ

完成例

最初に各ファイルの内容とディレクトリ構成を紹介します。

ディレクトリ構成

├── .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】開発環境構築手順を解説

続きを見る

みつた

本記事では、追加されたXdebugを中心に解説していきます！

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フォルダ
      }
    }
  ]
}