VirtualBox Vagrant でローカル開発web環境の共通化

Xampp(win) mamp(mac) でweb環境を都度つくっていくのがしんどいので共通化したり、もっと簡単に構築できないかと思い、VirtualBox & Vagrant での環境構築を行った。
仮想サーバーを立ち上げてhtmlをブラウジングできるまでをメモ。

必要なもの

■ OS共通

• VirtualBox
• Vagrant

◇ windows

• tera term
  web環境を構築するため、phpとかapachとかをコマンドラインでinstallするのですが sshで仮想環境に接続してコマンド打つために入れる sshできればtera termでなくてもよい (macはターミナルで接続できるので不要)

◆ mac

PC買い換えたときとか、複数PCにinstallしなくてはいけないときとか
いちいちdmg落としてinstallすると時間がかかるのでコマンドラインからinstallできるようにするため、以下を入れておく

• homebrew
  OS X 用パッケージマネージャー
• homebrew-cask
  dmgファイルを手動DL、installするところを commandでinstallできるようにするhomebrewの拡張プラグイン
• Cakebrew
  homebrewをGUI操作したい人向け

手順

VirtualBoxとvagrantをinstall

簡単な説明

• VirtualBoxとは
  自分のPCの中に仮想環境を作って、別の OS をインストール・実行できるフリーの PC 仮想化ソフト
• vagrantとは
  アプリケーションやシステム開発のバックエンドを簡単にパッケージ化し、共有するためのツール
  VirtualBoxをコマンドラインで動かすコントローラーみたいなものって思うといいかも

◇ windows

VirtualBoxのinstall

OSにあったインストーラーでインストール

Vagrantのinstall

OSにあったインストーラーでインストール

tera termのinstall

windowsのコマンドプロンプトではssh接続でapachのインストールなどできないので、コマンド打つためのツールとして入れておく。ssh打てれば別のツールでもOK

◆ mac

homebrewのinstall

VirtualBox / Vagrant はインストーラーで入れても構いませんが、homebrewで入れた方がいちいちdmg落としてinstallするより断然楽なので入れておく

公式サイトにもあるようにmacのターミナルから以下を打ってinstall

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

homebrew-caskのinstall

$ brew install caskroom/cask/brew-cask

VirtualBoxのinstall

通常、dmg落としてinstallするところをhomebrew-caskを入れておけば
以下をターミナルから打つことでinstallできる

$ brew cask install virtualbox


Vagrantのinstall

これもhomebrew-caskでいれる

$ brew cask install vagrant

■ OS共通

上記、vagrantまでinstallが完了しているか、コマンドラインで確認する

$ vagrant -v

Vagrant 1.8.1 などとversionが返ってきたら成功

vagrantでboxファイルから仮想環境にOSを入れて、Vagrantfileを作成してvagrantを動かす

簡単な説明

• boxとは
  仮想マシンを作成する際に必要なOSのディスクイメージファイル等が入ったファイルの集まりで、仮想マシンのテンプレートみたいなもの
• Vagrantfileとは
  vagrantを動かすにあたってのコンフィグ(設定)ファイルのこと

■ OS共通

boxのinstall

VirtualBoxの仮想環境の中にOSをいれます。
Vagrantbox.esというサイトでさまざまなboxファイルが配布されており、ネットにつながるPCであれば以下のコマンドラインで、任意のboxファイルをinstallすることができる

$ vagrant box add {title} {url}

• {title} : Box名 (任意です。自分がわかる名前をつけましょう)
• {url} : Boxの配置先URL（）

今回は例としてCentOSのCentOS7.0を入れるので以下のようになります

$ vagrant box add CentOS7.0 https://github.com/tommy-muehle/puppet-vagrant-boxes/releases/download/1.1.0/centos-7.0-x86_64.box

tips

ネットワークの環境によっては(特に会社のネットワークなどでお仕事されている方)proxyの設定によりうまく box add できないケースがあるようです。
その場合はproxyの設定をしてあげましょう。

set http_proxy="http://proxyhostほげほげ:port"
set https_proxy="http://proxyhostほげほげ:port"

boxがinstallされたか確認

