悩み

VSCodeでブレークポイントを設定しても止まらない😥
そもそもXdebugが動いているかわからない😥
502 Bad Gatewayで怒られる😥
ポート使用済みで怒られる😥

開発環境

Windows10 Pro
WSL2
Ubuntu
Laravel9
Laradock
VSCode

解決策

① .envファイルの修正

🌳ディレクトリ構造🌳
root
├ LaravelProject
└ Laradock
　└ .env

.env

---
- WORKSPACE_INSTALL_XDEBUG=false
+ WORKSPACE_INSTALL_XDEBUG=true
---
- PHP_FPM_INSTALL_XDEBUG=false
+ PHP_FPM_INSTALL_XDEBUG=true
---
- PHP_FPM_XDEBUG_PORT=9003
+ PHP_FPM_XDEBUG_PORT=9001
---

※PORTが9003のままだと、VSCodeで使用済みと怒られたため、変更しています

② Laradockのxdebug.iniを修正

注意
Xdebugのバージョンで、設定する項目が異なります。
PHP8.1ではXdebug3がインストールされるため、既存のxdebug.ini(バージョン2用)を修正するだけでは動きません。

workspaceとphp-fpmの2か所にiniファイルがあるので、修正します。

🌳ディレクトリ構造🌳
root
├ LaravelProject
└ Laradock
　├ workspace
　│└ xdebug.ini
　└ php-fpm
　　└ xdebug.ini

xdebug.ini

xdebug.client_host=host.docker.internal
xdebug.discover_client_host=false
xdebug.client_port=9001
xdebug.idekey=VSCODE

xdebug.start_with_request=yes
xdebug.mode=debug
xdebug.cli_color=1
xdebug.output_dir="~/xdebug/phpstorm/tmp/profiling"

xdebug.var_display_max_children=-1
xdebug.var_display_max_data=-1
xdebug.var_display_max_depth=-1

③ docker-compose.ymlの修正

php-fpmにポート9001を追加します。

🌳ディレクトリ構造🌳
root
├ LaravelProject
└ Laradock
　└ docker-compose.yml

docker-compose.yml

version: '3'

services:
    php-fpm:
---
      expose:
        - "9000"
+       - "9001"
---

④ VSCodeのlaunch.jsonの修正

portは上記で設定した9001（適宜変更してください）
pathMappingsの左辺は、Laradockの.envファイルのAPP_CODE_PATH_CONTAINERと合わせます
pathMappingsの右辺は、.vscodeを設置するディレクトリに応じて変更してください
※この場合は、下記の構造になります

🌳ディレクトリ構造🌳
root
├ .vscode
├ LaravelProject
└ Laradock

.env

APP_CODE_PATH_CONTAINER=/var/www

launch.json

    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9001,
            "pathMappings": {
                "/var/www": "${workspaceFolder}"
            },
            "hostname": "0.0.0.0"
        },

注意

①、②、③の変更後は、コンテナの再ビルドが必要になります。
docker-compose build --no-cache workspace php-fpm