dockerで動いているPHPのリモートデバッグ方法がわからない（VScodeでデバッグする）

ホストで動いているPHPのデバッグは今までしてきたけれども、 リモート(docker)で動いているPHPのデバッグ方法がわからなかった。 今回はVScodeでリモートデバッグを行ってみた。

環境を作る

まずは、dockerで環境を作る。

構成はこんな感じです。

.
├── docker
│   ├── docker-compose.yml
│   └── php
│       ├── Dockerfile
│       └── php.ini
└── src
    └── index.php

それぞれのファイルは以下のように。

シンプルにApacheとPHPが入った公式イメージを利用し、 Xdebugを追加でインストールする。 docker-php-ext-enable xdebugを指定すると、 /usr/local/etc/php/conf.d/docker-php-ext-xdebug.iniを作成し、Xdebugを有効にしてくれる。

# Dockerfile

FROM php:7.2-apache

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

php.iniにXdebugの設定をこんな感じで設定。

Xdebug: Documentation

; php.ini

[xdebug]
xdebug.remote_enable=1
; Dockerからホストへの接続を解決してくれる
; [Networking features in Docker for Mac | Docker Documentation](https://docs.docker.com/docker-for-mac/networking/#per-container-ip-addressing-is-not-possible)
xdebug.remote_host=host.docker.internal
xdebug.remote_autostart=1
; logの出力を指定
xdebug.remote_log=/tmp/xdebug.log

Docker Composeを利用してDockerを利用する。

# docker-compose.yml

version: '3'
services:
  php:
    build: ./php
    ports:
      - "8080:80"
    volumes:
      - ../src:/var/www/html/
      - ./php/php.ini:/usr/local/etc/php/php.ini
    container_name: php

Index.phpは適当にphpinfoを表示させるようにする。

// index.php

<?php
phpinfo();

VScodeの設定

まずはPHP Debugをインストールする。

PHP Debug - Visual Studio Marketplace

ショートカットshift+cmd+dでデバッグのパネルが画面左に開かれるので、 パネル上部の歯車をクリックする。

launch.jsonはこんな感じ。 portはXdebugで利用するデフォルトのポート番号9000を設定。もし、php.iniで変更したら変更した値をここで設定する。

pathMappingsはDocker側とホスト側をマッピングする。

// launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "pathMappings": {
                "/var/www/html":"${workspaceRoot}/src"
            }
        }
    ]
}

これで、設定は完了。

あとはVScodeでブレークポイントを置いて、デバッグ開始し(F5)、画面を開くとブレークポイントで止まるはず。