【VirtualBox】仮想LinuxのLocalhostにホストOSからアクセスする方法

Nuxt.jsの環境構築の際に、IPアドレスでアクセスにすることで
仮想OSのLinuxに建てたNode.jsサーバーにホストPCのWindowsから
アクセスできるようにしたのですが、
これとは別に方法があるので、その方法を今回書いておこうと思います。

Nuxt.jsやRailsの初期設定では「http://localhost:3000」とか
ローカルホスト指定でアクセスするようになっていたりするのですが、
VirtualBox上に建てた仮想OSのLinuxがCUIだったりすると
コンソールのサーバー仕様のために、
「ここでWebブラウザを表示して…」とかが出来ません。

そこで、IPアドレスでアクセスする設定を前は行ったのですが、
今回はローカルホスト指定のままでアクセスする方法です。

※追記 2020/02/16
GuestAdditionsをインストールしないときちんと動かないみたいです。
普段は仮想OS入れた直後にインストールしてしまうので気付かなかった…
この辺はちょっと注意しないとね…

１．VirtualBoxのネットワーク設定を変更する

必要なのはこの設定だけです。

VirtualBoxの対象の仮想OSのイメージを選択して、

「設定」から「ネットワーク」を選択します。

ここで、現在使用しているアダプター(大体は1)から

「高度」の部分をクリックして展開します。

そうしますと、なんか難しそうな項目が幾つか出てきます。

それぞれを理解するのはまあ、その時でいいと思います。

今はその時ではない。

とりあえず、ここから「ポートフォワーディング」を選択します。

すると、設定画面が出てきますので、ここで設定を行います。

右側のプラスボタンをクリックして、項目を追加します。

下のような感じ。

名称はまあ、分かれば何でもいいです。

ゲストポートがこの仮想OSイメージの「アクセスされる」ポート

ホストポートがWindowsから「アクセスする」ポート

です。

上記の場合は、

「Windowsからローカルホスト3030でアクセスした時は

　この仮想OSのローカルホストの3000に対してアクセスしたことにするよ」

というような設定になります。

設定したら、「OK」を押して設定を適用しましょう。

今のVirtualBoxだと、再起動しなくても設定は適用されるみたいですね。

２．Windowsからアクセスしてみる

ポートフォワーディングが設定出来たら

仮想OSの方でNuxt.jsを立ち上げてアクセスしてみましょう。

WindowsからChromeなどのWebブラウザで

「http://localhost:3030」にアクセスします。

ここで、Chrome上に表示が出来れば成功です。

３．開発の際に便利なこと

今回はポートフォワーディングの機能を使用しました。

この機能と共有フォルダなどの設定も併せて使用すれば、

・仮想OS上でサーバーを立ち上げる

・作業は共有フォルダでWindowsから編集する

・編集されるとNuxt.jsはサービスの表示情報などを自動で更新してくれる

・表示が正しく出来ているかどうかはWindowsのWebブラウザから確認

といった、

作業自体は慣れたところで快適に行うことが出来ると思います。

まあ、問題なければLinux環境オンリーでやったりしてもいいと思いますけど…

毎回、まっさら環境から構築したりするのもしんどいですしね。

環境がそれなりにリッチなら、

VirtualBoxの仮想環境を使うことで、

快適な開発環境を整えることも出来そうだよねって感じで、

今回こんな〆にしようと思います。まる