👓

WSL2+docker-compose+VSCodeでLaravelをデバッグ実行する（2023年7月）

2023/07/29に公開

Docker

やりたいこと

WSL2+Docker(docker-compose)で動かしているLaravelをVSCodeでデバッグ実行したい。

環境

Windows WSL2
Ubuntu 22.04.2 LTS
Docker Desktop 4.21.1 (114176)
Docker Compose v2.19.1
Visual Studio Code 1.80.2
- 拡張機能）WSL v0.80.2
- 拡張機能）PHP Debug v1.33.0
xdebug 3.2.2

前提となるプロジェクトの構成

すでにdocker-composeでLaravelのプロジェクトが稼働している前提。

Laravelプロジェクトのルート（VSCodeのプロジェクトフォルダ）/
  ├ (Laravelの各種ファイル)
  │  …
  ├ docker/
  │  ├ app/    <- phpを動かすコンテナの設定ファイルをここに格納している
  │  │  ├ log/  <- xdebugのログをここにマウントする予定
  │  │  ├ Dockerfile
  │  │  └ php.ini
  │  │  
  │  … (他のコンテナの設定ファイル) 
  │
  └ docker-compose.yml

今回はphpを動かしているコンテナの設定ファイルを修正していく。

Dockerfileの修正

xdebugをインストールする。Dockerfileに以下を追加。

docker/app/Dockerfile

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

php.iniの修正

xdebugの設定を行う。php.iniに以下を追加。

docker/app/php.ini

[xdebug]
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.client_host = "host.docker.internal"
xdebug.client_port = 9003
xdebug.discover_client_host = 1
xdebug.log = "/var/log/xdebug.log"

docker-compose.ymlの修正

docker-compose.ymlで、phpを動かすコンテナ（ここではapp）の部分を変更。

docker-compose.yml

version: "3.9"
services:
  app:
    build:
      context: .
      dockerfile: ./docker/app/Dockerfile
    volumes:
      - .:/var/www/html
      - ./docker/app/log:/var/log  # 追加。php.iniで指定したxdebug.logの出力先をマウント      
    extra_hosts:
      - 'host.docker.internal:host-gateway' # 追加

VSCodeの拡張機能インストール

拡張機能の「WSL」と「PHP Debug」をインストールする。

WSL

PHP Debug

launch.jsonの編集

左メニューから「実行とデバッグ」を選択。「launch.jsonファイルを作成します」リンクを押す。

デバッガーの選択で「PHP」を選択。

.vscode/launch.json が作成される。

"Listen for Xdebug"の部分を次のように修正。

.vscode/launch.json


{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003, 
	    // 追加ここから
            "hostname": "0.0.0.0",
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            }
	    // ここまで
        },
	…
     ]
}