VSCodeでサーバ上のソースを直接編集しながらPHPデバッグできる環境を構築する

EC2にSSHで繋いでPHP開発をしていたけどWindows上のVSCodeでもEC2上のソース編集とデバッグをしたかったのでメモ。
# やりたいこと
・ローカルVSCodeでソース編集したいけどサーバと開発マシンで同じ開発資源を二重に管理したくない
・ついでにリモートデバッグもしたい
・開発マシン側ルータの設定を変更したくない(ルータのポートフォワーディング設定を行わずにxdebug使いたい)
・サーバ側でデバッグの為だけにポートを開放したくない(HTTP(S)、SSHポートのみ使用)

# 環境

* サーバ
    * Amazon Linux2	※Linuxならなんでもいいと思う
    * nginx1.12	※Apacheでもいけると思う
    * PHP7.2	※今どきのバージョンならなんでm(ry
* 開発マシン
    * Windows10
    * Visual Studio Code

# 前提
EC2側にアクセス可能な状態になっていること。

* Webサーバ
* PHP
* SSHサーバ

また編集する開発資源、ディレクトリに対してVSCodeのsshfs接続アカウントの書き込み権限が設定されていること。

###### サーバ側設定
# xdebugのインストール

```
sudo yum install php-devel
sudo yum install php-pear
sudo pecl install -a xdebug
-----
You should add "zend_extension=/usr/lib64/php/modules/xdebug.so" to php.ini
```

最後に表示されたxdebug.soへのパスをphp.iniに追記

```php.ini
zend_extension=/usr/lib64/php/modules/xdebug.so
xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_host=localhost
```

サービス再起動

```
sudo systemctl restart php-fpm
sudo systemctl restart nginx
```

###### 開発マシン側設定
# OpenSSHクライアントの設定
Windows10標準のOpenSSHクライアントを使用します。
(別のSSHクライアントを使う場合は下記と同様にRemote Forward設定してください)
.ssh配下に秘密鍵と設定ファイルを配置します。

尚、OpenSSHを初めて使用する場合は.sshディレクトリが存在しないのでコマンドプロンプトから作成します。

```
cd %USERPROFILE%
mkdir .ssh
```

```%USERPROFILE%/.ssh/config
Host ec2				//任意の接続名
    HostName test.com	//サーバのホスト名もしくはIPアドレス
    User root			//任意のユーザ
    Port 22
    IdentityFile ~/.ssh/test_keypair.pem	//秘密鍵ファイル指定(鍵認証でない場合はパスワード認証設定してください)
    RemoteForward 9000 localhost:9000		//SSHトンネル設定(xdebug標準ポートの場合)
```

configで設定した接続名に対してコマンドプロンプトからSSH接続できるか確認します。
(SSHトンネルを維持する為にリモートデバッグ時はコマンドプロンプトでSSH接続したままにしておく)

```
ssh ec2
```

# win-sshfsのインストール
[dokany v1.0.0.5000](https://github.com/dokan-dev/dokany/releases/download/v1.0.0/DokanSetup-1.0.0.5000.exe "dokany v1.0.0.5000")	(win-sshfsを動かすのに必要)
[win-sshfs 1.6.1.13-devel](https://github.com/feo-cz/win-sshfs/releases/download/1.6.1/WinSSHFS-1.6.1.13-devel.msi "win-sshfs 1.6.1.13-devel")

それぞれDLしてインストールします。

# win-sshfsの設定
インストールが完了するとデスクトップにwin-sshfsのアイコンができているはずなのでダブルクリックして起動し、
タスクトレイのwin-sshfsアイコンを右クリックして`Show Manager`をクリックし、`+Add`から接続情報を設定します。
[OpenSSHの設定](#opensshの設定)と同様に入力したら、Directoryにマウントしたいディレクトリを指定し任意のDrive Letterを選びます。

# VSCode SSH FSの設定
CTRL+SHIFT+Xを押し、拡張機能の`PHP Debug`と`SSH FS`をインストールします。
CTRL+SHIFT+Eを押し、ファイル一覧の一番下に追加された`SSH FILE SYSTEMS`内で右クリック、
`Create a SSH FS Configuration`を選択、適当な設定名を入力したら
次のように設定、保存します。

```
{
    "label": "ec2",
    "root": "{win-sshfsでマウントしたディレクトリ}",
    "host": "{サーバのホスト名もしくはIPアドレス}",
    "port": 22,
    "username": "{マウントディレクトリに書き込み権限のあるユーザ名}",
    "privateKeyPath": "/Users/{ユーザ名}/.ssh/test_keypair.pem",
    "password": false
}
```

`SSH FILE SYSTEMS`内に保存した設定が表示されるので右クリックして`Connect As Workspace Folder`をクリックします。

VSCodeのEXPLORERからマウントされたディレクトリ内にPHPファイルを作成し、ブラウザで表示される事を確認します。

```
<?php
echo 'test';
```
# VSCodeデバッグ設定
`Debug`メニューから`Add Configurations`と辿り`PHP`を選択します。
`Listen for XDebug`の内容を次のように設定します。

```launch.json
{
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "stopOnEntry": true,
            "pathMappings": {
                "{win-sshfsでマウントしたディレクトリ}": "{win-sshfsで設定したドライブレター}"
            }
}
```

# デバッグ実行
PHPファイルの適当な行にブレークポイントを張ってからデバッグ実行します。
※ファイアウォールの許可ダイアログが表示された場合は許可します。
ブラウザからアクセスしてブレークポイントで停止すれば正しく設定されています。

以上でVSCodeから直接サーバ上のリソース編集及びデバッグが行えるようになりました。