こんにちわ、PHPエンジニアのエンジニア婦人（@naho_osada）です。
PHPエンジニアとして9年～の経験があります。
※本記事は、VSCodeのRemoteDevelopmentがβ版だったときの方法として記述しています。
単にファイル編集を遠隔操作したいだけでしたらこの方法でもいいと思いますが、もしリモートファイルの操作をしながらPHPデバッグも同時にやりたい、と考えている場合は、
「VSCodeを使おう！-仮想マシン×RemoteDevelopment×PHP-」
をおすすめします。
また、XAMPP環境で開発している場合は、ローカルソースを直接参照しているので、SSH FSもRemoteDevelopmentも不要です。
前回の記事（XAMPP×XDebug編）はPC内にあるローカル環境でデバッグできるように設定しました。
今回はローカルのVSCodeから仮想マシンサーバーのファイルにアクセスし、直接触れるようにします。
ローカルで開発したソースをいちいちアップロードするのは、結構面倒ではないですか？
これのメリットは何といっても、XDebugをかけるまでもないような、軽微なものやHTMLやjavascript、CSSを記述するときに重宝します。ローカルで作業していると、都度サーバーにアップロードする作業がどうしても発生しますよね。
そんなとき、SSH接続を使えば、ローカルのVSCodeのエディタを編集したら即！サーバーに反映されます。
※SSH接続を使って即時反映させるやり方は、開発環境相手のみにしてください。本番環境相手に直接編集してしまい、何かが起こった場合に非常に困ります。即時反映されてしまうので。
SSH FSをインストールする
Visual Studio Codeを起動し、拡張機能からSSH FSと入力して検索します。
インストールができたら、エクスプローラーに戻ります。
SSHの接続設定
「SSH FILE SYSTEM」という項目ができています。このタブを開いて右クリックし、「Create a SSH FS configuration」を選択します。
SSH-FSの設定ファイルがVisual Studio Code上に開きます。
Nameに任意の名前を入れます。Locationはそのままでいいでしょう。
入力出来たら「SAVE」を押下します。
SSH接続の詳細設定が開きます。
- HOST：接続先のホスト名を入力します。IPアドレスでも問題ありません。
- Port：22
- Root：接続するディレクトリの場所を指定します。/var/www/htmlなどになります。環境によって異なります。
- Username：サーバーにログインするユーザー名を入力します。
- Password：サーバーにログインするパスワードを入力します。
その他項目は必要であれば入力します。簡易的に使うにはここまでの情報で問題ありません。
設定が完了したら下の「Save」を押下します。
エクスプローラーに戻ると、SSH FILE SYSTEMSの中に先ほど設定した名称（ここではvartual）が表示されています。
ここを右クリックして、「Connect as Workspace folder」を選択します。
SSH接続が完了すると、名称の左の●が緑色に変わります。ワークスペース内に接続先から読み込んだディレクトリとファイルの情報が表示されます。
試しに、このエクスプローラーからファイルを作成してみます。
表示されているSSH接続名称の上で右クリックし、「新しいファイル」を選択します。選択したらファイル名を入力するテキストボックスが出てくるので、任意のファイル名を設定します。ここではtest.phpとしました。
ファイルを保存したら、ブラウザからアクセスします（ここではhttp://xxx.xxx/test.phpになります）。
ファイルに記述した内容が表示されていたらOKです。Visual Studio Codeから新たにファイルを作成し、サーバー上に直接保存でき、即時にブラウザで確認できました。
SSH接続で快適なファイル編集を
直接ファイルを編集して、アップロード作業がなく反映されるのはとても楽です。jsやcssをちょっと修正して確認したい、XDebugかけるほどの修正ではないときにとても重宝します。
SSH接続でXDebugはできないので（※）、XDebugを使いたいときはローカルにソースを用意して、そのファイルを見ながらリモートデバッグするよ、という設定になります。
※ 2019年6月に1.3.5のリリースで、RemoteDevelopmentが正式サポートされました。
これにより、これまで「できないことはないけれど、このままではできないし、何かと設定が多く必要で険しい道のり」がとても簡単になりました。
当サイトも「VSCodeを使おう！-仮想マシン×RemoteDevelopment×PHP-」で設定方法を記載しています。
