はじめに

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

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

概要

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

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

最終的には**「VirtualBoxでUbuntuを起動し、ホストOS側のVScodeからUbuntu環境で開発ができる」**ことを目標としています。
以下のような感じです。

環境

OS: Windows10 もしくは macOS Catalina

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

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

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

VirtualBoxのインストール

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

以下のサイトからインストーラをダウンロードしてインストールしてください。
設定はデフォルトのままで大丈夫です。
Oracle VM VirtualBox

対応するOSを選択する。

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

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

以下のサイトからダウンロードしてください。
Ubuntu Desktop 日本語 Remixのダウンロード | Ubuntu Japanese Team

VScodeのインストール

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

以下のサイトからダウンロードしてインストールしてください。
設定はデフォルトのままで大丈夫です。
Visual Studio Code – コードエディター | Microsoft Azure

対応するOSを選択する。

1. 「VirtualBoxでのUbuntuの起動」

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

仮想環境の作成

VirtualBoxを開いて仮想環境を作っていきます。
「Oracle VM VirtualBoxマネージャー」を起動してください。
すると、こんな感じの画面が起動します。
（私の環境でのスクリーンショットです。現在は「ml_01」という仮想環境があります。）

以下の通りに操作してください。

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

ここまでが完了すると、以下のように仮想マシンができあがります。

しかし、このまま起動してもUbuntuは起動しません。先程ダウンロードしたUbuntu18のisoイメージを挿入していないからです。

Ubuntu18のisoイメージの挿入

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

「設定」をクリック
「ストレージ」をクリック
以下の画像の①、②の順番にクリックし、「Choose a disk file...」より、先程ダウンロードしたUbuntu18のisoイメージを挿入します。

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

Ubuntu18のインストール

以下のような画面が立ち上がります。

「Ubuntuをインストール」をクリックし、設定を入力します。
この際の設定は適切なものを選びましょう。基本的には以下のようになりますが、適宜変更してください。
今回は「最小インストール」を選択し、仮想環境上に余計なアプリケーションがインストールされないようにしています。

ここまで来れば、あとは仮想マシンへのUbuntu18のインストールの完了を待つだけです。
インストールが終わったら仮想マシンの再起動を求められるので、再起動してそのままログインしてみましょう。
すると…

起動できました！
これで前半の**「VirtualBoxでのUbuntuの起動」**は完了です！

2. 「VScodeとUbuntuの連携」

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

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

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

openssh-serverの導入

Ubuntu側で端末を開きます。Ubuntuではこの端末でLinux/Unixのコマンドを使うことができます。（ターミナルとも呼びますが、本記事ではVScodeのターミナルとの混同を避けるため端末と呼びます。）

以下のコマンドでUbuntuにopenssh-serverをインストールします。これによってホスト側からのアクセスが可能になります。

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

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

VirtualBoxの設定

次に、VirtualBoxの設定からホストOSとゲストOSを接続します。
「設定 -> ネットワーク -> 高度 -> ポートフォワーディング」の順に操作し、設定を以下のように追加します。

これによってホストOSのlocalhost:2222とゲストOSのlocalhost:22が接続されました。

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

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

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

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

接続しても良いか聞かれることがあるので、yesと入力
パスワードを尋ねられるので、インストール時に設定したパスワードを入力しましょう。
すると…

接続できました！
この接続は仮想環境が起動している時にしか動作しないので気をつけましょう。

VScode SSH FSでフォルダ展開

では、続いてフォルダ展開の方を進めていきます。
これにはVScodeの拡張機能**「SSH FS」**を使用します。
左側のメニューから拡張機能を選択し、検索してみましょう。

此方の拡張機能をインストールします。

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

SSH FS: Create a SSH FS configurationと入力し、Enterキーを押すと設定作成画面に遷移します。
Nameに任意の名前を入力し、Saveをクリックしましょう。

すると、設定画面に遷移するので各設定を入力します。
以下のように設定しましょう。

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

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

最後に、左下のSSH FILE SYSTEMSと表示されている場所をクリックし、設定したSSH FSを右クリックし、Connect as Workspace folderを選択すると…

接続できました！
この接続も先程同様、仮想環境が起動している時にしか動作しないので気をつけましょう。

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

おわりに

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

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