本サイトでは、アフィリエイト広告およびGoogleアドセンスを利用しています。

コンテナで立てたWordPress にデバッグ接続

コンテナで WordPress を動かす話はよく見かけると思います。その WordPress は単純にサービスの提供ということもあるのですが、テーマの開発だったりプラグインの開発だったり、開発目的で使うことも割と多いと思うのです。このとき、PHP のデバッグがしたい!と思うこともあるでしょう。

今回はそのようなコンテナで用意した WordPress (PHP) を Visual Studio Code からデバッグをする!ということを目標にコンテナの作成を行ってみました。

WordPress コンテナを用意する

大抵は、wordpress コンテナ(例 wordpress:php7.3)とデータベース (例 mysql:5.7) を使った docker-compose などを用意します。しかしデバッグのためには wordpress コンテナに準備が必要となります。

手順としては wordpress のコンテナに xdebug をインストールして、php.ini に設定が必要となります。そのため wordpress のコンテナイメージに対して、これらを追加する形で設定するのが良いでしょう。以下はそのコンテナイメージを作るための Dockerfile の例です。

FROM wordpress:php7.3
RUN pecl install xdebug && docker-php-ext-enable xdebug

これを、docker-compose.yml などで使うときには以下のようにしています。

version: "3.1"
services:
  wordpress:
    build: .
    volumes:
      - ./wordpress:/var/www/html
      - ./php.ini:/usr/local/etc/php/php.ini
## 以下省略

php.ini の設定

php.ini に設定を書かないといけないのですが、xdebug のインストール過程でログに出てきたファイルパスが必要となります。これを見るために、以下のコマンドを実行します。

docker compose build --progress=plain 

Docker Desktop for Windows で確認しています。

これを実行すると実行の過程がみえるようになり、そこで以下のようなログを探します。ここでようやくパス情報が分かります。(必要なのは zend_extension の設定項目です)

#5 31.49 Build process completed successfully
#5 31.49 Installing '/usr/local/lib/php/extensions/no-debug-non-zts-20180731/xdebug.so'
#5 31.50 install ok: channel://pecl.php.net/xdebug-3.1.1
#5 31.50 configuration option "php_ini" is not set to php.ini location
#5 31.50 You should add "zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20180731/xdebug.so" to php.ini
#5 DONE 31.6s

ちなみに php.ini は以下のように記述としています。

[xdebug]
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_host=host.docker.internal
xdebug.client_port=9000
xdebug.log=/tmp/xdebug.log
zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20180731/xdbug.so

デバッグ

Visual Studio Code に PHP のプラグインをインストールして、デバッグの構成を作っておきましょう。

launch.json の設定を作る際には、 PHP を選ぶと複数のデバッグ構成が作られますが、今回お世話になるのは以下の設定です。

  "configurations": [
    {
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9000,
      "pathMappings": {
        "/var/www/html" : "D:\\my-page\\wordpress"
      }
    },

ポイントは、 pathMappings の項目で、左側は wordpress で見えているパス情報、右側は Windows 環境で見えているファイルの配置情報です。これらを設定してデバッグを開始し、ページにアクセスしたところをブレークポイントで止めてみたのが以下の図です。ステップインや変数の値確認などが可能です。

まとめ

WordPress の PHP のデバッグ環境構築について説明しました。コンテナで簡単に立てられる WordPress なのでデバッグに大活躍していると思います。ただテキスト出力で確認していることも多そうではあるので、このようにデバッガを繋げてやれることもあるよ、便利だよという紹介でした。

プログラミング
すらりんをフォローする
すらりん日記

コメント

タイトルとURLをコピーしました