Docker+WordPress+PhpStormでXdebugを使う手順

小林

2021.09.01

前回は、こちらの記事でDocker + WordPress + Xdebugな環境を作りました。

今回は、そこからさらにPhpStormでステップデバッグを実行できるようにしていきます。

Docker + WordPress + Xdebugの準備
PhpStormの準備
ステップデバッグの実行
- ステップデバッグをトリガーする

Docker + WordPress + Xdebugの準備

はじめに、前回のDockerfileに少し手を加え、Xdebugの設定ファイルを利用できるようにします。なお、今回からはdocker-composeを利用していきますので、まずはディレクトリ構造を下記のように準備してください。PhpStormでプロジェクトを作成し、以下のようにファイルとディレクトリを用意します。

Directories

続いてxdebug.iniの中身です。

#xdebug.ini

zend_extension=xdebug

# Xdebugをどのモードで動かすか？
# ※これはプロセス起動時のみ設定可能なのでここでしか指定できません。
# 初期値はdevelop
xdebug.mode=debug

# どのタイミングでXdebugを利用できるようにするか？
# 初期値はxdebug.modeに依存
xdebug.start_with_request=trigger

ここでの設定は2つだけです。

xdebug.modeは、前回少し触れましたが、Xdebugの動作モードの指定です。これはプロセス起動時のみ指定可能な項目なので、設定ファイルに明記しておく必要があります。ここでdebugを指定することによりステップデバッグが実行できるようになります。

xdebug.start_with_requestは、どのタイミングでXdebugを実行するかの設定です。初期値はxdebug.modeに依存しており、xdebug.mode=debugであればtriggerになるのですが、わかりやすいように明示しています。triggerを指定することにより、ステップデバッグを開始するタイミングを任意でトリガーできるようになります。

次にDockerfileです。これは前回のDockerfileに、xdebug.iniファイルを利用する記述を追加するだけになります。

#Dockerfile
FROM wordpress:5.7-php7.4-apache

RUN pecl install xdebug \
    && docker-php-ext-enable xdebug

# xdeugの設定にxdebug.iniを利用
COPY xdebug.ini /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini

CMD ["apache2-foreground"]

そして、このDockerfileを利用するdocker-compose.ymlです。

version: '3'

services:
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
  wordpress:
    depends_on:
      - db
    build:
      context: ./docker/wordpress
      dockerfile: Dockerfile
    ports:
      - "80:80"
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      XDEBUG_CONFIG: client_host=host.docker.internal
      PHP_IDE_CONFIG: serverName=docker
    volumes:
      - ./wordpress:/var/www/html

基本的にはWordPressのdockerイメージを利用する場合と変わりませんが、二箇所ほどPhpStormからXdebugを操作するための設定があります。wordpressサービスのenvironmentにある、XDEBUG_CONFIGとPHP_IDE_CONFIGです。

XDEBUG_CONFIGはXdebugがステップバッグを実行する場合に接続するクライアントの場所になります。これが今回はホストマシン上のPhpStormになるため、ホスト名であるhost.docker.internalを指定しています。

PHP_IDE_CONFIGは、コンテナがステップデバッグのリクエストをクライアントに行う際に一緒に送信するサーバー名です。PhpStormはこのサーバー名を確認して、どこからのステップデバッグリクエストかを判断します。今回はdockerとしているので、後ほどPhpStormの設定でこの値を利用します。

準備ができたらdocker-compose upで、コンテナを起動します。初回起動で、ボリュームに指定したwordpress/ディレクトリ配下にWordPressのファイルが一式展開されます。

最後に、ブラウザから http://localhost にアクセスし、WordPressをインストールしておきます。これで、Docker + WordPress + Xdebugの準備は完了です。

PhpStormの準備

Xdebugがステップデバッグのリクエストをクライアントに行う際のポート番号の設定であるxdebug.client_portの初期値は9003です。まずは、PreferencesでXdebugを検索し、XdebugのDebug portに、9003があることを確認します。

次に、Run/Debug Configurationsを新しく作成し、PHP Web Pageを選択し、適当にNameを入力します。

サーバーは、設定がまだないので、ここで新しく作ります。この時の名前は、先ほどdocker-compose.ymlで指定したPHP_IDE_CONFIGのサーバー名と揃える必要があります。今回のケースではdockerです。Hostはlocalhost。パスマッピングは、このディレクトリ構造だと、wordpress:var/www/htmlになります。