1
Help us understand the problem. What are the problem?

posted at

updated at

Wordpressのxdebug環境設定メモ

やりたいこと

Dockerで構築したwordpressを手元のvscodeでデバッグしたい!

筆者の構成

  • Windows10
  • Wordpress (nginx+mysql+php-fpm)

ファイル構成

手元では以下のようなファイル構成にしています。

.
├── cert
│   └── (証明書関連)
├── conf
│   └── default.conf
├── docker
│   └── Dockerfile
├── docker-compose.yml
├── html
│   ├── wp-admin
│   ├── wp-content
│   ├── wp-includes
│   ├── phpinfo.php # 確認用
│   └── (省略)
├── log
│   └── (いろいろログ)
└── php-xdebug.ini

Wordpressの構築

とにもかくにもwordpress立てなきゃ始まらない。
nginx+mysql+php-fpmの構成で立ててます。
https化の設定なども含まれてますが、割愛します。

docker-compose.yml
version: '3'
services:  
  web:
    image: nginx:1.15.3-alpine
    restart: always
    depends_on:
      - wordpress
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./conf/default.conf:/etc/nginx/conf.d/default.conf
      - ./cert:/usr/local/nginx/conf
      - ./log:/var/log/nginx
      - ./html:/var/www/html
    environment:
      - ROOT=/var/www/

  mysql:
    image: mysql:5.7
    ports:
      - "3306:3306"
    volumes:
      - db_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: root
      MYSQL_PASSWORD: wordpress
    command: [
      '--default_authentication_plugin=mysql_native_password',
      '--character-set-server=utf8mb4',
      '--collation-server=utf8mb4_unicode_ci',
      '--explicit_defaults_for_timestamp',
      '--innodb-use-native-aio=0'
    ]

  wordpress:
    build: ./docker/
    ports:
      - "9000"
    depends_on:
      - mysql
    volumes:
      - ./html:/var/www/html
      - ./php-xdebug.ini:/usr/local/etc/php/conf.d/php-xdebug.ini
    environment:
      WORDPRESS_DB_HOST: mysql:3306
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: root
      WORDPRESS_DB_PASSWORD: wordpress

volumes:
  db_data:

xdebugの設定

xdebugをインストールしたいので、Dockerfileに記述

./docker/Dockerfile
FROM wordpress:5.5.0-php7.2-fpm

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

xdebugの設定はphp-xdebug.iniに別出し。
xdebug3系で記述。

php-xdebug.ini
zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20180731/xdebug.so

[xdebug]
xdebug.mode=debug
xdebug.start_with_request=1
xdebug.client_host=host.docker.internal
xdebug.client_port=9012
xdebug.log=/var/log/xdebug.log

ホストでdockerを動かしている場合は、host.docker.internalでOK
VMのゲストOS上でdockerなどを立てている場合は、コンテナからはホストOSが見えないので、ホストOSのIPアドレスを指定する。
※ VMのネットワーク環境に合わせて適宜変更してください。

立ち上げ

$ docker-compose up -d --build

xdebugが有効になっているか確認

phpinfo.phpを作成し、./html配下に置いておく

phpinfo.php
<?php phpinfo(); ?>

ブラウザでアクセスする。

php-xdebug.iniが読み込まれているか確認。
image.png

xdebugが動作しているか確認
image.png

vscodeの設定

[ファイル] → [フォルダーを開く]で、ファイル構成のディレクトリを選択しておく。
[実行] → [構成の追加]でPHPを選択。
lanch.jsonを以下のように変更する。

launch.json
{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9012,
            "pathMappings": {
                "/var/www/html":"${workspaceFolder}/html"
            }
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

[実行] → [デバッグの開始] をクリック。

ブレークポイントを設定しつつ、ブラウザでwordpressにアクセスすればOK。

(余談)xdebug.logの確認

トラブルシュートでxdebug.logを確認したいときは、docker-composeexecコマンドでコンテナの中に入る。

$ docker-compose exec wordpress /bin/bash
root@5573d83385bf:/var/www/html# cat /var/log/xdebug.log
(だらだら~とログが流れる)

参考にしたページ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
1
Help us understand the problem. What are the problem?