ホーム > 技術情報 > VSCodeを使おう!-仮想マシン×RemoteDevelopment×PHP-

VSCodeを使おう!-仮想マシン×RemoteDevelopment×PHP-

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

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

前回はSSH接続の設定を紹介しました。

XAMPPでXDebugを使う設定をしたように、今度は「仮想マシンでリモートデバッグをする」ことに挑戦します。

ここではRemoteDevelopmentを用いた、「仮想マシンでリモートのファイルを直接編集しつつ、そのままデバッグするやり方」を紹介します。

RemoteDevelopmentについて

2019年6月に1.3.5のリリースで、RemoteDevelopmentが正式サポートされました。

通常、これまでは「リモートデバッグとはいっても、リモートサーバーにあるファイルを実行しつつ、ローカルにあるデバッグ用のソースでブレイクポイントで停止、確認する」やり方だったため、ローカルとサーバーのソースを常に一致させておく必要がありました。SSHでリモートのファイルを直接編集したとしても、デバッグをかけたければローカルソースも反映させておかなければなりませんでした。

RemoteDevelopmentを使うと、ローカルとリモートのソースを同期させておかなければならない煩わしさから解放されます。

事前準備

RemoteDevelopmentのインストールと接続設定

VisualStudioCodeを立ち上げ、拡張機能から「RemoteDevelopment」をインストールします。

RemoteDevelopmentのインストール-VisualStudioCode-
RemoteDevelopmentのインストール-VisualStudioCode-

インストールできたら接続設定をします。左側のメニューに新たにできたパソコンマークを押下、CONNECTIONSの歯車を押下します。

RemoteDevelopmentの接続設定-VisualStudioCode-
RemoteDevelopmentの接続設定-VisualStudioCode-

「C:\Users\owner\.ssh\configs」を選択します。

.ssh設定ファイルを開く-VisualStudioCode-
.ssh設定ファイルを開く-VisualStudioCode-

以下のように記述して保存します。

Host 接続名称(任意の名称)        
    HostName 接続する仮想マシンのホスト名(IPアドレス)
    User サーバーにログインするユーザー名
    Port 22
リモート接続設定-VisualStudioCode-
リモート接続設定-VisualStudioCode-

ここではホスト名を「vertual」としました。

左下の「><」アイコンを押下して「Remote-SSH: Connect To Host…」を選択します。

作成したvertualが選択肢に出てくるので、「vertual」を選択します。

SSHConnect-VisualStudioCode-
SSHConnect-VisualStudioCode-

接続が開始されると、先の設定ファイルで指定したユーザーのパスワードを3回ほど聞かれます。パスワードを聞かれないようにする設定もありそうですが、ここは都度入力するものとしています。

接続が完了すると、ターミナルに「Connected to SSH Host – Please do not close this terminal」と表示されます。

リモート接続完了-VisualStudioCode-
リモート接続完了-VisualStudioCode-

「SSH接続してるから、ターミナルを閉じないでください。」

リモートファイルを開く

接続が完了したら、エクスプローラーからフォルダを開きます。VSCodeで操作したい場所を選択します。

ここでは/var/www/htmlを選択しました。

リモートフォルダの選択-VisualStudioCode-
リモートフォルダの選択-VisualStudioCode-

サーバーのログインパスワードを聞かれるので(2回)、入力してクリアすると、エクスプローラーに指定した場所のディレクトリ・ファイル一覧が表示されます。

リモートのディレクトリ・ファイル一覧-VisualStudioCode-
リモートのディレクトリ・ファイル一覧-VisualStudioCode-

ここで編集したファイルは即反映されます。追加したファイルも即反映されます。SSH FSを使ったものと同じ挙動になります。

削除は容赦なく削除されるので注意してください。Ctrl+Zで戻ることはありません(仮想マシン、CentOSなので)

PHP拡張機能を「サーバーに」インストールする

リモートファイルで開発するために、PHPの拡張機能をサーバーにインストールします。

RemoteDevelopmentでSSH接続をした状態で拡張機能のボタンを押下すると、インストールボタンが少し変わります。

拡張機能のボタンが「インストールonSSH」になる-VisualStudioCode-
拡張機能のボタンが「インストールonSSH」になる-VisualStudioCode-

インストール先がリモートサーバーになります。

XAMPPで設定したときはローカルにPHP拡張機能をインストールしましたが、今回はリモートサーバーにアクセスして直接開発するので、拡張機能をリモートサーバーにインストールします。

このインストールはボタン一つでVisualStudioCodeがやってくれるので、特に心配することはありません。

以前と同様、

  • PHP Debug
  • PHP Extention Pack
  • PHP IntelliSense

の3つをインストールしておきます。

php.validate.executablePathについて

XAMPPで実行するときは「PHPの実行ファイルがないから指定してよね!」と言われて設定するのですが、リモートサーバー上、すなわちLinux上ではこの設定は不要です。

同様「PHPの実行ファイルがないから(ry」と言われますが、該当部分をコメントアウトしてしまって支障はないようです。

デバッグを設定する

Visual Studio Codeを使おう!-VSCode×XAMPP×XDebug編-で設定したときと同じように、launch.jsonに記述します。

右側のデバッグの虫アイコンを押下し、設定の歯車を押下します。

Debug設定を開く -Visual Studio Code-
Debug設定を開く -Visual Studio Code-

launch.jsonに以下の記述をします。

launch.json -Visual Studio Code-
launch.json -Visual Studio Code-
"pathMappings" : {"${workspaceRoot}" : "${workspaceRoot}"}

左側がデバッグを実行するサーバールート、右側がデバッグ元のソースを読み込むルートです。

現在はリモート接続している状態でデバッグを行います。

つまり、サーバーとローカルで見ているソースが一緒になるので、どちらも「${workspaceRoot}」と記述しています。

XAMPPで設定した時と理屈は同じです。

あとはXAMPPで行ったときと同じように、F5を押下してデバッグを起動してブレイクポイントを張り、ブラウザで該当のURLにアクセスすればデバッグができます。

感想

夢にまで見た(かもしれない)、リモートのソースを直接編集しながらデバッグまでしてしまう方法です。今まではやろうと思ったらとても大変な工程を踏まなければなりませんでした(試しましたが、本当に大変でした。

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

これを行うことで、都度アップロードする煩わしさから解放されます。

また、XAMPPで開発して本番のLinux環境に適用すると「XAMPPでは起きなかったエラーが本番で起こる」ことがありますが、直接Linuxサーバーで開発することにより事故を防ぐ確率を上げることができます。

更に、リモートのLinuxサーバーにGitを入れることにより、GitHubとの連携が楽になります。必要なソースを取得し、また変更したらTeraTermターミナルからcommit&pushできてしまいます(※別途設定は必要です。ここでは省略します。また、試していませんがVSCode拡張機能からもできるようですね。ソース二重管理の煩雑さがなくなるのではないでしょうか。)

削除だけは気を付けて、良好なリモートデバッグライフを!

楽しい物造りを

NaoLight

自分のブログやサイトを、楽しく作ってもらえたら。

プログラムを使って望み通りに、拡張しやすく、自分の思うように。

できたときに、すごく楽しい!と思ったら。

控えめに言って、「最高です」。

NaoLight -NAOT-(なおらいと、なおと、と呼んでください)はそんな思いをカタチにする、WordPressのテーマです。

ご購入はこちらからお願いします(BOOTHへ移動します)。

Nao Light-NAOT-公式サイト