VSCodeを使おう!-仮想マシン×SSH接続×PHP-

投稿日 : 2019年06月11日   更新日 : 2019年10月12日
カテゴリー : 技術情報 / PHP/javascript/CSS/nodejs / 開発環境(VSCode/Pleiades/Xampp/Hyper-V etc)
VSCodeを使おう!-仮想マシン×SSH接続×PHP-の画像

こんにちわ、PHPエンジニアのエンジニア婦人(@naho_osada)です。
私はPHPエンジニアとして7年~の経験があります。WordPressは2年半~の経験があります。その他、jQuery、HTML、CSSも使用します。
ここでは主に過去に納品した案件や自サイト運営(エンジニア婦人ノート)で遭遇したことについて書いています。

※本記事は、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 FS インストール-Visual Studio Code-

インストールができたら、エクスプローラーに戻ります。

SSHの接続設定

「SSH FILE SYSTEM」という項目ができています。このタブを開いて右クリックし、「Create a SSH FS configuration」を選択します。

SSH FSの接続設定-Visual Studio Code-
SSH FSの接続設定-Visual Studio Code-

SSH-FSの設定ファイルがVisual Studio Code上に開きます。

Nameに任意の名前を入れます。Locationはそのままでいいでしょう。

Creat new configuration-Visual Stduio Code-
Creat new configuration-Visual Stduio Code-

入力出来たら「SAVE」を押下します。

SSH接続の詳細設定が開きます。

SSH接続詳細設定-Visual Studio Code-
SSH接続詳細設定-Visual Studio Code-
  • HOST:接続先のホスト名を入力します。IPアドレスでも問題ありません。
  • Port:22
  • Root:接続するディレクトリの場所を指定します。/var/www/htmlなどになります。環境によって異なります。
  • Username:サーバーにログインするユーザー名を入力します。
  • Password:サーバーにログインするパスワードを入力します。

その他項目は必要であれば入力します。簡易的に使うにはここまでの情報で問題ありません。

設定が完了したら下の「Save」を押下します。

SSH Connect-Visual Studio Code-
SSH Connect-Visual Studio Code-

エクスプローラーに戻ると、SSH FILE SYSTEMSの中に先ほど設定した名称(ここではvartual)が表示されています。

ここを右クリックして、「Connect as Workspace folder」を選択します。

SSH接続が完了した状態-Visual Studio Code-
SSH接続が完了した状態-Visual Studio Code-

SSH接続が完了すると、名称の左の●が緑色に変わります。ワークスペース内に接続先から読み込んだディレクトリとファイルの情報が表示されます。

試しに、このエクスプローラーからファイルを作成してみます。

表示されているSSH接続名称の上で右クリックし、「新しいファイル」を選択します。選択したらファイル名を入力するテキストボックスが出てくるので、任意のファイル名を設定します。ここではtest.phpとしました。

SSH接続で新規ファイル作成-Visual Studio Code-
SSH接続で新規ファイル作成-Visual Studio Code-

ファイルを保存したら、ブラウザからアクセスします(ここではhttp://xxx.xxx/test.phpになります)。

SSH接続で作成したファイル-Visual Studio Code-
SSH接続で作成したファイル-Visual Studio Code-

ファイルに記述した内容が表示されていたらOKです。Visual Studio Codeから新たにファイルを作成し、サーバー上に直接保存でき、即時にブラウザで確認できました。

SSH接続で快適なファイル編集を

直接ファイルを編集して、アップロード作業がなく反映されるのはとても楽です。jsやcssをちょっと修正して確認したい、XDebugかけるほどの修正ではないときにとても重宝します。

SSH接続でXDebugはできないので(※)、XDebugを使いたいときはローカルにソースを用意して、そのファイルを見ながらリモートデバッグするよ、という設定になります。

2019年6月に1.3.5のリリースで、RemoteDevelopmentが正式サポートされました。
これにより、これまで「できないことはないけれど、このままではできないし、何かと設定が多く必要で険しい道のり」がとても簡単になりました。
当サイトも「VSCodeを使おう!-仮想マシン×RemoteDevelopment×PHP-」で設定方法を記載しています。

ソースレビュー企画-私にソースレビューをさせてください!-

皆様のプログラムのソースを、私に読ませてください!

ソースレビュー企画-私にソースレビューをさせてください!-

プログラムを勉強し始めたばかりの方から、業界云十年のベテランの方でも大歓迎です!どんなソースでもありがたく拝見します!

※無料です

ソースレビュー企画-私にソースレビューをさせてください!-の詳細、お申し込みはこちらからお願いします。

運営サイト紹介

みんなのきょうのごはん-みんごは-

みんなのきょうのごはん-みんごは-

「みんなのきょうのごはん-みんごは-」きょうのみんなのごはんは?Twitterに投稿された美味しそうな「食べ物」画像を、リアルタイムで表示します。

みんごははここからアクセスしてね !

その他広告