今日からすぐできる!VagrantとVirtualBoxを使ってローカル開発環境を構築する方法【初心者向け】

MacのPCを使ってローカル開発環境を構築する方法を解説。VagrantとVirtualBoxを使って構築します。ターミナルの使い方から、ファイル転送ツールの導入まで各種ツールの使い方も詳しく紹介。今日からすぐに使えます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

プログラミング学習を始める際の最初の壁が、開発環境の構築だったということはないでしょうか?

今回はVagrantとVirtualBoxを用いたローカル開発環境の構築方法をご紹介します。これでPC上に開発環境を比較的簡単に用意することができます。

なお、今回はMacのPCを使って紹介します。

 

目次

本記事では下記の手順で解説していきます。

実際に開発環境を構築したあとは、Rubyのファイルを例にブラウザで確認するまでの手順を紹介します。

 

VirtualBoxをインストールする

VirtualBox(バーチャルボックス)とは、PC仮想化ソフトです。現在はオラクルが開発しており、製品表記は「Oracle VM VirtualBox」になっています。このPC仮想化ソフトを使うと、使用しているPC上に仮想的なPCを作成して、別の OSをインストール・実行することができます。PC仮想化ソフトには、VirtualBox以外にVMware PlayerやParallelsといったものがありますが、無料で手軽に使えて、Windowsや Linuxなど複数のOS をサポートしているVirtualBoxがおすすめです。

 

VirtualBoxのサイトにアクセスしてインストールしてみましょう。

virtualbox

左にある「Downloads」のボタンをクリックすると、OSごとのパッケージがダウンロードできます今回はMacですので、Mac OS Xを選びました。

 

ダウンロードしたファイルを開くとこのような画面になりますので、「Double click on this icon」をクリックしてインストールしてください。

virtualbox2

これでVirtualBoxのインストールは完了です。

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

Vagrantをインストールする

続いて、Vagrant(ベイグラント)をインストールします。Vagrantとは、一言で言えば環境構築を簡単に立ち上げるためのツールです。Vagrantがなければ仮想マシンを立ち上げや環境構築にさまざまな作業が必要でしたが、Vagrantはそういったワークフローをまとめて行うことができます。

VirtualBoxとVagrantの2つがあることで、開発環境を仮想マシン上に自動作成することができます。

 

では早速インストールしましょう。Vagrantのサイトにアクセスすると、ダウンロードのボタンがあるのでクリックします。

今回はMacを使用するので「MAC OS X」をクリックしてダウンロードします。

Vagrant mac

 

ダウンロードしたファイルを開くとこのような画面になりますので、Vagrant.pkgをクリックしてインストールしましょう。

Vagrant3

 

インストールが完了したらターミナルを開いて下記のコマンドを実行してみてください。

$ vagrant -v

 

無事にバージョンが返ってくればVagrantのインストールは完了です。

Vagrant 1.7.4

 

VagrantでCentOSを立ち上げる

続いて、インストールしたVagrantを使って、CentOSを立ち上げてみます。実際の操作はターミナルを使用しましょう。

Vagrantbox.esというサイトから立ち上げるために必要な情報を取得することができます。今回は、CentOS 7.0の64bitを使い、名前は「centos」にしましょう。

 

まずはターミナルを使って、Vagrantに「centos」という名前のboxを追加します。boxとは仮想マシンを手軽にクローンするためのベースイメージのことです。

$ vagrant box add centos http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-x86_64-v20130427.box

box追加

 

boxの追加には少し時間がかかりますが、完了したら設定ファイルを作りましょう。

$ vagrant init centos

 

そして最後にVagrantを起動します。

$ vagrant up

これで、VagrantでCentOSの立ち上げが完了しました。

 

ファイル転送ツールを導入する

それでは今度は、ファイル転送ツールを使ってMacからCentOS内のファイルを参照できるようにしましょう。

ファイル転送ツールにはCyberduckFileZillaなど様々ありますが、今回はFileZillaを使っていくことにします。

 

先ほどの、「vagrant up」でVagrantを立ち上げる際に出力されるログを見てみましょう。ここにSSH接続に必要な情報はが表示されています。パスワードはvagrantになります。

