Macの中にVagrantとVirtualBox、Homesteadを用いてLaravel5の仮想環境を作る

# 概要

Macの中に、VagrantとVirtualBox、Homesteadを用いてLaravel5（本記事は5.2）の仮想開発環境を初心者が作る備忘録。
時間が少しかかるので、コーヒーでも飲みながら気長にいきましょう。


#### 作業環境
- PC : Macbook Air
- OS : Mac OS X 10.11.5 El Capitan


# Vagrantを導入する
> <b>Vagrant</b>は、仮想マシンの構築と開発・テスト環境の構築をまとめて行える支援ツール

![スクリーンショット 2016-06-09 21.54.20.png](https://qiita-image-store.s3.amazonaws.com/0/102248/2780cabf-1f54-cfa5-6272-fb938738290c.png)


[公式サイト](https://www.vagrantup.com/)の[ダウンロードページ](https://www.vagrantup.com/downloads.html)から、各OS用のVagrantをダウンロードします。

ダウンロードしたファイルをクリックするとインストーラーが起動するので、指示に従ってインストールします。

# VirtualBoxを導入する
> <b>VirtualBox</b>は、Vagrantによって構築される仮想マシンを置く、「置き場」をPC内につくりだすソフトウェア

![スクリーンショット 2016-06-09 22.06.03.png](https://qiita-image-store.s3.amazonaws.com/0/102248/2d24f113-0191-73e4-9b3d-bc8a3515b7ba.png)


[公式サイト](https://www.virtualbox.org/)の[ダウンロードページ](https://www.virtualbox.org/wiki/Downloads)から、各OS用のVirtualBoxをダウンロードします。

ダウンロードしたファイルをクリックするとインストーラーが起動するので、指示に従ってインストールします。


# Vagrantを組み立てる
ターミナルを起動し、適宜仮想マシンであるVagrantを動かすディレクトリを作成し、その中へ移動します。

```unix:Terminal
$  cd                      //  自身のホームディレクトリへ移動

$  mkdir HS_Vagrant        //  HS_Vagrant というディレクトリを作成

$  cd HS_Vagrant           //  作った HS_Vagrantディレクトリの中へ移動

```

`HS_Vagrant`ディレクトリの中で、以下のコマンドを実行し、Vagrant boxを追加します。

Vagrant boxは、仮想マシンであるVagrantを組み立てるための設計図のようなものです。
今回は、Homestead仕様に改造してマシンを組み立てるので、その設計図（laravel/homestead）をadd（追加）します。


```unix:Terminal
$  vagrant box add laravel/homestead

==> box: Loading metadata for box 'laravel/homestead'
    box: URL: https://atlas.hashicorp.com/laravel/homestead
This box can work with multiple providers! The providers that it
can work with are listed below. Please review the list and choose
the provider you will be working with.

1) virtualbox
2) vmware_desktop

Enter your choice: 

```

VirtualBoxを使用するため、`Enter your choice: 1` を入力します。
すると以下のように画面が進み、インストールが開始されます。

```unix:Terminal
==> box: Adding box 'laravel/homestead' (v0.4.4) for provider: virtualbox
    box: Downloading: https://atlas.hashicorp.com/laravel/boxes/homestead/versions/0.4.4/providers/virtualbox.box

```

通信環境にもよりますが、Successfully（完了）までかなり時間がかかります。（15分ほど）
気長に待ちます。コーヒーでもいかがでしょうか。

```unix:Terminal
==> box: Successfully added box 'laravel/homestead' (v0.4.4) for 'virtualbox'!
```
これが出たら完了です。
Homestead仕様に改造されたマイ仮想マシンができました！


# HomesteadリポジトリーのClone

gitからすごい人たちが作ってくださった、Homesteadをクローンします。
つまり、Homesteadをインストールします。

```unix:Terminal
$  git clone https://github.com/laravel/homestead.git Homestead

```

先ほど作った`HS_Vagrant`ディレクトリの中に `Homestead`ディレクトリが作られているので、中に入って「初期化」をおこないます。

```unix:Terminal
$  cd Homestead            //  Homestead ディレクトリの中へ移動

$  bash init.sh            //  Homestead を初期化

```

`Homestead initialized!`　が出れば初期化の成功です。
（初期化が行われると、自身のホームディレクトリにある`.homestead`という隠しディレクトリに、`homestead.yaml`というファイルが生成される。）


# Homesteadの各種設定

```unix:Terminal
$  cd                      //  自身のホームディレクトリへ移動

$  cd .homestead           //  .homestead という隠しディレクトリへ移動

```

以下のように`ls`コマンドで中身を確認して、`Homestead.yaml`ファイルが存在していればOK!


```unix:Terminal
$  ls
Homestead.yaml	after.sh	aliases

```

`vi`コマンドで`Homestead.yaml`ファイルを編集する。

<font size="1">（※ Viエディタが苦手、どうしても無理、見たくもない、触るのが怖い！っていう人は、最悪GUIから辿ってファイルに行き着きましょう。なお、隠しディレクトリを表示したり、隠しディレクトリの中に入っていく手段は各自探してください）</font>


```unix:Terminal
$  vi Homestead.yaml

```

するとこんな風に開きます。

```yaml:Homestead.yaml

---
ip: "192.168.10.10"
memory: 2048
cpus: 1
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: ~/Code
      to: /home/vagrant/Code

sites:
    - map: homestead.app
      to: /home/vagrant/Code/Laravel/public

databases:
    - homestead

# blackfire:
#     - id: foo
#       token: bar
#       client-id: foo
#       client-token: bar

# ports:
#     - send: 50000
#       to: 5000
#     - send: 7777
#       to: 777
#       protocol: udp
#
```

キーボードの「i」を押して、 -- INSERT --モードにしてください。


## foldersの設定


`folders`の`-map: ~/Code`部分を以下のように書き換えます。

Before

```yaml:Homestead.yaml
folders:
    - map: ~/Code
      to: /home/vagrant/Code
```

After

```yaml:Homestead.yaml
folders:
    - map: ~/HS_Vagrant/Homestead/Code
      to: /home/vagrant/Code
```


以上を書き換え終わったたら、`[control] + c`で INSERT モードを抜けて、

```
:wq
```

で上書き保存し、viエディタを終了します。



## hostの追加

viエディタを終了したら、一旦自分のホームディレクトリに戻ります。
次に、`~/etc/hosts`へ、hostを追加します。

（localでブラウザに、`http://homestead.app`と打った時に、homesteadの中のlaravelがブラウザで動くための設定です。）（詳しいことは偉い人に聞いてください。）


```unix:Terminal
$  cd                      //  自身のホームディレクトリへ移動

$  cd ../..                //  ホームディレクトリの二つ上のディレクトリに移動

$  cd etc                  //  etc ディレクトリに移動

$  sudo vi hosts           //  強制的に（sudo）、hostsをviエディタで書き換える

```

`sudo`で開こうとするとパスワードを聞かれるので、自分のパソコンのパスワードを入力してください。


```vim:hosts
#
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1     localhost

```

ここのファイルは各自今までの設定で多少異なっている可能性があると思います。

キーボードの「i」を押して、 -- INSERT --モードにしたら、
とにかく最後の行に以下を追記（コピペ）してください。

```
192.168.10.10   homestead.app
```

劇的ビフォーアフターはこうなります。

Before

```vim:hosts
#
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1     localhost
```

After

```vim:hosts
#
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1     localhost
192.168.10.10   homestead.app
```

以上を書き換え終わったたら、また`[control] + c`で INSERT モードを抜けて、

```
:wq
```

で上書き保存し、viエディタを終了します。


## SSH Keyの作成

`etc`で用事は済んだので、`Homestead`ディレクトリへ帰ります。

```unix:Terminal
$  cd                      //  自身のホームディレクトリへ移動

$  cd HS_Vagrant           //  HS_Vagrant ディレクトリに移動

$  cd Homestead            //  Homestead ディレクトリに移動

```

SSHキーを持っていないと思うので作ります。

（持っている方は、公開キーのパスを先ほどの`.homestead/homestead.yaml`のauthorizeに記述してください）

```unix:Terminal
$  ssh-keygen -t rsa

```

無心でコピペしてください。
パスフレーズを決めて、確認も込みで二回入力します。

SSHキーができました。


# 仮想サーバVagrantの起動と接続

いま、`Homestead`ディレクトリにいると思います。
念のため確認しておいてください。

確認ができたら先ほどパスを設定しているので忘れずに、`Code`ディレクトリを作りましょう。（最初、私は忘れた）

そして仮想サーバを立ち上げます。

```unix:Terminal
$  mkdir Code              //  Homestead ディレクトリに、 Code ディレクトリを作成

$  vagrant up　　　　　　　　　　　　　　　　　　　　　　　　　  //  Vagrant仮想サーバの起動

```

立ち上がったら、仮想サーバへSSH接続します。


```unix:Terminal
$  vagrant ssh　　　　　　　　　　　　　　　　　　　　　　　　  //  Vagrant仮想サーバへ接続

```

以下のように表示されれば、接続が成功です！

```unix:Terminal　
Welcome to Ubuntu 14.04.4 LTS (GNU/Linux 3.19.0-25-generic x86_64)

 * Documentation:  https://help.ubuntu.com/
vagrant@homestead:~$ 

```

Good Job!!
とりあえず、ここでここまできた自分を褒めておきましょう。

# Laravel5の導入

無事に仮想サーバの`vagrant@homestead`に接続できたので、`ls`コマンドで中身を確認してみましょう。

```unix:vagrant@homestead
vagrant@homestead:~$  ls
Code

```

内部に`Code`ディレクトリが表示されていればオッケーです。
この`Code`ディレクトリに移動します。

```unix:vagrant@homestead
vagrant@homestead:~$  cd Code         //  Code ディレクトリに移動

```

ここにComposerを用いて、Laravel5プロジェクトを導入します。

```unix:vagrant@homestead
vagrant@homestead:~/Code$  composer create-project laravel/laravel --prefer-dist PROJECT_NAME

```

`PROJECT_NAME`には、好きな名前を入れてください。その名前のディレクトリが生成されます。

通信環境にもよると思いますが、めちゃくちゃ重くなります。
時間も少しかかりますので、二杯目のコーヒーでもどうでしょうか。


なんだかんだとインストールされていき、最後に`~~~~~~ set successfully.`が表示されれば成功です。

`Code`ディレクトリの中に新しく`PROJECT_NAME`ディレクトリが生成され、中にlaravel5が導入されているはずです。
`ls`コマンドでチェックしてみましょう。

```unix:vagrant@homestead
vagrant@homestead:~/Code$  ls
PROJECT_NAME

vagrant@homestead:~/Code$  cd PROJECT_NAME

vagrant@homestead:~/Code/PROJECT_NAME$  ls
app        composer.json  database      phpunit.xml  resources   tests
artisan    composer.lock  gulpfile.js   public       server.php  vendor
bootstrap  config         package.json  readme.md    storage

```

このようになっていればオッケーです。無事、`PROJECT_NAME`ディレクトリにlaravel5が導入されました！



# ブラウザでのレスポンス確認

さて、これで仮想環境はできたと言っても過言ではありませんが、最後にLaravel5がインストールされた仮想サーバ、`vagrant@Homestead`が実際にちゃんとリクエストに対してレスポンスを返してくれるかどうかブラウザで確認しましょう。もう一息です。


そのためには`.homestead`ディレクトリの`Homestead.yaml`ファイルを再度開いて、
http://homestead.app/ 
にリクエストを送ると、`PROJECT_NAME`ディレクトリをレスポンスしてくれるように設定、登録する必要があります。

まずはvagrantサーバから、一旦抜けましょう。
`exit`コマンドで抜けることができます。

```unix:vagrant@homestead
vagrant@homestead:~/Code$  exit
logout
Connection to 127.0.0.1 closed.

```
logoutされて、自分のPCのディレクトリに戻っていればオッケーです。


## HomesteadのSites設定

`.homestead`ディレクトリに移動します。先ほどと同じです。

```unix:Terminal
$  cd                      //  自身のホームディレクトリへ移動

$  cd .homestead           //  .homestead という隠しディレクトリへ移動

```

`vi`コマンドで`Homestead.yaml`ファイルを再度編集します。


```unix:Terminal
$  vi Homestead.yaml

```

viエディタが開くと思うので、キーボードの「i」を押して、 -- INSERT --モードにしてください。

今回編集するのは、先ほど編集した`forder`の下にある`sites`の部分です。
`to:`の部分を以下のように書き換えます。

Before

```yaml:Homestead.yaml
sites:
    - map: homestead.app
      to: /home/vagrant/Code/Laravel/public

```

After

```yaml:Homestead.yaml
sites:
    - map: homestead.app
      to: /home/vagrant/Code/PROJECT_NAME/public

```

`PROJECT_NAME`には先ほど作ったプロジェクトの名前を入れてください。

`sites`の`to:`以下の部分が、http://homestead.app/ にアクセスしたときに表示されるディレクトリの場所になるので、ここを先ほどの`PROJECT_NAME`ディレクトリにとぶように編集しました。


## Vagrantの再起動

設定を変更したので、Vagrantサーバを再起動する必要があります。
Vagrantを入れている`Homestead`ディレクトリに戻ります。

```unix:Terminal
$  cd                      //  自身のホームディレクトリへ移動

$  cd HS_Vagrant           //  HS_Vagrant ディレクトリに移動

$  cd Homestead            //  Homestead ディレクトリに移動

```

Vagrantを一旦落とします。`vagrant halt`コマンドで終了させることができます。

```unix:Terminal
$  vagrant halt            //  Vagrantの終了

```

もう一度`vagrant up`コマンド起動しますが、ここで変更を適用するために少しオプションコマンドを加えます。

```unix:Terminal
$  vagrant up --provision  　　　　　　　　　　　　　　　　//  Vagrantの起動（オプション：provision）

```

これで`homestead.yaml`の変更内容を適用して、Vagrantサーバを再起動できました。



## ブラウザでの確認

さて、仮想環境の整備と設定が整ったので、最後に実際にブラウザからリクエストを送ってみます。

お好きなブラウザ（Google Chrome, Safari, Firefoxなど）を開いて、

```
http://homestead.app/
```

とURLを入力し、接続します。


「 Laravel 5 」 とやけにかっこよく画面中心に表示されていれば大成功です！！

![スクリーンショット 2016-06-10 23.37.19.png](https://qiita-image-store.s3.amazonaws.com/0/102248/db7359fb-b3bf-28c2-2a37-2e1c87f6cc73.png)


お疲れ様でした。
最後にコーヒーでもいかがですか？




# 参考サイト

- https://laravel.com/docs/5.2/homestead
- http://readouble.com/laravel/5/1/ja/homestead.html
- http://qiita.com/you-me/items/3886f072cbcbead98733

<br>
<hr>

※　執筆者が初心者なもので、勘違いや説明に不備がある点が多々あるかもしれません。
見つけた際は、適宜、コメントで指摘していただけると助かります。