【超初心者向け】VirtualBoxとVSCodeの連携

start virtualbox and vscode Webアプリ開発

VirtualBoxで起動したゲストOSのウィンドウとホストOSのウィンドウを行ったり、来たりして開発するのは面倒ですよね!
そんな時は、ホストOSとゲストOSをsshで繋いでホストOS側だけで操作できるようにしましょう。
本記事では、ホストOS側にVSCodeと拡張機能のRemoteSSH、ゲストOS側にopenssh-serverをインストールして実現させる手順を紹介します。

Linux(Ubuntu)側の準備

openssh-serverのインストール

ゲストOSとホストOSがsshを使用して接続できるようにインストールします。
VirtualBoxで起動しているゲストOSで下記コマンドを実行するとインストールできます。

sudo apt update
sudo apt install -y openssh-server

IPアドレスの確認

ホストOSからsshで繋ぐために、ゲストOSのIPアドレスを知っておく必要があります。
下記コマンドを実行してゲストOSのIPアドレスを出力します。

ip addr show

実行後、enp0s3のようなネットワークインタフェース名のinetに記載されたIPアドレスを控えておきましょう。

ホストOS(Windows)側の準備

拡張機能のインストール

下図のようにVSCodeの「拡張機能」タブで「Remote」を検索します。
Microsftが提供する「Remote – SSH」を見つけたら、Installボタンをクリックし、少し待つとインストール完了です。

Install Remote SSH
Remote – SSH のインストール

Remote Explorerの設定

まず、下図のように「Remote Explorer」タブを開きます。
開くとSSHというフィールドが表示されています。そこにマウスカーソルを持っていくと+マークが表示されるので、それをクリックします。

configure ssh
sshの設定

+マークのクリック後、入力枠が表示されます。
ここで、「ssh ゲストOSのユーザ名@ゲストOSのIPアドレス」を入力し、Enterを押します。
入力後、「Select SSH configuration file to update」と表示された入力枠と選択肢が表示されます。
こだわりがなければ、選択肢の一番上にある「C:\ユーザ名\.ssh\config」を選択し、設定完了です。

Remote Explorer(SSH)の利用

設定が完了すると、SSHフィールドに追加したIPアドレスが表示されます。
マウスカーソルをあてると、下図のように矢印が表示されるので、これをクリックします。

connect ssh
sshに接続

クリック後、OSの種類、継続の確認が表示されます。
どちらもEnterで次に進み、最後にパスワードを確認された時にゲストOSのパスワードを入力します。
これでSSHでゲストOSにログインしたことになります。

ゲストOSにVSCodeからログインできたら表示されるWelcomeタブ、または、ウィンドウ横のエクスプローラータブから「Open Folder」で開発プロジェクトのフォルダを開きます。
開く際に再度パスワード入力を行います。

open folder
リモートOSのフォルダを開く

フォルダが開けると、ファイルの参照、編集に加え、ホストOS、ゲストOS双方向でのファイルの移動が可能になります。
また、Ctrl +@キーでターミナルを開けば、VSCode上からLinuxのコマンドも実行可能です。

opened-folder and terminal
フォルダが開けた状態

補足:ゲストOS側への拡張機能のインストール

VSCodeで拡張機能を色々インストールしていても、そのままではSSH接続時は使えません。
SSH接続時も使えるようにするには、拡張機能タブからLocalにある対象機能の「Insatal in SSH」ボタンをクリックして、ゲストOS側にインストールしなおす必要があります。

感想

VSCodeでゲストOSに接続すると、画面移動のだけでなく、開発環境のセットアップも必要以上にやらなくて済むから本当に便利!

コメント

タイトルとURLをコピーしました