~/D/I/centos ❯❯❯ vagrant up
Bringing machine ‘default’ up with ‘virtualbox’ provider…
==> default: Resuming suspended VM…
==> default: Booting VM…
==> default: Waiting for machine to boot. This may take a few minutes…
default: SSH address: 127.0.0.1:2200
default: SSH username: vagrant
default: SSH auth method: private key
default: Warning: Connection refused. Retrying…
==> default: Machine booted and ready!
==> default: Checking for host entries

 

それではさっそくFileZillaを立ちあげ、左上の新規接続ボタンを押してください。

ダイアログが立ち上がるので「New Site」をクリックしてから上記のようにログから得られた情報を入力していきます。Hostには「default: SSH address」で表示されたものを入力します。

FileZilla

これで無事につながれば接続完了です。

 

Rubyファイルをブラウザから確認する

最後に、具体的な使い方として、Rubyのファイルを作成して、それをブラウザで確認してみましょう。

まずは、httpdサーバの構築を行っていきます。ターミナルからSSH接続を行いましょう。

$ vagrant ssh

 

無事に接続ができたら、次はwebサーバーのインストールです。

$ sudo yum -y install httpd

 

インストールが完了したら起動します。

$ sudo service httpd start

 

下記のように表示されればOKです。

[vagrant@localhost ~]$ sudo service httpd start
Starting httpd: httpd: Could not reliably determine the server’s fully qualified domain name, using localhost.localdomain for ServerName
[ OK ]

 

続いて、Apacheの起動設定を行います。

$ sudo chkconfig httpd on

これでオンになりました。

 

オンになっていることは下記のコマンドで確認することができます。

$ chkconfig –list httpd

 

デフォルトではファイアウォール設定がされているので、iptablesコマンドを使って編集します。

sudo service iptables stop
sudo chkconfig iptables off

 

続いてはブラウザからアクセスするための設定を行っていきます。一度、SSHの接続から離れましょう。

$ exit

 

ここでVagrantファイルを編集していきます。

Vagrantファイルの編集はターミナルで下記のように入力します。

vi Vagrantfile

 

下記のようにコメントアウトされている一行があるので、#を削除してコメントアウトを外しましょう。削除するには、#の上にコマンドを合わせて、小文字の「x」と入力します。

# config.vm.network “private_network”, ip: “192.168.33.10”

削除できたら、「:wq」と入力して保存します。

 

保存をしたら、Vagratのリロードをします。

$ vagrant reload

 

リロードが完了したら192.168.33.10にアクセスしてみましょう。

このような画面が確認できればブラウザからアクセスできたということになります。

Apache

 

また、192.168.33.10に接続できることは、下記のコマンドで確認することができます。

$ vagrant ssh
$ ip a

 

せっかくなのでファイルを設置して表示もしてみます。シンボリックリンクを作成します。

$ vagrant ssh
$ sudo rm -rf /var/www/html
$ sudo ln -fs /vagrant /var/www/html

 

そして、下記のような「test.rb」のファイルを作成して、FileZillaを使ってアップします。

<!DOCTYPE html>
<title>Vagrant</title>
</p>
<p>
<h1>Hello, Vagrant!!</h1>

 

ここまでできたらブラウザを立ちあげて、http://192.168.33.10/test.rbへアクセスしてみましょう。

このようにブラウザで表示されるはずです。

heloovagrant

これでVagrantを使ったローカル開発環境の構築ができました。

Vagrantを使えば他にも、Mac上でWindowsの動作確認を行ったり、簡単にWordPressの環境を構築したりすることができます。Vagrantなら簡単に試して、失敗したら簡単にやり直しができるのでぜひご自身で試してみてください。

 

もっと簡単にプログラミングの開発環境を準備したいという場合は、クラウド上で開発環境を使えるCloud9の使い方も合わせてご覧ください。

[お知らせ]TechAcademyでは、ローカル開発環境の構築なしでWebサービスの開発ができるオンラインブートキャンプを開催しています。プログラミング未経験からプロを目指すことが可能です。