【Mac】VirtualBox ＋ Vagrant で仮想マシン上に開発環境を構築する方法

今回は、Node.jsを使っていろいろと面白そうなことをしていくために、Mac環境に仮想マシンを用意して、仮想マシン上に開発環境を構築していきたいと思います。今回は、VirtualBoxとVagrantを用いる方法です。今回の方法では、簡単に仮想マシン上に開発環境を構築することができるのでかなりおすすめです。

今回の最終目標

仮想マシン上に開発環境を構築します。具体的には、「ホストマシンと仮想マシンのディレクトリの共有」「ホストマシンで開発して、仮想マシンで実行」をできる状態にします。

VirtualBoxとVagrantのインストール

今回は、VartualBox上にCentOSをインストールした仮想マシンを準備していきたいと思います。

VirtualBoxのインストール

VirtualBoxのインストールは、公式サイトからインストーラーをダウンロードして、インストーラーに沿ってインストールしていきたいと思います。
まず、以下のVirtualBox公式サイトへアクセスして、インストーラーをダウンロードしましょう。

VirtualBox公式サイト

ダウンロードが完了したら、インストーラーを起動します。インストーラーの「VirtualBox.pkg」をクリックして、インストールを進めていきます。

インストーラーに従って進めていけば、問題なくVirtualBoxがインストールされます。

Vagrantのインストール

VirtualBoxに続いて、Vagrantをインストールしていきましょう。こちらもVirtualBox同様、公式サイトにアクセスしてインストーラーのダウンロードをしていきましょう。下記のVagrant公式サイトからダウンロードが可能です。

Vargrant公式サイト

ダウンロードが完了したら、インストーラーを起動します。インストーラーの「Vagrant.pkg」をクリックして、インストールを進めていきます。

インストーラーに従って進めていけば、問題なくVagrantがインストールされます。
正しくVagrantがインストールされたか確認してみましょう。ターミナルを開いて次のコマンドを実行してみましょう。

$ vagrant -v

Vagrant 2.2.16

このようにバージョンが表示されたらOKです。

仮想マシンを作成、起動する

仮想マシンの作成（初期設定）

仮想マシンを作成するディレクトリを作成しましょう。今回は、「vagrant」ディレクトリの下に「centos7」という名前でOS名やバージョンが一目でわかるようにしておきます。（今回は、centos7をインストールします）

$ mkdir vagrant

$ cd vagrant

$ mkdir centos7

$ cd centos7

仮想マシンを作成したいディレクトリを作成して移動できたら、「vagrant init」コマンドを実行しましょう。「Vagrantfile」が自動的に生成されます。

$ vagrant init

「Vagrantfile」を編集していきましょう。まず、「config.vm.box = “base”」の記述を探しましょう。見つけたら、コメントアウトして、作成したい仮想マシンのOSに合わせて記述を追記しましょう。今回の場合は、「centos7」を指定するので、下記のように「Vagrantfile」の中身を書き換えます。

# config.vm.box = "base"
config.vm.box = "centos/7"

今回は、「centos7」を選択しましたが、「Vagrant Cloud」にその他にもいろいろな仮想マシンのBoxファイルが登録されています。好きなものを探してみましょう。「Vagrant Cloud」のサイトをを参照してみてください。

「Vagrant Cloud」のサイトで気になるBoxをクリックして、下画像のアンダーラインが引いてある部分を「Vagrantfile」の「config.vm.box = “base”」を書き換えればOKです。

仮想マシンの起動

ここまでくれば準備は完了です。以下のコマンドを実行すると仮想マシンが起動します。
※初回の実行時のみ「Vagrantfile」に記述したBoxファイルをダウンロードしてくるため、起動に時間がかかります。

$ vagrant up

正常に仮想マシンが起動しているか、仮想マシンの状態を確認してみましょう。

$ vagrant status

Current machine states:

default                   running (virtualbox)

上のようにrunning（起動）と表示されていればOKです。

仮想マシンの終了とその他の操作

仮想マシンの終了は、「vagrant halt」になります。一度、終了してみましょう。

$ vagrant halt

再度、状態を確認してみましょう。

$ vagrant status

Current machine states:

default                   poweroff (virtualbox)

仮想マシンが終了できたことが確認できましたね。

その他にもいくつかの操作がありますので、まとめておきたいと思います。

コマンド	操作の内容
vagrant version	バージョンの確認、最新バージョンの表示
vagrant up	仮想マシンの起動
vagrant halt	仮想マシンの終了
vagrant suspend	仮想マシンの一時停止（スリープモード）
vagrant resume	仮想マシンの一時停止からの復帰（スリープモードからの復帰）
vagrant reload	仮想マシンの再起動
vagrant status	仮想マシンの状態を表示
vagrant destroy	仮想マシンの削除
vagrant ssh	仮想マシンにログイン

仮想マシンにログインしよう

仮想マシンにインストールしたOSのイメージは、最小限の構成になっているので、馴染みのあるディスクトップ画面などを備えていません。そのため、ホストマシンから仮想マシンを利用するためには、仮想マシンにログインをする必要があります。
ログインにはSSHを利用していきます。（※windowsの場合はSSHクライアントをインストールして、設定する必要があります。）

では、仮想マシンを起動してログインしていきましょう。

$ vagrant up

$ vagrant ssh

sshを終了するして抜ける場合は、以下を実行してください。

$ logout

Node.js のインストール

今回は、nodebrewを用いてNode.jsをインストールしていきます。nodebrewを用いる以外にもnvmを用いる方法もあります。

git のインストール

$ sudo yum install git

Homebrew のインストール

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Homebrewの公式サイトはこちら

インストール後は、指示に従ってPATHを通してあげましょう。

$ echo 'eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"' >> /home/vagrant/.bash_profile

$ eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"

nodebrew のインストール

$ brew install nodebrew

正しくインストールされたか、確認してみる。インストールの過程でエラー文が出ていたので、後ほど対応しようと思う。
エラー文
Error: Please update your system curl.
Minimum required version: 7.41.0
Your curl version: 7.29.0
Your curl executable: /usr/bin/curl

$ nodebrew -v

perl: warning: Setting locale failed.
perl: warning: Please check that your locale settings:
	LANGUAGE = (unset),
	LC_ALL = (unset),
	LANG = "ja_JP.UTF-8"
    are supported and installed on your system.
perl: warning: Falling back to the standard locale ("C").
nodebrew 1.1.0

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backward compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

警告が出ているので、対処する。ロケールが問題のようだ。
警告の箇所
perl: warning: Setting locale failed.
perl: warning: Please check that your locale settings:
LANGUAGE = (unset),
LC_ALL = (unset),
LANG = “ja_JP.UTF-8”
are supported and installed on your system.
perl: warning: Falling back to the standard locale (“C”).

インストール時のエラー文対応

/home/vagrant/.bash_profile に「export HOMEBREW_FORCE_BREWED_CURL=”1″」の一文を追記する

$ vi /home/vagrant/.bash_profile

export HOMEBREW_FORCE_BREWED_CURL="1"

vi の使い方
i キーを押してインサートモードにする
内容を追記
escキーを押してコマンドモードにする
:wqで保存終了

追記できたら、「bash_profile」を更新して完了。

$ souce /home/vagrant/bash_profile

エラー文が消えたか確認してみる。

$ brew ls

エラー文が出なければOK！

ロケールの警告文対応

$ sudo yum install glibc-common

再度、確認してみる。

$ nodebrew -v

先ほどの警告文が消えていればOK！

【補足】時間を日本時間（JST）に設定する

$ imedatectl set-timezone Asia/Tokyo

$ date

日本時間が表示されていればOK

Node.js のインストール

Node.jsの安定板をインストールしていきましょう。

$ nodebrew install-binary stable

Fetching: https://nodejs.org/dist/v16.3.0/node-v16.3.0-linux-x64.tar.gz
Warning: Failed to create the file                                                                                     
Warning: /home/vagrant/.nodebrew/src/v16.3.0/node-v16.3.0-linux-x64.tar.gz: No 
Warning: such file or directory
curl: (23) Failure writing output to destination

download failed: https://nodejs.org/dist/v16.3.0/node-v16.3.0-linux-x64.tar.gz

/home/vagrant/.nodebrew/src というディレクトリがないと怒られているようなので、作ってあげましょう。

$ cd /home/vagrant

$ mkdir .nodebrew

$ cd .nodebrew

$ mkdir src

ディレクトリを作成したら、再度Node.jsをインストールしていきましょう。

$ nodebrew install-binary stable

インストールされたNode.js のバージョンを確認してみましょう。

$ nodebrew ls

v16.3.0

current: none

インストールできていたら、有効化しましょう。（バージョンの部分は適宜変更してください）

$ nodebrew use v16.3.0

次は、PATHを通してあげましょう。「bash_profile」に下記の一文を追記していきます。

export PATH=$HOME/.nodebrew/current/bin/:$PATH

正しくPATHが通っていれば次のコマンドが実行できるはずです。

$ node -v

v16.3.0

バージョンが確認できたら、ここまではOKです。

Node.js を動かしてみる

$ node

> 10 + 10
20

終了する場合は、.exitを入力します。

> .exit

無事に結果が表示されたはずです。

仮想マシンのWebサーバーを利用する

現状、ホストマシンから仮想マシンのWebサーバーにアクセスすることができません。そこで、ホストマシンから仮想マシンのWebサーバーにアクセスできるようにするためにVagrantの設定ファイル「Vagrantfile」に次の内容を記述しましょう。実際は、「Vagrantfile」にすでに記述されているので、コメントを外せばOKです。

まず現状として、仮想マシン上でサーバを立ち上げた場合、ポートは仮想マシン内で閉じられた状態になっています。それをポートフォワードしましょう。次の記述の一行目により、仮想マシンのWebサーバーのポート80が、ホストマシンのポート8080にマッピングするようになります。二行目の記述により、仮想マシンのIPアドレスが192.168.33.10に割り当てられ、アクセスできるようになります。

config.vm.network "forwarded_port", guest: 80, host: 8080
config.vm.network "private_network", ip: "192.168.33.10"

「vagrantfile」の編集が完了したら、仮想マシンを再起動します。

$ vagrant reload

ホストマシンと仮想マシンのディレクトリを共有する

ホストマシンの任意のディレクトリを、仮想マシンの任意のディレクトリと共有することができます。これは非常に便利です。「Vagrantfile」を編集していきましょう。

例）config.vm.synced_folder "~/Documents/Node.js", "/home/vagrant/host_Node.js"
config.vm.synced_folder "ホストマシンのディレクトリのパス", "仮想マシンのディレクトリのパス"

設定を変更できたら、「vagrant reload」で再起動しましょう。

うまくいかない場合

仮想マシンを再起動して、次のようなエラーが出る場合はプラグインをインストールしていきます。

Vagrant was unable to mount VirtualBox shared folders. This is usually
because the filesystem "vboxsf" is not available. This filesystem is
made available via the VirtualBox Guest Additions and kernel module.
Please verify that these guest additions are properly installed in the
guest. This is not a bug in Vagrant and is usually caused by a faulty
Vagrant box. For context, the command attempted was:

mount -t vboxsf -o uid=1000,gid=1000,_netdev vagrant_data /vagrant_data

The error output from the command was:

mount: unknown filesystem type 'vboxsf'

まず、プラグインの有無を確認します。

$ vagrant plugin list

プラグインが何もインストールされていない場合、次のように表示されます。

No plugins installed.

プラグインをインストールしていきます。

vagrant-vbguestは、ホストマシンと仮想マシンのGuestAdditionsのバージョンを自動で合わせてくれるVagrantのプラグインです。
vagrant-vbguestをインストールしておくとVagrant起動時およびリロード時にGuestAdditionsの更新があれば自動的に仮想マシンが更新されます。

$ vagrant plugin install vagrant-vbguest

$ vagrant vbguest

次のようなエラーが出ました。

[default] No Virtualbox Guest Additions installation found.
Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
 * base: mirrors.cat.net
 * extras: mirrors.cat.net
 * updates: mirrors.cat.net
Package centos-release-7-9.2009.1.el7.centos.x86_64 already installed and latest version
Nothing to do
Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
 * base: mirrors.cat.net
 * extras: mirrors.cat.net
 * updates: mirrors.cat.net
No package kernel-devel-3.10.0-1127.el7.x86_64 available.
Error: Nothing to do
Unmounting Virtualbox Guest Additions ISO from: /mnt
umount: /mnt: not mounted
The following SSH command responded with a non-zero exit status.
Vagrant assumes that this means the command failed!

umount /mnt

Stdout from the command:

Stderr from the command:

umount: /mnt: not mounted

今回の場合は、「No package kernel-devel-3.10.0-1127.el7.x86_64 available.」と言われているので、指定のバージョンをインストールしていきます。今回の場合は、以下のように実行します。

$ sudo yum -y install http://ftp.riken.jp/Linux/cern/centos/7/updates/x86_64/Packages/Packages/kernel-devel-3.10.0-1127.el7.x86_64.rpm

仮想マシンを再起動しましょう。問題がなれば、ホストマシンと仮想マシンのディレクトリが共有されているはずです。

$ vagrant ssh

設定したディレクトリを確認してみましょう。

$ ls host_Node.js

ホストマシンの設定したディレクトリと中身が一緒になっていれば完了です。

【補足】気になる方は設定しておくといいかも

プラグイン「vagrant-vbguest」で自動的に行われる更新は、GuestAdditionsのみではなくkernelなどの更新が含まれます。GuestAdditionsのメジャーアップデートなどがされたとき、仮想マシンのGuestAdditionsが更新できずにVagrantが起動できなくなることがあります。
そこで、以下の設定をしておくことでvagrant-vbguestによる自動更新を無効にできます。「vagrantfile」に以下の内容を追記します。

# 自動アップデートの中止
  if Vagrant.has_plugin?("vagrant-vbguest")
   config.vbguest.auto_update = false
 end

仮想マシンで実行する

先ほど共有したホストマシンのディレクトリにテスト用ディレクトリを作って、テスト用の実行ファイルを作成して聞きましょう。この記事においては、Document/Node.js 以下に作成していくことになります。Node.js 以下に /test/test.js を作成します。

$ cd Document/Node.js
$ mkdir test
$ cd test

以下の内容の test.js を作成します。

var http = require('http');

var server = http.createServer();
server.on('request', doRequest);
server.listen(3000);
console.log('Server running!');

// リクエストの処理
function doRequest(req, res) {
    res.write('Hello World!!');
    res.end();
}

仮想マシンで、実行していきます。

仮想マシンにログインして、test.jsのあるディレクトリに移動します。今回の場合は、以下のようになります。

~/vagrant/centos7/で仮想マシンを起動します。

$ vagrant up

ログインします。

$ vagrant ssh

$ cd host_Node.js/test/

実行します。

$ node test.js

ブラウザを開いて確認してましょう。本記事と同じ設定の場合は、192.168.33.10:3000へアクセスすることで表示されるはずです。

これが表示されれば、今回の目標は達成です。

長くなってしまったので、今回はこれくらで！