Vagrant 〜ローカル開発環境の構築〜

こんばんわ、daihaseです。
今日は午前中ダイエットも兼ねてランニングをしていたのですが、異様に風が強く何度も吹き飛ばされそうになりました。

はい、本日のお題は「Vagrant 〜ローカル開発環境の構築〜」。

Webアプリやフロントエンドのお勉強を始めた初心者の方にお役に立てればと、ちょっとした開発環境構築について書きたいと思います。

例えばPHPやJavaScript、Htmlでもなんでもいいのですが、作ったサービスを実際のサーバー上でどのように動くか試してみたい時ってありますよね。そんな時、ひと昔前ならXAMPP、MacだとMAMPとかですかね。

僕も7年くらい前？ガラケーソシャゲブームだった頃はよくお世話になっていました。ですが、これらはチーム内で開発する際にやれPHPのバージョン違いによる不都合だったり、port80の占有、開発に必要な環境は個々でインストールする必要があるなど、昨今の開発現場では色々不便で使われなくなってきているのではないでしょうか（むしろ使ってるとこある？）

そこで今回紹介するのが

Vagrant

2013年頃ですかね、フロントエンド界隈でもドカンと流行りましたよね。とりあえずローカルに仮想環境を構築するなら非常に便利なのでおすすめです。

Vagrantを使うことでどういったメリットがあるかというと、

ホストPCと分離した開発環境を作成出来る（ホストPCは自分のPCのこと）
Boxという概念があり、これを使うことで共通の環境を各々のPCに構築出来る
開発環境の自動化(Chef、puppetなどと連携)

などでしょうか。

とりあえずこの回でやりたいことは、Vagrantで簡単に仮想環境を構築し、PHPの実装内容をブラウザで確認する、です。

概要はわかったので、早速入れて使ってみましょう。

下準備

まず、Vagrantを使うにはVirtual BoxとベースとなるOSイメージをインストール・ダウンロードしておきます。

まず練習用にディレクトリを作成しておきましょう。
ターミナルを開きホーム上に以下のようなフォルダを作成してみてください。

$ cd #ホームディレクトリへ
$ mkdir vagrant
$ cd vagrant
$ pwd
/Users/LibraStudio/vagrant #"LibraStudio"のところは自分のホームディレクトリ名

$ cd #ホームディレクトリへ

$ mkdir vagrant

$ cd vagrant

$ pwd

/Users/LibraStudio/vagrant #"LibraStudio"のところは自分のホームディレクトリ名

VirtualBoxのインストール
https://www.virtualbox.org/

OSのイメージをダウンロード
Discover Vagrant Boxes | Atlas by HashiCorp
※検索ボックスから「centOS」と打ち込み、一番上にでたcentos/7をダウンロード(2017.2.20現在)

ダウンロードしたBoxをVagrantに追加します。

$ vagrant box add centos/7 
==> box: Loading metadata for box 'centos/7'
    box: URL: https://atlas.hashicorp.com/centos/7
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) libvirt                                                        
2) virtualbox                                                     
3) vmware_fusion                                                  
4) vmware_workstation                                             
                                                                  
Enter your choice: 2

$ vagrant box add centos/7

==> box: Loading metadata for box 'centos/7'

box: URL: https://atlas.hashicorp.com/centos/7

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) libvirt

2) virtualbox

3) vmware_fusion

4) vmware_workstation

Enter your choice: 2

Vagrantにboxを追加出来たか確認してみます。

$ vagrant box list 
centos/7            (virtualbox, 1611.01) 
centos64            (virtualbox, 0)     
hashicorp/precise64 (virtualbox, 1.1.0)

$ vagrant box list

centos/7 (virtualbox, 1611.01)

centos64 (virtualbox, 0)

hashicorp/precise64 (virtualbox, 1.1.0)

作業用のディレクトリを作成します。

$ mkdir centos7
$ cd centos7
$ pwd
/Users/LibraStudio/vagrant/centos7

$ mkdir centos7

$ cd centos7

$ pwd

/Users/LibraStudio/vagrant/centos7

Vagrantの設定

下準備が出来ましたので、Vagrantの設定をしていきます。

Vagrantを初期化します。

$ vagrant init centos/7

1	$ vagrant init centos/7

Vagrantfileというファイルが作成されるので、そちらを少しいじってネットワーク周りの設定を行います。

$ vim Vagrantfile

1	$ vim Vagrantfile

