さくらのレンタルサーバのPHPをVSCodeでリモートデバッグする方法

この記事は公開から3年以上経過しています。

さくらのレンタルサーバ(スタンダードプラン)で稼働するPHPを、ssh逆ポートフォワーディングさせてローカルのVSCodeからリモートデバッグする方法。WordPressプラグイン開発時にも利用できます。

対応手順

1. レンタルサーバコントロールパネルからサーバ情報で以下の画面を開き、サーバーのIPアドレスをメモする(本例はIPv4接続)。

   

2. ローカルコンピューターでターミナルを開き以下のコマンドを実行する。

   ssh サーバーのユーザー名@手順1のIPアドレス

3. パスワード入力を求められたらサーバーのパスワードを入力する。

   sshログインできると以下のようなログインメッセージが表示されてユーザープロンプト表示になる。

   Last login: Sun Jan 10 08:34:34 2021 from 接続元ホスト名
   FreeBSD 9.1-RELEASE-p24 (SAKURA**) #0: Thu Feb  5 10:03:29 JST 2015
   
   Welcome to FreeBSD!
   
   %

4. 以下のコマンドでソースビルド用ディレクトリにXdebugのソースを準備する。
   (バージョンは2021.1.10時点の最新)

   mkdir src
   cd src
   wget https://xdebug.org/files/xdebug-3.0.2.tgz
   tar zxfv xdebug-3.0.2.tgz
   cd xdebug-3.0.2

5. 以下のコマンドでXdebugのソースビルドとインストールを行う。

   phpize
   ./configure
   make
   mkdir -p ~/local/lib/php/extensions/
   cp modules/xdebug.so ~/local/lib/php/extensions/

6. レンタルサーバコントロールパネルから、スクリプト設定→PHP.ini設定で以下の画面を開き、php.iniの既存項目に続けて以下の情報を入力したら保存するを押下して設定を登録する。

   

   [Xdebug]
   zend_extension=/home/{サーバーユーザー名}/local/lib/php/extensions/xdebug.so
   xdebug.mode=debug

7. 以下のコマンドでXdebugの拡張モジュールが読み込まれているか確認する。

   php -c ~/www/php.ini -m

   Xdebugが正常にインストール＆設定できていれば、以下のように表示される。

   [Zend Modules]
   Xdebug

8. VSCodeのPHPデバッグ用のlaunch.jsonのconfigurations/portを9003、configurations/pathMappingsにサーバーのソースディレクトリパスとローカルのソースディレクトリパスのマッピング情報を設定する({$workspaceRoot}はVSCodeで開いているフォルダを示す置換変数)。

   pathMappingsが正しく設定されていないと、ブレークポイントにヒットしません。

   {
       // Use IntelliSense to learn about possible attributes.
       // Hover to view descriptions of existing attributes.
       // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
       "version": "0.2.0",
       "configurations": [
           {
               "name": "Listen for XDebug",
               "type": "php",
               "request": "launch",
               "port": 9003,
               "pathMappings": {
                   "/home/{サーバーユーザー名}/www": "${workspaceRoot}"
               }
           },
           {
               "name": "Launch currently open script",
               "type": "php",
               "request": "launch",
               "program": "${file}",
               "cwd": "${fileDirname}",
               "port": 9003
           }
       ]
   }

9. ローカルから以下のコマンドでサーバーに逆ポートフォワーディングを設定する。

   ssh {サーバーのユーザー名@手順1のIPアドレス} -R 9003:localhost:9003

10. 後はデバッグ対象のソースにブレークポイントを設定したら、ブラウザでURLにXDEBUG_SESSION_START=XXXパラメータを付加してアクセスすれば、以下のようにブレークポイントにヒットするようになる(デバッグをやめたい場合はXDEBUG_SESSION_STOPパラメータを付加)。

    例) WordPressサイトのindex.phpにブレークポイントを設定

    https://example.com?XDEBUG_SESSION_START=1234

    

ちなみにローカルのVSCodeのデバッガを起動した状態でsshでリモートサーバーに接続後に、リモートサーバーシェル上で以下のコマンドを実行すると、サーバー側からローカルのVSCodeデバッガに対してXdebugポートの疎通確認ができます。

telnet localhost 9003

参考ウェブサイトなど

• Xdebug
  Step Debugging

以上です。