Webサービス若しくはWebサイトを構築する際に必要なローカル開発環境。手軽に利用できるXAMPPやMAMP、最近になってユーザーが増えたように感じるDockerも人気ですが、今回は、汎用性が高く開発者から依然として人気の高いVagrantとVirtualBoxを使った開発用の仮想環境を構築する方法について扱ってみたいと思います。

VirtualBoxは言わずと知れた仮想環境構築ツールです。ローカル環境（ホストOS）にLinuxなど他のOS（ゲストOS）の仮想環境をBoxとして手軽に追加・削除できるのです。またVagrantとは、VirtualBoxを使った仮想環境の導入を手助けしてくれる大変便利なツールです。

これら二つを使った開発環境の導入は大変人気が高く、業界標準といってもいい程です。では早速、仮想環境を構築してみましょう。

スポンサーリンク




目次

  1. 環境について
  2. Vagrantのインストールと設定
  3. VirtualBoxのインストールと設定
  4. Apacheのインストールと設定
  5. ホストOS側とのファイル共有に関して
  6. まとめ

1. 環境について

まず、この記事を書いている時点の環境についてひとこと。macOSは安定していて、かつ32bitアプリケーションも使えるMojaveを使い続けています。というわけでこの記事で説明することの動作確認済みの環境はmacOSMojave 10.14.6です。

最近は仕事用のマシーンに最新OSを入れるのを躊躇うことが多く、Catalinaの時も公開当初はバグだらけという噂でとても使う気になれずに様子見していたら、いつの間にかBig Surの時代になってしまいました…。

2. Vagrantのインストールと設定

まずはVagrantのインストールです。こちらからインストーラー（vagrant_2.2.14_x86_64.dmg）をダウンロードします。
https://www.vagrantup.com/downloads.html

ダウンロードが完了したら.dmgファイルをダブルクリックして、インストールディスクをマウントさせます。その後は、インストーラーの指示に従ってインストールしてください。

インストールが完了したらターミナルでコマンドを打って確認してみましょう。

$ vagrant -v
$ Vagrant 2.2.14

3. VirtualBoxのインストールと設定

次いで、VirtualBoxのインストールです。こちらからインストーラー（VirtualBox-6.1.26-145957-OSX.dmg）をダウンロードします。
https://www.virtualbox.org/wiki/Downloads

ダウンロードが完了したら.dmgファイルをダブルクリックして、インストールディスクをマウントさせます。その後は、インストーラーの指示に従ってインストールしてください。

機能拡張がブロックされたら「設定 > セキュリティーとプライバシー」で「許可」をクリックして、再インストールします。

Big Sur環境でのインストールに関して（2021/9/17再編集）

この記事を最初にアップした時のVirtualBoxのバージョンは「6.1.16」で、何度やってもBigSur環境にインストールできず、この記事にもそのように書いてあったのですが、「VirtualBox 6.1.26」で試したところ、Intel版のBigSur環境（iMac 21.5-inch Late 2015）には、無事インストールして動作させることができました。

ただ、M1チップ版のBigSur環境（Mac mini M1 2020）では、インストール自体は全く問題ないのですが、いざ「vagrant up」コマンドで仮想環境を動作させようとするとエラーが表示されて動作しません。VirtualBoxのM1チップへの対応が十分ではないのか、それとも仮想環境側のOSの問題なのか…。何か分かったら記事に追記しようと思います。

Boxの取得と設定

VirtualBoxでは仮想環境を「Box」と呼び、環境ごとに追加したり削除したりすることができます。

「vagrantbox.es」というサイトからお好みの環境をダウンロードして追加すれば、簡単に仮想環境を構築できるのです。
http://www.vagrantbox.es/

Boxの追加はターミナルから下記コマンドで行いますが、引数として任意の仮想環境名と取得URLを指定します。

$ vagrant box add 仮想環境名 取得URL

例えば、CentOS 7.2 x64の場合はこんな感じです。

$ vagrant box add centos72x64 https://github.com/CommanderK5/packer-centos-template/releases/download/0.7.2/vagrant-centos-7.2.box

ダウンロードには少々時間がかかりますが、進捗が100%になるまで気長に待ちましょう。ダウンロードが完了したら、コマンドでバージョンを確認します。

$ vagrant box list
$ centos72x64 (virtualbox, 0)

今度は仮想環境の設定ファイルを作成する任意のディレクトリを作成し、そのディレクトリ内で初期化を行います。初期化すると設定ファイル「Vagrantfile」が生成されます。

