VirtualBoxとVScodeの連携術 ~ 仮想環境のUbuntu18LTSにSSH接続する ~

## はじめに

**「Windowsじゃ開発なんてできない……ッ！」**
**「壊れても大丈夫なパソコンが欲しい………ッッ！」**
**「チームメンバーにWindows勢とMac勢が両方いて動作が安定しない……ッッッ！！」**

そんな方にこそ読んで欲しい記事です。VirtualBoxをご存知の方は後半からお読みください。

## 概要

初投稿です。拙い部分もあるかと思いますが、最後まで読んでいただけると幸いです。

前半は**「VirtualBoxでのUbuntuの起動」**、後半は**「VScodeとUbuntuの連携」**となっております。
既にVirtualBoxで仮想環境を立ち上げている方は後半からお読みください。

最終的には**「VirtualBoxでUbuntuを起動し、ホストOS側のVScodeからUbuntu環境で開発ができる」**ことを目標としています。
以下のような感じです。
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/a54e35dd-ac2a-1938-300c-a17a4dbd931e.png">

## 環境

- OS: Windows10 もしくは macOS Catalina

※ 記事内のスクリーンショットはMacOS Catalinaのものとなっていますが、Windowsでも同様の手順で環境構築が可能です。

## 0. 必要なもののダウンロード/インストール

前準備として、環境構築に必要なものをインストールしていきます。
既にダウンロード/インストールが完了しているものについては飛ばしてしまって構いません。

### VirtualBoxのインストール

今回の主役である**VirtualBox**です。
**ホストOSの上でゲストOSを動作**させます。
今回の場合はホストOSがWindows/Mac、ゲストOSがUbuntuです。

