ホーム > 技術情報 > Visual Studio Codeを使おう!-仮想マシン×SSH接続編-

Visual Studio Codeを使おう!-仮想マシン×SSH接続編-

投稿日 : 2019年06月11日   更新日 : 2019年06月23日
カテゴリー : PHP/javascript/CSS / 技術情報 / 開発環境(Pleiades/Eclipse/Xampp他) / 仮想マシン
Visual Studio Codeを使おう!-仮想マシン×SSH接続編-の画像

前回は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を使いたいときはローカルにソースを用意して、そのファイルを見ながらリモートデバッグするよ、という設定になります。

※できないことはないけれど、このままではできない。何かと入れたり設定が必要で、険しい道のりが待っています。