【Xdebug】Docker+PHP+VSCodeでデバッグする方法

プログラミング

2022.03.18

DockerでPHPを開発しているんだけど、

VSCodeを使ってお手軽にデバッグできないかな？

Xdebugを使えば、VSCode上で簡単にデバッグができるよ！

この記事では、Docker+PHP+VSCodeで、Xdebugを使ってデバッグする方法を解説します。

Xdebugを使えば、VSCode上でデバッグができて便利です。

この記事の内容

Xdebugのセットアップ方法
Xdebugのデバッグの方法

VSCodeの拡張機能をインストール
Dockerコンテナを立ててXdebugを使用する
サンプル環境のビルドと起動
Xdebug + VSCodeでデバッグする

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

まずはVSCodeに拡張機能を追加します。

VSCodeの左サイドバーのExtentionsにて、「xdebug」と検索します。

検索結果にある「PHP Debug」をインストールします。

Dockerコンテナを立ててXdebugを使用する

今回はDocker(Docker Compose)を利用してサンプル環境を構築します。

いっちー

この記事で紹介するコードはGitHubにアップロードしてあるので

ご自由にお使いください。

サンプルのディレクトリ構成は以下です。

Dockerfileの作成

簡易的なPHPコンテナを立てるためのDockerfileを作成します。

FROM php:7.3-apache

RUN apt-get update && apt-get install -y \
    vim

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

docker-compose.ymlの作成

次にdocker-compose.ymlを作成します。

version: '3'

services:
  php-xdebug-sample:
    build:
      context: ./docker
    container_name: php-xdebug-sample
    stdin_open: true
    tty: true
    ports:
      - '5000:80'
    volumes:
      - ./src:/var/www/html
      - ./docker/php.ini:/usr/local/etc/php/php.ini

launch.jsonの作成

VSCode側の設定に必要な、launch.jsonを作成します。

サイドバーの「Run and Debug」> 「create a launch.json file.」> 「PHP」の順にクリックします。

ファイルの雛形が作成されるので、pathMappingsの記述を追加します。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            // ここを追記
            "pathMappings": {
                "var/www/html/":"${workspaceRoot}/src"
            }
        }
    ]
}

pathMappingsには、ボリュームのマウント元と先を記述します。

${workspaceRoot}は、VSCodeを開いているフォルダのルートという意味です。

いっちー

記事で紹介しているサンプルは、上記のシンプルなlaunch.jsonで動作します。

php.iniの作成

続いてphp.iniを作成します。php.iniはPHPを動かすための設定ファイルです。

[xdebug]
; リモートデバッグを有効化
xdebug.mode=debug
; リクエストがあった際にデバッグを開始
xdebug.start_with_request=yes
; ホストを指定
xdebug.client_host=host.docker.internal
; ホスト側のポート指定
xdebug.client_port=9003
; VSCodeをIDEとして指定
xdebug.idekey="VSCODE"

いっちー

ネットにはxdebug2系と3系の情報が混在しており、

両者は記述方法に差があるため注意が必要です。

Xdebugの公式ドキュメントはこちら。

Xdebugのバージョンは以下のコマンドを打つことで確認できます。

$ docker-compose exec php-xdebug-sample php -v

index.phpの作成

表示するシンプルなページを作成します。

<?php
    echo 'Xdebug Sample';

サンプル環境のビルドと起動

ここまで作成したファイルを元に、以下のコマンドでコンテナを立ち上げます。

docker-compose up -d --build

docker psで状態を確認し、statusがUPになっていることを確認します。

$ docker ps
CONTAINER ID   IMAGE                                 COMMAND                  CREATED       STATUS       PORTS                  NAMES
48a976f77cd3   php-xdebug-sample_php-xdebug-sample   "docker-php-entrypoi…"   2 hours ago   Up 2 hours   0.0.0.0:5000->80/tcp   php-xdebug-sample