以下のサイトからインストーラをダウンロードしてインストールしてください。
設定はデフォルトのままで大丈夫です。
[Oracle VM VirtualBox](https://www.virtualbox.org/)
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/d5b7c09e-8895-33d8-0da1-e08a6c68874c.png">
対応するOSを選択する。
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/fb47fcc3-7626-e76d-b6ac-cd3b9d6d618d.png">

### Ubuntu18のisoイメージのダウンロード

**Ubuntu18のisoイメージ**をダウンロードしましょう。
isoイメージとは、CD等の光学ディスクに保存するデータの形式です。今回はPC上にisoイメージを保存し、VirtualBoxにそのデータを挿入することでOSを展開します。

以下のサイトからダウンロードしてください。
[Ubuntu Desktop 日本語 Remixのダウンロード | Ubuntu Japanese Team](https://www.ubuntulinux.jp/download/ja-remix)
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/43b93be6-a783-a07b-3f4d-0cc57c17376e.png">

### VScodeのインストール

統合開発環境に近いエディタである**VScode**をインストールします。後半のUbuntuとの連携で使用します。

以下のサイトからダウンロードしてインストールしてください。
設定はデフォルトのままで大丈夫です。
[Visual Studio Code – コード エディター | Microsoft Azure](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/03daf9e3-dc5f-2590-c0d9-6d352fee0e8a.png">
対応するOSを選択する。
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/71cf4688-aebb-b22b-bd04-0f995bbe5e5a.png">

## 1. 「VirtualBoxでのUbuntuの起動」

前半戦、張り切っていきましょう。
前半は**「VirtualBoxでのUbuntuの起動」**ということで、VirtualBoxを利用して仮想環境を立ち上げていきます。
Ubuntu18の仮想環境を構築することが目標となります。

### 仮想環境の作成

VirtualBoxを開いて仮想環境を作っていきます。
「Oracle VM VirtualBoxマネージャー」を起動してください。
すると、こんな感じの画面が起動します。
（私の環境でのスクリーンショットです。現在は「ml_01」という仮想環境があります。）
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/9d7a3c7b-aa69-8bfd-2e5c-dfb94158eb2e.png">
以下の通りに操作してください。

1. 「新規」をクリック
2. 任意の「名前」、任意の「マシンフォルダー」を入力する。タイプは「Linux」、バージョンは「Ubuntu(64-bit)」を選択する。
3. 仮想環境に割り当てるメモリのサイズを指定する。テストでは「4096MB」にしました。
4. 「仮想ハードディスクを作成する」を選択する。
5. 「VDI」を選択する。
6. 「可変サイズ」を選択する。
7. 仮想環境に割り当てるファイルのサイズを指定する。テストでは「50GB」にしました。

ここまでが完了すると、以下のように仮想マシンができあがります。
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/9cab12d2-9810-3a3c-f384-b63b978d8b9e.png">
しかし、このまま起動してもUbuntuは起動しません。先程ダウンロードした**Ubuntu18のisoイメージ**を挿入していないからです。

### Ubuntu18のisoイメージの挿入

以下のように設定しましょう。

1. 「設定」をクリック
2. 「ストレージ」をクリック
3. 以下の画像の①、②の順番にクリックし、「Choose a disk file...」より、先程ダウンロードした**Ubuntu18のisoイメージ**を挿入します。
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/0ab34943-b8b4-67f0-32f1-f3e37a15411e.png">

これで準備完了です！
「起動」をクリックしてみましょう！

### Ubuntu18のインストール

以下のような画面が立ち上がります。
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/aa5309e6-751a-837d-d460-79fa2681fab3.png">
「Ubuntuをインストール」をクリックし、設定を入力します。
この際の設定は適切なものを選びましょう。基本的には以下のようになりますが、適宜変更してください。
今回は「最小インストール」を選択し、仮想環境上に余計なアプリケーションがインストールされないようにしています。
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/48e4f3d3-6ad9-8104-85cf-f11bc5ce90fc.png">
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/457ad396-ab2b-2946-628d-1b83e400dbe4.png">
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/e6c0b031-9567-0200-24a0-ebc927469230.png">
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/3be0e01b-c0c3-7405-fa6f-6e6f556a5001.png">
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/6ef3d0cb-74ca-ea3e-0da9-aadb2a4cd809.png">
ここまで来れば、あとは仮想マシンへのUbuntu18のインストールの完了を待つだけです。
インストールが終わったら仮想マシンの再起動を求められるので、再起動してそのままログインしてみましょう。
すると…
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/ee798e05-a347-5bd2-3f37-0adf81cd315a.png">
起動できました！
これで前半の**「VirtualBoxでのUbuntuの起動」**は完了です！

## 2. 「VScodeとUbuntuの連携」

では、後半戦も張り切っていきましょう。
後半は**「VScodeとUbuntuの連携」**ということで、VScodeを利用して開発がしやすい環境を整えていきます。
下記の2つを達成することが目標となります。

1. ホストOS（Windows/Mac）からゲストOS（Ubuntu18）にVScodeの**ターミナル**からSSH接続する。
2. ホストOS（Windows/Mac）からゲストOS（Ubuntu18）のファイルにVScodeの**SSH FS**でSSH接続し、VScode上にフォルダを展開する。

さて、順番にやっていきましょう。

### openssh-serverの導入
Ubuntu側で**端末**を開きます。Ubuntuではこの**端末**でLinux/Unixのコマンドを使うことができます。（ターミナルとも呼びますが、本記事ではVScodeのターミナルとの混同を避けるため**端末**と呼びます。）
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/351ea7af-24c8-e984-ebcc-dc7407a296d0.png">
以下のコマンドでUbuntuにopenssh-serverをインストールします。これによってホスト側からのアクセスが可能になります。

```sh
sudo apt update
sudo apt install openssh-server  # 途中で[Yes/No]を聞かれるのでYを入力する
```

openssh-serverのインストールが完了したら、一旦Ubuntuをシャットダウンします。

### VirtualBoxの設定
次に、VirtualBoxの設定からホストOSとゲストOSを接続します。
「設定 -> ネットワーク -> 高度 -> ポートフォワーディング」の順に操作し、設定を以下のように追加します。
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/ed635049-f3a1-5bc1-1569-c84ce0995433.png">
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/8f4c6f66-1b93-037e-d614-76789c1346c8.png">
これによってホストOSのlocalhost:2222とゲストOSのlocalhost:22が接続されました。

### VScodeのターミナルからSSH接続

では、VScodeの**ターミナル**を開いてみましょう。
VScodeを起動後、
Windowsでは`Control+Shift+@`
Macでは``Control+Shift+` ``
で**ターミナル**を開くことができます。

この**ターミナル**で以下のコマンドを実行しましょう。

```sh
# $USERはインストール時に設定したものに適宜変更する
ssh $USER@localhost -p 2222
```

接続しても良いか聞かれることがあるので、**yes**と入力
パスワードを尋ねられるので、インストール時に設定したパスワードを入力しましょう。
すると…
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/8638d3fc-6c3d-dc92-80ac-ca2f67b49751.png">
接続できました！
この接続は**仮想環境が起動している時にしか動作しない**ので気をつけましょう。

### VScode SSH FSでフォルダ展開

では、続いてフォルダ展開の方を進めていきます。
これにはVScodeの拡張機能**「SSH FS」**を使用します。
左側のメニューから拡張機能を選択し、検索してみましょう。
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/8fcd7aac-5952-9cf9-4970-ae959e548d8b.png">
此方の拡張機能をインストールします。

その後、コマンドパレットを開きます。
Windowsでは`Control+Shift+P`
Macでは`Command+Shift+P`
で**コマンドパレット**を開くことができます。

`SSH FS: Create a SSH FS configuration`と入力し、Enterキーを押すと設定作成画面に遷移します。
Nameに任意の名前を入力し、Saveをクリックしましょう。
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/d888678d-7db9-4809-f0fb-52a2f7ff3143.png">
すると、設定画面に遷移するので各設定を入力します。
以下のように設定しましょう。

- Host: localhost
- Port: 2222
- Root: /home/$USER
- Username: $USER
- Passward: $PASSWARD
- その他: 設定の必要なし

上記の*$USER*、*$PASSWARD*についてはUbuntuのインストール時に設定したユーザー名とパスワードを入力してください。
設定の入力が完了次第、Saveをクリックします。

最後に、左下の**SSH FILE SYSTEMS**と表示されている場所をクリックし、設定したSSH FSを右クリックし、`Connect as Workspace folder`を選択すると…
<img width=100% alt="img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546756/d3e8d543-0236-ec75-9b35-0e00820b2941.png">
接続できました！
この接続も先程同様、**仮想環境が起動している時にしか動作しない**ので気をつけましょう。

これで後半の**「VScodeとUbuntuの連携」**も完了です！お疲れさまでした！！

## おわりに

昨今ではWSL2が良い感じになってきていますが、やはり「壊しても大丈夫」というのが大きいので、VirtualBoxは利用しやすいなぁと思います。
このままではGUIを使用した開発ができないので、その点についての記事も上げたいですね。

もし質問・間違いなどありましたら、ご連絡ください。読んでいただきありがとうございました。