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にあったインストーラーでインストール

https://www.virtualbox.org/wiki/Downloads

#### Vagrantのinstall
OSにあったインストーラーでインストール

https://www.vagrantup.com/downloads.html

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

https://osdn.jp/projects/ttssh2/

### ◆ mac
#### homebrewのinstall
http://brew.sh/index_ja.html

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](http://www.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へアクセス

http://192.168.33.10/test.html

以上で閲覧できたら成功