PHPの開発効率化!VSCode+DockerでXdebugを使ってみよう

公開:2021/02/20
更新:2021/02/20
5 min読了の目安(約5300字TECH技術記事

Xdebugとは

XdebugはPHPの開発を効率化してくれるデバッガです。
デバッガとはデバッグ(バグの原因を見つける)作業を手伝ってくれるツールのことを言います。

たとえば任意の行で実行をストップしたり、変数の中身を確認したりすることができます。

ようは変数の中身を確認するためにいちいちvar_dumpを使ったり、コメントアウトをしたりしなくて良くなるツールということです。
Xdebugを導入して生産性を爆上げしましょう!

  • 前提環境
    • macOS
    • Docker For Mac
    • VScode

本記事では以下のような流れで進めていきます。

  1. PHP+Docker環境の構築
  2. Remote Developmentのインストール
  3. Xdebugの設定
  4. Xdebugを使ってみる

PHP+Docker環境の構築

まずプロジェクトの直下にdocker-compose.ymlファイルを作ります。

root
$ touch dockcer-compose.yml
docker-compose.yml
version: "3"

services:
  app:
    build:
      context: .
      dockerfile: docker/app/Dockerfile
    volumes:
      - ./src:/var/www/html
    ports:
      - "50080:80"

次にdocker/appフォルダにDockerfileを作成します。

root
$ mkdir -p docker/app; cd docker/app
$ touch Dockerfile
Dockerfile
FROM php:8-apache

WORKDIR /var/www/html

# PHP で必要なライブラリをインストール
RUN apt-get update \
    && apt-get install -y libonig-dev libzip-dev unzip \
    && docker-php-ext-install mbstring zip bcmath \
    && pecl install xdebug \
    && docker-php-ext-enable xdebug

# ファイルのコピー
COPY ./src /var/www/html
COPY ./docker/app/php.ini /usr/local/etc/php/php.ini
COPY ./docker/app/xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini

PHPファイルを作って実行してみましょう。
プロジェクトのルートディレクトリ戻ってsrcフォルダを作成し、sample.phpファイルを記述します。

root
$ mkdir src; cd src
$ touch sample.php
sample.php
<?php

$numbers = [1, 2, 3];
$doubleNumbers = [];

foreach ($numbers as $number) {
    $doubleNumbers[] = $number * 2;
}

print_r($doubleNumbers);

現在のディレクトリ構造は以下のようになっています。

root/
  ├ docker/
  │ └ app/
  │   └ Dockerfile
  ├ src/
  │ └ sample.php
  └ docker-compose.yml

下記コマンドでPHPファイルが実行されるか確認します。

root
$ docker-compose up -d
$ docker-compose exec app php sample.php
[20-Feb-2021 14:46:28 Asia/Tokyo] Xdebug: [Step Debug] Could not connect to debugging client. Tried: localhost:9003 (through xdebug.client_host/xdebug.client_port) :-(
Array
(
    [0] => 2
    [1] => 4
    [2] => 6
)

上記のようにターミナルに表示されたら成功!
dockerは停止させておきましょう。

root
$ docker-compose down

RemoteDevelopmentのインストール

VScodeの拡張機能から「Remote Development」を検索しインストールします。

VScodeの左下に青いマークが表示されたら成功です。

Xdebugを設定する

プロジェクトのルートディレクトリに.devcontainerフォルダを作成し、devcontainer.jsonを作成します。

root
$ mkdir .devcontainer; cd .devcontainer
$ touch devcontainer.json
devcontainer.json
{
  "name": "Xdebug",
  "dockerComposeFile": [
    "../docker-compose.yml",
  ],
  "service": "app",
  "workspaceFolder": "/var/www/html",
  "forwardPorts": [
    9003
  ],
  "extensions": [
    "felixfbecker.php-debug",
    "bmewburn.vscode-intelephense-client",
    "coenraads.bracket-pair-colorizer-2",
    "oderwat.indent-rainbow",
    "streetsidesoftware.code-spell-checker"
  ]
}

XdebugとPHPの設定ファイルをdocker/appディレクトリに作成します。

docker/app
$ touch php.ini
php.ini
display_errors = On
display_startup_errors = On
max_execution_time = 30
session.gc_divisor = 1000
session.sid_bits_per_character = 5
output_buffering = 4096
memory_limit = 128M
upload_max_filesize = 64M
post_max_size = 64M
max_input_vars = 1000
log_errors = On
error_log = /dev/stderr
error_reporting = E_ALL
expose_php = On
zend.exception_ignore_args = Off

[Date]
date.timezone = "Asia/Tokyo"

[mbstring]
mbstring.language = Japanese

[mysqlnd]
mysqlnd.collect_memory_statistics = On

[assertion]
zend.assertions = 1
docker/app
$ touch xdebug.ini
xdebug.ini
xdebug.client_host = localhost
xdebug.start_with_request = yes
xdebug.mode = debug
xdebug.client_port = 9003
xdebug.log = /var/log/xdebug.log

launch.jsonファイルをsrc/.vscodeディレクトリに作成します。

src
$ mkdir .vscode; cd .vscode
$ touch launch.json
launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "php",
      "request": "launch",
      "name": "Listen for Xdebug",
      "port": 9003,
    }
  ]
}

最終的なファイル構成は以下のようになっています。

root/
  ├ .devcontainer
  │ └ devcontainer.json
  ├ docker/
  │ └ app/
  │   ├ Dockerfile
  │   ├ php.ini
  │   └ xdebug.ini
  ├ src/
  │ └ .vscode
  │   └launch.json
  │ └ sample.php
  └ docker-compose.yml

お疲れ様でした。いよいよ次章でXdebugを使っていきます!

Xdebugを使ってみる

まずVScode左下にある緑のマークをクリックします。

次に赤枠を選択し、プロジェクトのルートディレクトリを選択します。
Xdebugが立ち上がるまで2~3分待つ必要があると思います。

立ち上がったら①②の順番にクリックしデバッグモードを立ち上げます。

sample.phpを開いて4行目の左側をクリックしてみましょう。
下図のようにブレイクポイントを付けることができるはずです。

ターミナルからコマンドを実行してみます。

$ php sample.php

下図のようにブレイクポイントで処理がストップし、左側の「変数」タブから変数の中身を確認できます。

ブレイクポイントを複数設定し、矢印マークをクリックすればステップごとに変数の中身を確認することができます。

おわりに

いかがでしたでしょうか?Xdebugを用いることで簡単に変数の中身を確認することができました。これでPHPファイルのそこかしこにvar_dumpを書かなくてよくなりました。この記事が皆様に少しでも役立ったのであれば幸いです。

参考

https://dokugaku-engineer.com/