【PHP】会社のルーターを触らずに、リモートマシンのデバッグを「複数人で」やる【Xdebug×DBGpProxy】

# 目的

複数の開発者が、1つのサーバー上で稼働するPHP Webアプリケーション(nginx + php-fpm)に対してデバッガー（ブレークポイント）を使えるようにすることを目指します。会社なのでルーターをいじれない、という条件付きです。

記事タイトルは
[【PHP】リモートマシンのデバッグを、「複数人で」やる【Xdebug×DBGpProxy】](https://qiita.com/takudo/items/35d2fd3c6e9846715bf4)
のパクリです。

# 図解
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31118/623e692b-87f9-10da-aebd-fa215c048c61.png)

# 前提
・ローカルマシン: 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に対して通信するようにします。

```bash
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](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）。

```bash
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を登録できます。
```bash
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 を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31118/77aaffe7-e804-faaf-24bb-42c0d630acb8.png)

PhpStormの右上の方にある `Start Listening for PHP Debug Connections` ボタンを押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31118/357bd436-eb95-3173-3e49-1d2dd74a4983.png)

これで、Xdebugがlocalhost:9003に通信してくるのを待つことができました。

### Xdebug helperの導入

### Xdebug helper is 何

Chromeのextension。cookieに XDEBUG_SESSION の値を入れるのに使います

### インストール

chrome extensionを入れるだけ

[Xdebug helper](https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc)

### 設定

Xdebug helperのオプションから、IDE keyを指定できます。選択欄を `Other`にし、値を `alice`にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31118/a525cbe9-96da-d1e9-f907-ba1e6b9ddc98.png)

### （サーバーとローカルの）パスマッピング

### 設定 (PhpStorm)

Preferences>Language&Frameworks>PHP>Servers からパスマッピングの登録を行います。サーバー上のファイルとローカルのファイルが同じ構成となるように、`File/Directory`と`Absolute path on the server`の値を指定してください。

# 実践

実際にPhpStormでブレークポイントを貼り、そこで処理が止まるところまでをやります。

### リモートポートフォワーディング

### is 何

サーバー上の特定ポートへの出力を、ローカルの特定ポートへの入力につないでくれるようにできます。sshd_configでGatewayPortsの設定をしておく必要があります。

```bash
GatewayPorts yes
```

### 実行

```bash
ssh -N -R 9003:localhost:9003 リモートサーバー
```
サーバー上のポート9003の出力をローカルで受け取ることができるようになります。

### PhpStorm上でブレークポイント貼り、実行

コードの左側あたりをクリックすればOK。赤丸がブレークポイントの印
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31118/eee6af95-512f-7440-642f-e14e34e3fb5c.png)

ブレークポイントを貼ったコードが実行されるように、ブラウザでアクセスします。PHPStorm側のデバッガが起動すれば、めでたし！

# 補足

- php-fpmがport:9000を使用しているので、XDebugはport:9001を使用するようにしました
- IDE Keyの登録はPhpStormからもできるらしいが、DBGp Proxyがサーバー上にある場合は試したができなかった（DBGp Proxyがローカルにある場合はできました）

# 参考

[Multiuser debugging via Xdebug proxies](https://www.jetbrains.com/help/phpstorm/multiuser-debugging-via-xdebug-proxies.html)

[SSHトンネル経由のリモートデバッグ - 公式ヘルプ | PhpStorm](https://pleiades.io/help/phpstorm/remote-debugging-via-ssh-tunnel.html#prepare-the-debugging-engine)

[ゼロコンフィギュレーションデバッグ - 公式ヘルプ | PhpStorm](https://pleiades.io/help/phpstorm/zero-configuration-debugging.html#activate-debugger-on-server)

[[PHP] Xdebug のリモートデバッグ、理解していますか？ - Qiita](https://qiita.com/castaneai/items/d5fdf577a348012ed8af)

[【PHP】リモートマシンのデバッグを、「複数人で」やる【Xdebug×DBGpProxy】 - Qiita](https://qiita.com/takudo/items/35d2fd3c6e9846715bf4)

[Xdebug Documentation](https://xdebug.org/docs/)

[DBGp Proxy Tool](https://xdebug.org/docs/dbgpProxy)