takaya030の備忘録

PHP、Laravel、Docker などの話がメインです

VirtualBox + Vagrant で構築した Docker 環境で動作している Laravel Sail の Xdebug の設定について

vagrant を使って VirtualBox に構築した Linux VM 上の Docker で Laravel Sail を動作させているときの Xdebug 設定の備忘録

検証環境

Windows10 Home Edition (version 22H2)
VirtualBox 6.1.40
vagrant 2.3.4

# Docker Host OS
ubuntu 22.04.1 LTS

Docker version 20.10.21, build baeda1f

発生した問題について

上記 Docker 環境で動作している Laravel Sail に WindowsVSCode から Dev Container でアタッチしてデバッグしようとしたところ、ブレークポイントを設定しても停止しなかった
調査したところ xdebug.client_host が不正だったため VSCodeXdebug からの通知が届いていなかったことが原因と判明した

xdebug.client_host の設定値ついて

xdebug.client_host には Xdebug クライアント (今回は WindowsVSCode) の IP アドレスを設定する必要がある
WSL2 では自動的に host-gateway に設定されるが VirtualBox ではそのような変数はないため明示的に指定する

コンテナから Windows へのアクセス

コンテナから Windows へのアクセスはデフォルトルートを通じて行うことが可能
デフォルトルートは ubuntu 上で ip r と入力することで確認できる

$ ip r
default via 10.0.2.2 dev enp0s3 proto dhcp src 10.0.2.15 metric 100
10.0.2.0/24 dev enp0s3 proto kernel scope link src 10.0.2.15 metric 100
10.0.2.2 dev enp0s3 proto dhcp scope link src 10.0.2.15 metric 100
10.0.2.3 dev enp0s3 proto dhcp scope link src 10.0.2.15 metric 100
172.17.0.0/16 dev docker0 proto kernel scope link src 172.17.0.1 linkdown
172.18.0.0/16 dev br-3c28ac761546 proto kernel scope link src 172.18.0.1 linkdown
172.19.0.0/16 dev br-95a8cdd8ea38 proto kernel scope link src 172.19.0.1
192.168.33.0/24 dev enp0s8 proto kernel scope link src 192.168.33.10

1行目の default がデフォルトルートで、この場合 IP アドレス 10.0.2.2 を使って Windows へアクセス可能となる

Laravel Sail の Xdebug 設定

.env に下記内容を追加する
.env

SAIL_XDEBUG_MODE=develop,debug
SAIL_XDEBUG_CONFIG="client_host=10.0.2.2"

devcontainer.json に下記内容を追加する
.devcontainer/devcontainer.json

         "forwardPorts": [
                9003
         ]

.vscode フォルダに launch.json を作成する
.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "stopOnEntry": true,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            }
        }
    ]
}

コンテナイメージを再構築する

$ ./vendor/bin/sail build --no-cache

動作確認

コンテナを起動する

$ ./vendor/bin/sail up -d

VSCodeRemote SSHubuntu に接続した後、 Dev Container でコンテナにアタッチする

PHP Debug拡張機能をインストールする

Chrome でテストする場合は Xdebug helper エクステンションをインストールする

停止させたい箇所にブレイクポインタを設定する

デバッグ実行開始

Chromeデバッグ対象の URL を開く

Xdebug helper エクステンションのアイコンをクリックして Debug を選択

再度 URL を開くとブレイクポインタで停止することを確認する

参考サイト

readouble.com

xdebug.org

chrome.google.com