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に追記
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
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の内容を次のように設定します。
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000,
"stopOnEntry": true,
"pathMappings": {
"{win-sshfsでマウントしたディレクトリ}": "{win-sshfsで設定したドライブレター}"
}
}
デバッグ実行
PHPファイルの適当な行にブレークポイントを張ってからデバッグ実行します。
※ファイアウォールの許可ダイアログが表示された場合は許可します。
ブラウザからアクセスしてブレークポイントで停止すれば正しく設定されています。
以上でVSCodeから直接サーバ上のリソース編集及びデバッグが行えるようになりました。