リモートデバッグ VPS × CentOS7 × VSCode × Xdebug

概要
環境
手順

概要

個人でVPS運用しているWordPressに対してリモートデバッグを導入してみた。
※本番環境にXdebugは入れない方が良いとされている。理由)遅くなる、XDEBUG_SESSION_START攻撃される。いわゆるST環境、テスト環境辺りなら問題無さそう、多分

例えば、現場が保守開発フェーズ(コード量膨大)なのにローカル開発環境が存在しない場合、また事情あって今すぐローカル開発環境の導入が難しい場合などにおいて、もしかしたらリモートデバッグが役立つかもしれません

環境

リモートサーバー
- Xdebug3 ※ ⬅本記事で追加する
- WordPress 6.0.2
- PHP8.0
- Apache2.4.6
- MariaDB
- CentOS7
- さくらVPS1台
ローカルPC
- VSCode 拡張機能 Remote Development
- Mac M1チップ

手順

事前準備
Xdebugインストール
php.ini設定
VSCode上での作業
- リモート先(さくらVPSのCentOS上)で拡張機能「PHP Debug」をインストールする
- launch.json作成
- 動作確認

事前準備

Xdebugインストール

VPSのPHPは、Remi Repositoryのphp80からインストールしたので、Xdebugも同様にphp80からインストールする

Xdebugインストール
[root@sakura-vps /]# yum -y install php80-php-pecl-xdebug3

インストール出来ているか確認
[root@sakura-vps /]# yum list installed | grep php
【結果】
php80-php-pecl-xdebug3.x86_64         3.1.5-1.el7.remi                @remi-safe

Apache再起動
[root@sakura-vps/]# systemctl restart httpd

phpinfoの情報を確認して「Xdebug」項目が追加されていれば成功

CentOS上のポート9003番を開放する
※Xdebug3の場合は、デフォルトポートが9003になっているので、CentOS上で9003を開放しておく。ポート開放しないとXdebugが起動しない

[root@sakura-vps /]# firewall-cmd --add-port=9003/tcp --zone=public --permanent
[root@sakura-vps /]# firewall-cmd --reload
[root@sakura-vps /]# firewall-cmd --list-all
【結果】
  ports: 9003/tcp

php.ini設定

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

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

Apache再起動
[root@sakura-vps/]# systemctl restart httpd

VSCode上での作業

リモート先(さくらVPSのCentOS上)で拡張機能「PHP Debug」をインストールする

RemoteSSHでさくらVPSのCentOS上に接続する

.sshファイルは既に下記のように設定してある状態です

Host sakura_vps(root)
	HostName さくらVPSのIPアドレス
	Port XXXX
	User root
	IdentityFile /Users/ユーザ名/.ssh/秘密鍵

リモート接続している状態でVSCode拡張機能の検索欄から「PHP Debug」を検索すると、インストールボタンがリモート先になっている

インストールすると、リモート先で拡張機能「PHP Debug」がインストールされる

launch.json作成

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

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "WordPress専用 Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "var/www/wordpress/": "${workspaceRoot}/wordpress/"
            }
        },
    ]
}

pathMappingsについて
私の場合は、var/www/直下にWordPressソース一式を配置しているので、pathMappingsは下記のようになる

            "pathMappings": {
                "var/www/wordpress/": "${workspaceRoot}/wordpress/"
            }

動作確認

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