今日からすぐできる！VagrantとVirtualBoxを使ってローカル開発環境を構築する方法【初心者向け】
MacのPCを使ってローカル開発環境を構築する方法を解説。VagrantとVirtualBoxを使って構築します。ターミナルの使い方から、ファイル転送ツールの導入まで各種ツールの使い方も詳しく紹介。今日からすぐに使えます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女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のサイトにアクセスしてインストールしてみましょう。
左にある「Downloads」のボタンをクリックすると、OSごとのパッケージがダウンロードできます今回はMacですので、Mac OS Xを選びました。
ダウンロードしたファイルを開くとこのような画面になりますので、「Double click on this icon」をクリックしてインストールしてください。
これでVirtualBoxのインストールは完了です。
Vagrantをインストールする
続いて、Vagrant（ベイグラント）をインストールします。Vagrantとは、一言で言えば環境構築を簡単に立ち上げるためのツールです。Vagrantがなければ仮想マシンを立ち上げや環境構築にさまざまな作業が必要でしたが、Vagrantはそういったワークフローをまとめて行うことができます。
VirtualBoxとVagrantの2つがあることで、開発環境を仮想マシン上に自動作成することができます。
では早速インストールしましょう。Vagrantのサイトにアクセスすると、ダウンロードのボタンがあるのでクリックします。
今回はMacを使用するので「MAC OS X」をクリックしてダウンロードします。
ダウンロードしたファイルを開くとこのような画面になりますので、Vagrant.pkgをクリックしてインストールしましょう。
インストールが完了したらターミナルを開いて下記のコマンドを実行してみてください。
$ 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の追加には少し時間がかかりますが、完了したら設定ファイルを作りましょう。
$ vagrant init centos
そして最後にVagrantを起動します。
$ vagrant up
これで、VagrantでCentOSの立ち上げが完了しました。
ファイル転送ツールを導入する
それでは今度は、ファイル転送ツールを使ってMacからCentOS内のファイルを参照できるようにしましょう。
ファイル転送ツールにはCyberduckやFileZillaなど様々ありますが、今回は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」で表示されたものを入力します。
これで無事につながれば接続完了です。
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にアクセスしてみましょう。
このような画面が確認できればブラウザからアクセスできたということになります。
また、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へアクセスしてみましょう。
このようにブラウザで表示されるはずです。
これでVagrantを使ったローカル開発環境の構築ができました。
Vagrantを使えば他にも、Mac上でWindowsの動作確認を行ったり、簡単にWordPressの環境を構築したりすることができます。Vagrantなら簡単に試して、失敗したら簡単にやり直しができるのでぜひご自身で試してみてください。
もっと簡単にプログラミングの開発環境を準備したいという場合は、クラウド上で開発環境を使えるCloud9の使い方も合わせてご覧ください。
[お知らせ]TechAcademyでは、ローカル開発環境の構築なしでWebサービスの開発ができるオンラインブートキャンプを開催しています。プログラミング未経験からプロを目指すことが可能です。
