TOP2015.2.17XAMPP/MAMPは不要!チームでの開発に最適なVagrantでの開発環境構築シェアtweetGoogle+はてブこんにちは。しげァsjdasaxnYhsキです。WEB制作での開発環境について、うちでは案件によりますが、今までは主にXAMPP/MAMPを使用した開発を行っていました。時代は流れに流れ、今更ながらPHPでの主な開発環境をMAMPから「Vagrant(ベイグラント)」へ移行させることにしました。これまでの開発環境の問題点これまでの開発環境についての問題点ですが、よくあるのが以下のようなことでした。XAMPP/MAMP等でよくある問題点チームでの開発の場合、それぞれ環境が違うと「あれ、こっち動かないよ」という人がでてくる複数案件を1台でやってるとVirtualHostが溢れるport80が何者かに使われている、そして動かない複数人で環境を揃えるにはそれぞれソフトウェア等のインストールが必要mampなどでの開発環境では、チームでのそれぞれのPHPのバージョンが違ったり、portが何者かに使用されていて動かなかったりといろいろありました。それら問題点を解決するためにVagrantを導入しました。Vagrant導入によるメリットVagrant導入による主なメリットについては以下のとおりです。Vagrant導入による主なメリットチーム内で全く同じ開発環境を共有できるプロジェクト案件毎にそれぞれ別の環境を構築できる(バージョンやサーバーを指定できる)ホストPCとは分離された環境を構築できる開発に必要なソフトウェアを自動でインストールできるVagrantを利用することによって同一構成の仮想環境を簡単に、そして複数作成することができます。複数作成できるので、プロジェクトごとにPHP・MySQL、Apacheなどのバージョンを指定することができます。作成については、主に1つのテキストファイルのみで管理できるため、プロジェクトリーダーの誰か1人がバージョン管理をしてくれれば、一人ひとり環境を合わせる必要なく、チーム全体で同じ環境で作業を行うことができます。それではさっそくですがVagrantでの開発環境構築を進めていきます。Vagrant導入で仮想環境の作成方法VagrantはRubyで作られており、Win、Max、Linux等で動作します。最初に、Vagrant単体では仮想環境を構築できないため、まずはじめに「VirtualBox」というものをインストールする必要がありがあります。※本記事執筆の環境はMacOSとなります。以下、Winとあまり変わらないかと思いますが一応MacOS環境での記事となります。1、VirtualBoxをインストールするVagrantは単体では動きません。VagrantはVirtualBox上で動作します。以下公式サイトにてVirtualBoxのインストールファイルをダウンロードします。VirtualBoxOSに合わせてインストールファイルをダウンロードしてください。※執筆時バージョン、4.3.22ダウンロードが完了しましたら、インストーラーの指示に従ってVirtualBoxのインストールを進めてください。インストール後は、セットアップされたカーネルドライバとやらを確実にクリーンな状態にすることが推奨されているようなので、一応コンピューターを再起動させてください。ここでは面倒なのですっ飛ばします。2、VagrantをインストールするVagrantを公式サイトのダウンロードページよりダウンロードしてください。VagrantこちらもOSに合わせてインストールファイルをダウンロードしてください。※執筆時バージョン、1.7.2ちゃんとインストールされたかの確認は、コマンドラインでバージョン確認をしてください。-vこれでVagrantを使用できる環境が整いました。それでは次にいよいよVagrantで仮想環境を構築していきます。3、boxファイルを選ぶここはちょっとよくわかりにくいかと思いますが、Vagrantは仮想マシン自体をOSにインストールするのではなく、ディスクイメージを使用して仮想環境を作成します。boxとは簡単に言うと、利用したい環境に合わせたイメージのテンプレートのことです。利用したい環境に合わせたboxを選び、それをダウンロードして環境を構築させます。以下公式サイトでbox一覧を確認できます。Vagrantbox.es上記サイトから直接boxをダウンロードする必要はありません。設定ファイルを作成することによって自動的に必要なboxをダウンロードできます。4、設定ファイル「Vagrantfile」の作成Vagrantはこの設定ファイル1つで、環境を構築することができます。構築したい環境のboxファイルを選んだら、まずはコマンドラインでインストールしたいフォルダに移動します。C:¥Users¥ユーザー名¥プロジェクトフォルダ名boxファイルの追加方法は以下のようにコマンドラインに入力します。boxのURLちなみに以下のような書き方もありますが、どっちも実行結果は同じになります。boxのURLまた、上記の「vagrantfile」の部分は任意の名前でOKです。分かりやすいようにboxに合わせた名前にしておきましょう。6.5の64bitのboxをダウンロードしてみます。以下サイトからダウンロードするboxのURLをコピーします。Vagrantbox.es先ほどの入力例のようにコマンドラインに以下のように打ち込み実行します。https://github.com/2creatives/vagrant-centos/releases/download/v6.5.3/centos65-x86_64-20140116.boxそうするとフォルダ内に、「Vagrantfile」というファイルが作られているのが分かるかと思います。これで「Vagrantfile」作成は完了です。次にいよいよ仮想マシンを立ち上げていきます。5、仮想マシンを立ち上げるVagrantfileを作成したフォルダ内で、以下のようにコマンドを入力することで仮想マシンを立ち上げることができます。up最初は結構時間がかかります。無事仮想マシンが立ち上がりますと、以下のようにVirtualBox上で仮想マシンが作られ実行されているのが分かるかと思います。ちなみにインストールしたboxは以下のコマンドで確認できます。list上記のように打つと以下のようにインストールしたbox一覧を確認できます。0)余談ですが、これらのboxファイルはホームフォルダのboxesという場所に格納されています。./.vagrant.d/boxesさて、これでVagrantを使った仮想環境の作成は一応完了となります。それでは次に、作成した仮想マシンの操作方法について書いていきます。以下、主な仮想マシンの操作方法になります。destroyについてですが、こちらは「もうこの環境いらないよ」といった時に使うものになります。[y/N]イエス・ノーと聞かれるの削除したい場合はyと入力して削除してください。※VirtualBox上で行った設定等はすべて消えてしまうので注意してください。upでまた同じ設定で仮想マシンを立ち上げることができます。ちなみにこれらの操作はVirtualBoxからも行えます。SSH接続して、Webサーバーを立ち上げるそれではそろそろ実践的なことをしていきます。ここでは一例としてWebサイトを表示させるためにやることを実行していきます。SSH接続するまず、仮想環境にSSH接続でログインします。以下のようにコマンドを入力し接続してください。ssh仮想マシンの中に「vagrant」というユーザー名でログインされます。Webサーバをインストールする次に仮想マシン内には何もないので、以下のようにコマンドを実行しApacheをインストールします。httpdインストールが完了しましたらサーバーを起動させます。startchkconfigコマンドで、再起動してもサーバーが自動で起動するように以下を実行しておきます。onテスト環境でのファイアーウォール等はいらないので、iptablesをstopさせます。stop再起動してもiptablesが立ち上げらないようにoffにします。off以上でWebサーバーはインストールはOKです。次にWebページを表示させていきたいと思います。Webページを表示させる本記事例では、CentOSのため、以下ディレクトリに表示させたいページを作っていきます。/var/www/html現段階での表示確認等をしたい場合は、以下のように適当にファイルを作成してみてください。index.htmlVagrantfile内のネットワークの設定をするまず、Vagrantfile内にネットワークの設定があるので、そこを少し編集します。Vagrantfileと入力し設定内容を開きます。プライベートネットワークを使用するため、設定ファイル内の以下部分の行のコメントを削除します。"192.168.33.10"コメント削除し、保存したら192.168.33.10で/var/www/htmlへのアクセスが出来るようになります。ちなみに今更ですがvimでの操作が分からない場合は以下サイトを参考に進めてください。そのまま直接ファイル編集をしてください。参考:viコマンド(vimコマンド)一覧(検索・置換)設定を変更したので、以下コマンドでリロードします。作業ディレクトリとvagrantサーバーをリンクさせます。先ほど表示確認で「index.html」とかを作成していた場合は以下のように入力し消してください。/var/www/htmlvagrantサーバー上の/vagrantとローカルがリンクしているため、/vagrantへシンボリックリンクを張ります。/var/www/html上記のようにすることで、「Vagrantfile」があるフォルダとリンクされます。試しに以下のようなindex.htmlファイルを作成し、フォルダ内に置いてみます。world!</h1>ブラウザで以下のように「192.168.33.10」と入力しindex.htmlを読んでみます。world!と表示されています。長かったですがこれでひと通り基本的なvagrant導入で仮想サーバー構築は完了です。この他にもvagrantについては書きたいことがあるのですが、それについては他の記事で更新しようと思います。最近アクセスの多い記事Illustrator不要。ネタ、下ネタ...何でも書きます。きなもの、映画、ラーメン、寝ること。高木りさデザイナー/ライター。WEBデザインに関する記事を書いてます。