自分の場合は29行目に、# config.vm.network “private_network”, ip: “192.168.33.10” という記述があるので、そちらのコメントを外して有効にしてやります。

では仮想マシンを起動してみます。

$ vagrant up

1	$ vagrant up

sshで起動した仮想マシンに接続してみます。

$ vagrant ssh

1	$ vagrant ssh

ログイン出来ましたでしょうか？
ちなみに仮想マシンからログアウトする際は

$ exit

$ exit

とやるだけです。
また仮想マシン自体を落として終了する場合は以下。

$ vagrant halt

1	$ vagrant halt

サーバー環境の構築

サーバー環境っていってもVagrantの仮想環境上(CentOS)の構築なんですけどね。ただCentOS上に構築していくため、実際のサーバー環境を構築するのと同じ手順になります。ここで動いたものは実際サーバー構築した際も同様に動くことになります。これはローカル環境でテストする際など捗りますね。

ではやってっていきましょう。

PHPとApacheをまずインストールします。
PHPは実際のWebアプリを記述するためのもに、Apacheはそれを動かすwebサーバーですね。

※ローカルのディレクトリでやらずにVagrantにssh接続し、そこで実行します。

$ sudo yum install php
$ sudo yum install httpd

1 2	$ sudo yum install php $ sudo yum install httpd

無事PHPとApacheを入れられたら実際に動作確認をしてみましょう。まずApacheを入れたら以下のようなディレクトリが作成されます。

/var/www/
/etc/httpd/
/var/log/httpd/

他にもいくつか。
とりあえずここで確認するのはApacheを入れたことでドキュメントルートに置いたhtmlファイルを読み込み、表示出来るかどうか。

以下のコマンドを入力し、index.htmlファイルを生成してください。

$ cd /var/www/html  #ドキュメントルートへ移動
$ sudo vi index.html #index.htmlを作成

1 2	$ cd /var/www/html #ドキュメントルートへ移動 $ sudo vi index.html #index.htmlを作成

内容は何でもいいのですが、とりあえず定番のHello Worldを。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vagrant test</title>
  </head>
  <body>
    Hello World
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>vagrant test</title>

</head>

<body>

Hello World

</body>

</html>

Apacheを起動させます。

$ sudo service httpd start

1	$ sudo service httpd start

はいこれで後は適当なブラウザで先ほどVagrantfile内でもコメントを外したIPアドレスを打ち込んでみます。”192.168.33.10″でしたね。

はい、ちゃんとHello Worldが表示されましたね。今度はPHPを表示させてみましょう。まずApacheの設定ファイルを編集します。

$ sudo vi /etc/httpd/conf/httpd.conf

1	$ sudo vi /etc/httpd/conf/httpd.conf

以下のような記述がある箇所があると思います。

AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz

1 2	AddType application/x-compress .Z AddType application/x-gzip .gz .tgz

この下に以下の2つを追記してください。

AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps

1 2	AddType application/x-httpd-php .php AddType application/x-httpd-php-source .phps

これでとりあえずApacheが拡張子がphpとなってるものを解釈してくれます。それではtest.phpを作ってみましょう。場所は先ほどのindex.htmlと同じ場所になります。

$ sudo vi test.php

1	$ sudo vi test.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vagrant test</title>
  </head>
  <body>
    <?php
    // 日時を出力する 
    echo date( "Y年m月d日 H時i分s秒" );
    ?>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>vagrant test</title>

</head>

<body>

<?php

// 日時を出力する

echo date( "Y年m月d日 H時i分s秒" );

</body>

</html>

test.phpが出来たら再びブラウザで、https://192.168.33.10/test.phpと入力してみてください。

こんな感じに現在日時が表示されたかと思います。
実際叩いた時間と差異があると思いますが、これはサーバーに設定されている時刻を表示していて、その設定は初期設定のまま何も弄ってないのでこのような日時が返ってきています。

まとめ

どうでしょうか、Vagrantを使った仮想環境構築。
凄い簡単に実際のサーバーと変わらない環境を作れたかと思います。

今回は最低限の表示周りのみだったので色々端折っていますが、MySQLを入れてDBを触ってみたりPHPだけではなくRubyやJava等、好きなものを入れて遊ぶことも可能です。

しかもローカルに仮想環境を立てているので、当然通常のサーバーのように稼働に応じて料金なんかも発生しませんし、グチャグチャに弄って飽きたらVagrantのboxを削除してしまえばいいだけ。

ちょっとしたサーバーのお勉強にもいいですね。

ではでは本日はこれで。良い開発ライフを〜