$ mkdir centos72x64
$ cd centos72x64
$ vagrant init centos72x64
$ ls ./

「Vagrantfile」が生成されていることを「ls」コマンドで確認したら、設定ファイルを「vi」コマンドで必要な箇所を編集します。

$ vi Vagrantfile

まず「config.vm.network “forwarded_port”, guest: 80, host: 8080」のコメントアウトを外します。

# Create a forwarded port mapping which allows access to a specific port
# within the machine from a port on the host machine. In the example below,
# accessing “localhost:8080” will access port 80 on the guest machine.
# NOTE: This will enable public access to the opened port
config.vm.network “forwarded_port”, guest: 80, host: 8080

次いで「config.vm.network “private_network”, ip: “192.168.33.10”」のコメントアウトも外します。

# Create a private network, which allows host-only access to the machine
# using a specific IP.
config.vm.network “private_network”, ip: “192.168.33.10”

これはインストールする仮想環境（ゲストOS）をマック（ホストOS）のブラウザからアクセスするための設定となります。

この設定を行うことでホストOSのブラウザから「http://localhost:8080」もしくは「http://192.168.33.10」のアクセスで、ゲストOS（インストールした仮想環境）にインストールしたhttpdへのアクセスが可能です。

ここまで出来たら、仮想環境を起動してみましょう。

起動コマンド

$ vagrant up

初回の起動には少々時間がかかります。起動以外にもvagrantを操作する基本的なコマンドを幾つか覚えておくとよいと思います。

シャットダウンコマンド

$ vagrant halt

ステータス表示コマンド

$ vagrant status

再起動コマンド

$ vagrant reload

仮想環境削除コマンド

$ vagrant destroy

仮想環境を削除したい場合、先ほど作成（mkdir）したホストOS側のディレクトリを丸ごと削除（rm -r）して、再度新しいディレクトリを作成し、初期化（vagrant init）し、生成された「Vagrantfile」を編集の上、起動（vagrant up）すれば、また一から仮想環境を新規で構築し直すことができます。

別のOSやバージョンを追加したい場合は、この記事の「BOXの取得と設定」のところからやり直せば、別の新しい環境を追加することもできます。便利ですね。

4. Apacheのインストールと設定

仮想環境を起動できたら、ここでは開発環境として使用するApacheをインストールしてみたいと思います。そのためにはホストOSからsshで仮想環境にアクセスする必要があります。

$ vagrant ssh
[vagrant@localhost ~]$ 

sshにはパスワードは不要です。またログアウトするには、言うまでもありませんが「exit」です。では、yumを使ってApacheをインストールしてみましょう。

[vagrant@localhost ~]$ sudo yum -y install httpd

インストールが完了したらサービスをスタートさせてみましょう。

[vagrant@localhost ~]$ sudo service httpd start

ホストOSのブラウザから「http://localhost:8080」もしくは「http://192.168.33.10」でアクセスしてみましょう。

Apacheが起動しました！

開発環境として使うため「welcome.conf」内にある記述を全てコメントアウトします。

[vagrant@localhost ~]$ sudo vi /etc/httpd/conf.d/welcome.conf

上書き保存したら、Apacheを再起動してみます。

[vagrant@localhost ~]$ sudo service httpd restart

初期表示がなくなりましたね！これで最低限の開発環境が整いました！

5. ホストOS側とのファイル共有に関して

ホストOSとのファイル共有ができると便利ですよね？というわけで最後にその点に関して触れておきます。

Vagrantの設定に使用した「Vagrantfile」のあるディレクトリがそのまま「/vagrant」としてマウントされています。ですので、ファイル共有したい場合は、そこにホストOS側からファイルを置いておいて、vagrant sshでファイル操作すれば、仮想環境にファイルを取り込めます。

6. まとめ

今回は、VagrantとVirtualBoxを使った開発用の仮想環境を構築する方法について扱ってみました。本番環境を忠実に再現する環境構築は、Webにおける開発には不可欠なものとなっています。バックエンド開発やインフラ構築の専門家ならちょちょいと環境を用意できるかと思いますが、自分のようにフロントを主に担当していて、時々サーバーのプログラムをいじるような開発者は「あれ、どうやってやるんだっけかな？」と細かいことを忘れてしまったりするのですが（笑）自分の備忘録も兼ねてまとめてみました。

また、Big Surについては、VirtualBoxの新規インストールで躓いてしまい、問題を解決できませんでしたが、VirtualBoxの開発元であるOracleの対応を待って、再チャレンジしてみたいと思います。

以上、参考にしていただけるようなら幸いです！