boxファイルはPCに一度入れるとそのまま残っているので、別の環境を構築する際に同じboxでよいならば都度installする必要はない
というわけでinstallされているboxをコマンドラインで確認

$ vagrant box list

CentOS7.0 (virtualbox, 0)などと返ってきたらboxファイルが入っていることになる

Vagrantfileを新規作成する

新規テキストを作成して拡張子も含めて、Vagrantfileというものを作り、中身を書いていくことで作成可能だが、
vagrantのコマンドから初期化で作成が可能。こちらの方が初期設定が記述されたファイルが生成されるのでオススメ

ローカル開発の場所にしたいフォルダまでコマンドラインで移動して、そこで初期化コマンドを打ちます

$ vagrant init {title}

今回は例としてCentOS7.0にしたので以下のようにする

$ vagrant init CentOS7.0

すると、フォルダの中にVagrantfileというファイルが作成される
いろいろとコメントアウトされているが、とりあえず必要なものをコメント外す

• boxの設定

config.vm.box = "box名"

例のinitコマンドで作成した場合はconfig.vm.box = "CentOS7.0"となっているはず

• ネットワークの設定
  ブラウザでのアクセスだったりFTPで接続だったりでこの仮想環境にipが必要なので以下のコメントアウトを外しておく

config.vm.network "private_network", ip: "192.168.33.10"

ipは任意で変えてもよい模様

• ホスト・ゲスト間でファイルの同期設定
  これにより仮想環境側に SCP などでいちいち転送する必要がなくなり、スムーズに直接確認することが出来ます。

config.vm.synced_folder ".", "/vagrant", mount_options:['dmode=777','fmode=777']

dmodeがディレクトリ、fmodeがファイルのパーミッション。本番環境などでは777とかしたらめっちゃ怒られるのでこれは適宜変えましょう。

vagrantを起動する

コマンドラインからVagrantfileがおいてあるディレクトリで起動コマンドを実行する

$ vagrant up

VirtualBoxが立ち上がって仮想環境がスタンバイする

tips

vagrant起動時に、こんな感じのエラーが出ることがある。

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 dmode=777,fmode=777,uid=1000,gid=1000 vagrant /vagrant

The error output from the command was:

/sbin/mount.vboxsf: mounting failed with the error: No such device

これはvagrantでフォルダがマウント出来ないと言うエラーの模様。

vagrant plugin 「vagrant-vbguest」がフォルダー共有を手助けしてくれるそうなのでこれを install する

$ vagrant plugin install vagrant-vbguest

上記実行後、以下表示で install 完了。

Installed the plugin 'vagrant-vbguest (0.24.0)'!

一度終了し、

$ vagrant halt

再度起動して

$ vagrant up

続きへ。

仮想環境にsshで接続してwebサーバーをinstallする

• macはターミナルからsshで接続可能
• windowsはコマンドプロンプトではssh接続できないため、事前にインストールしていたtera termを使って接続する

◆ mac

• ssh接続

$ vagrant ssh

■ OS共通

ssh接続状態でコマンドを打っていく

webサーバーをinstall

$ sudo yum -y install httpd

httpd を起動

$ sudo systemctl start httpd.service

次回以降、立ち上げたら自動で起動するように設定

$ sudo systemctl enable httpd.service

ローカルですし、ファイヤーウォールを切っておく

$ sudo systemctl stop firewalld
$ sudo systemctl disable firewalld
$ sudo systemctl status firewalld

phpをinstallします

$ sudo yum -y install php php-mbstring

vagrant 上で共有フォルダへシンボリックリンクをはってすぐ反映させるようにする

まずコピー先のDocumentRootを空っぽにしておく

$ sudo rm -rf /var/www/html

シンボリックリンクを設定

$ sudo ln -fs /vagrant /var/www/html

testファイルを置いて検証ブラウザで見れるか確認

以上だとVagrantfileがある場所がドキュメントルートになっていると思われるので、同階層にtest.htmlを作成。

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vagrant Congratulations Success!!!!</title>
    <style type="text/css" media="screen">
        body{
            background: #000;
            color: #fff
        }
    </style>
</head>
<body>
    <h1>Vagrant Congratulations Success!!!!</h1>
</body>
</html>

ブラウザでURLへアクセス

以上で閲覧できたら成功