ローカルデバッグ Docker × VSCode × Xdebug

概要
環境
手順

概要

過去にローカル環境でDocker × VSCode × Xdebugを構築した備忘録をブログ化する

環境

ローカルPC
- Docker
- Mac M1チップ

手順

Dockerfile追記
php.ini設定
VSCodeで拡張機能「PHP Debug」をインストール
launch.json作成
動作確認

大前提

既に、ローカル上でDocker環境(PHP-apacheやPHPfpm×nginxなど)が構築済であること

フォルダ構成

folder
├──.vscode
│　└ launch.json
├── db
├── php
│　└ Dockerfile
│　└ php.ini
├── docker-compose.yml
├── backend

Dockerfile 追記

# xdebugインストール
RUN pecl install xdebug && \
    docker-php-ext-enable xdebug

この後、php.iniの末尾に「Xdebug」項目を追記する必要があるので、自作php.iniを適用させる

# 自作php.iniを適用
COPY ./php.ini /usr/local/etc/php/php.ini

php.ini設定

php.iniの末尾に下記を追記する

[xdebug]
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_host=host.docker.internal
xdebug.client_port=9003
xdebug.log=/tmp/xdebug.log
xdebug.log_level=0

コンテナをビルドし直す

cd 〜/folder
docker-compose up -d —-build

VSCodeで拡張機能「PHP Debug」をインストール

VSCode拡張機能の検索欄から「PHP Debug」を検索➜「PHP Debug」インストール

launch.json作成

カレントディレクトリに、「launch.json」を作成する。
※「launch.json」ファイルは、vscode上部のツールバーの「実行」➜「構成を追加」をクリックすると、自動生成される

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
        "/work/backend": "${workspaceRoot}/backend/"
      }
    }
  ]
}

pathMappingsについて
私の場合は、php/DockerfileのWORKDIRに「/work/backend」を設定しているので、

WORKDIR /work/backend

pathMappingsは下記のようになる

      "pathMappings": {
        // 左側:DockerfileのWORKDIRパス 右側:ホスト側パス
        "/work/backend": "${workspaceRoot}/backend/"
      }

動作確認

適当なphpファイルにブレイクポイントを設定して、ブラウザから該当のURLアクセスして、処理が止まれば、リモートデバッグ構築に成功