Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

概要

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

作業環境

  • PC : Macbook Air
  • OS : Mac OS X 10.11.5 El Capitan

Vagrantを導入する

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

スクリーンショット 2016-06-09 21.54.20.png

公式サイトダウンロードページから、各OS用のVagrantをダウンロードします。

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

VirtualBoxを導入する

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

スクリーンショット 2016-06-09 22.06.03.png

公式サイトダウンロードページから、各OS用のVirtualBoxをダウンロードします。

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

Vagrantを組み立てる

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

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

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

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

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

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

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 を入力します。
すると以下のように画面が進み、インストールが開始されます。

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分ほど)
気長に待ちます。コーヒーでもいかがでしょうか。

Terminal
==> box: Successfully added box 'laravel/homestead' (v0.4.4) for 'virtualbox'!

これが出たら完了です。
Homestead仕様に改造されたマイ仮想マシンができました!

HomesteadリポジトリーのClone

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

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

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

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

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

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

Homesteadの各種設定

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

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

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

Terminal
$  ls
Homestead.yaml  after.sh    aliases

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

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

Terminal
$  vi Homestead.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

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

After

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がブラウザで動くための設定です。)(詳しいことは偉い人に聞いてください。)

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

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

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

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

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

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

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

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ディレクトリへ帰ります。

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

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

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

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

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

Terminal
$  ssh-keygen -t rsa

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

SSHキーができました。

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

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

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

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

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

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

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

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

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

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コマンドで中身を確認してみましょう。

vagrant@homestead
vagrant@homestead:~$  ls
Code

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

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

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

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

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

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

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

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

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コマンドで抜けることができます。

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

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

HomesteadのSites設定

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

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

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

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

Terminal
$  vi Homestead.yaml

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

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

Before

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

After

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

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

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

Vagrantの再起動

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

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

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

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

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

Terminal
$  vagrant halt            //  Vagrantの終了

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

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

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

参考サイト




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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした