目的
複数の開発者が、1つのサーバー上で稼働するPHP Webアプリケーション(nginx + php-fpm)に対してデバッガー(ブレークポイント)を使えるようにすることを目指します。会社なのでルーターをいじれない、という条件付きです。
記事タイトルは
【PHP】リモートマシンのデバッグを、「複数人で」やる【Xdebug×DBGpProxy】
のパクリです。
図解
前提
・ローカルマシン: Mac
・リモートマシン: Linux
・IDE: PHPStorm (2020.2)
・ブラウザ: Chrome
・サーバーにsshで接続できること(リモートポートフォワーディング用)
・会社など、ルーターのポートフォワーディング設定を気軽にできない環境
※これらに限らずともできるとは思いますが、記事としてはこの前提で進めます
サーバー側の設定
Xdebug
- Xdebug is an extension for PHP to assist with debugging and development.
PHPのextensionで、デバッガーとしてはスタンダード。導入は解説記事が他にありますので、省略させていただきます。
Xdebugの設定
リモートデバッグを有効にし、localhost(サーバー上で動作しているので、localhostはサーバーを指します)のポート9001に対して通信するようにします。
xdebug.remote_enable=1
xdebug.remote_host=localhost
xdebug.remote_port=9001
DBGp Proxy
DBGp Proxy is 何
Xdebugからの通信内容を中継するProxy。キーを登録でき、キーの値によって中継先を切り替えることが可能です。キーは IDE Key
と呼ばれます。 わざわざ頭にIDEとつける必要あったのか
ダウンロード
以下より
https://xdebug.org/download#dbgpProxy
DBGp Proxyの起動
DBGp Proxyは起動時に、Xdebugからの通信のポートと、IDE Key登録用のポートを、それぞれ指定する必要があります。前者がserver、後者がclientと呼ばれます。Xdebugはlocalhostをport:9001に通信するように設定していますので、serverはそれに合わせてport:9001で待ちます。clientはport:9002を指定しておきます(もちろん他でもOK)。
chmod +x dbgpProxy
./dbgpProxy --client localhost:9002 --server localhost:9001
ローカル側の設定
サーバー上と同じPHPファイルがローカルにも存在するようにする
サーバー上のphpファイルが、ローカルにもあるようにします。ローカルで編集してサーバーにアップロードする開発スタイルを想定しています。 ※PhpStormでremote developmentできる? 詳しくないです
DBGp ProxyにIDE Keyを登録
IDE Key alice
をポート9003で登録します(複数人の間で被らなければ問題ないですが、ここでは開発者の名前で登録することにします)。proxyinitコマンドで、DBGp ProxyにIDE Keyを登録できます。
echo -en "proxyinit -p 9003 -k alice -m 1\0" | nc localhost 9002
(末尾にnull文字が必要なので、echoの-eオプションで \0
を指定します)
PhpStormのデバッガーの設定
localhost:9003でXdebugをListenするように設定します。Preferences>Language&Frameworks>PHP>Debug の Debug port を入力します。
PhpStormの右上の方にある Start Listening for PHP Debug Connections
ボタンを押します
これで、Xdebugがlocalhost:9003に通信してくるのを待つことができました。
Xdebug helperの導入
Xdebug helper is 何
Chromeのextension。cookieに XDEBUG_SESSION の値を入れるのに使います
インストール
chrome extensionを入れるだけ
設定
Xdebug helperのオプションから、IDE keyを指定できます。選択欄を Other
にし、値を alice
にします。
(サーバーとローカルの)パスマッピング
設定 (PhpStorm)
Preferences>Language&Frameworks>PHP>Servers からパスマッピングの登録を行います。サーバー上のファイルとローカルのファイルが同じ構成となるように、File/Directory
とAbsolute path on the server
の値を指定してください。
実践
実際にPhpStormでブレークポイントを貼り、そこで処理が止まるところまでをやります。
リモートポートフォワーディング
is 何
サーバー上の特定ポートへの出力を、ローカルの特定ポートへの入力につないでくれるようにできます。sshd_configでGatewayPortsの設定をしておく必要があります。
GatewayPorts yes
実行
ssh -N -R 9003:localhost:9003 リモートサーバー
サーバー上のポート9003の出力をローカルで受け取ることができるようになります。
PhpStorm上でブレークポイント貼り、実行
コードの左側あたりをクリックすればOK。赤丸がブレークポイントの印
ブレークポイントを貼ったコードが実行されるように、ブラウザでアクセスします。PHPStorm側のデバッガが起動すれば、めでたし!
補足
- php-fpmがport:9000を使用しているので、XDebugはport:9001を使用するようにしました
- IDE Keyの登録はPhpStormからもできるらしいが、DBGp Proxyがサーバー上にある場合は試したができなかった(DBGp Proxyがローカルにある場合はできました)
参考
Multiuser debugging via Xdebug proxies
SSHトンネル経由のリモートデバッグ - 公式ヘルプ | PhpStorm
ゼロコンフィギュレーションデバッグ - 公式ヘルプ | PhpStorm
[PHP] Xdebug のリモートデバッグ、理解していますか? - Qiita