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 (win-sshfsを動かすのに必要)
win-sshfs 1.6.1.13-devel

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

win-sshfsの設定

インストールが完了するとデスクトップにwin-sshfsのアイコンができているはずなのでダブルクリックして起動し、
タスクトレイのwin-sshfsアイコンを右クリックしてShow Managerをクリックし、+Addから接続情報を設定します。
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から直接サーバ上のリソース編集及びデバッグが行えるようになりました。

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