vagrant を web開発環境に使う

2013/07/06　shin1x1

第2回 JAWS-UG神戸

もう XAMPP / MAMP はいらない！

Vagrant をWeb開発環境に使う

@shin1x1

(c) 2013 Masashi Shinbara @shin1x1

Shin x bloghttp://www.1x1.jp/blog/

PHP / DevOps / AWS / Varnish / Fabric / Chef

http://www.1x1.jp/blog/




開発環境


Web開発あるある

エンジニアSさん


• Macbook Air で開発• Apache / PHP / DB• 複数案件を一台で



1162 <VirtualHost *:80>1163 ServerName candycane.local1164 DocumentRoot "/Users/shin/sandbox/demo/candycane/app/webroot"1165 </VirtualHost>1166 1167 <VirtualHost *:80>1168 ServerName demo.local1169 DocumentRoot "/Users/shin/sandbox/demo/20130601_phpcon"1170 php_value vld.active 11171 </VirtualHost>1172 1173 <VirtualHost *:80>1174 ServerName project1.local1175 DocumentRoot "/Users/shin/project1/app/webroot"1176 </VirtualHost>1177 1178 <VirtualHost *:80>1179 ServerName project2.local1180 DocumentRoot "/Users/shin/project2/app/webroot"1181 </VirtualHost>



1162 <VirtualHost *:80>1163 ServerName candycane.local1164 DocumentRoot "/Users/shin/sandbox/demo/candycane/app/webroot"1165 </VirtualHost>1166 1167 <VirtualHost *:80>1168 ServerName demo.local1169 DocumentRoot "/Users/shin/sandbox/demo/20130601_phpcon"1170 php_value vld.active 11171 </VirtualHost>1172 1173 <VirtualHost *:80>1174 ServerName project1.local1175 DocumentRoot "/Users/shin/project1/app/webroot"1176 </VirtualHost>1177 1178 <VirtualHost *:80>1179 ServerName project2.local1180 DocumentRoot "/Users/shin/project2/app/webroot"1181 </VirtualHost>

溢れる VirtualHost

とある開発チームA


• Macbook / Windows で開発• Apache / PHP / DB• チームで開発



あれ？動かない。何か変なコード書いた？

こっちは動いてるよ。モジュール入れないとダメだよ。



あれ？動かない。何か変なコード書いた？

こっちは動いてるよ。モジュール入れないとダメだよ。

俺の環境では動く

WebデザイナーBさん


• WordPressのデザイン• XAMPPをインストール•でもなんだか動かない。。。



Port 80 は俺のモノ

そんなあなたに


Vagrant


• 誰でも全く同じ環境を構築できる• 構成はコードで書く• 環境構築はコマンド一つだけ

demo1


httpd サーバ

demo1


• VMイメージ取得• VM起動• プロビジョニング• VM終了

demo1


$ vagrant init$ lsVagrantfile


# -*- mode: ruby -*-# vi: set ft=ruby :

Vagrant.configure("2") do |config| config.vm.box = "centos64_ja"

config.vm.provider :virtualbox do |v| v.gui = true end

config.vm.network :private_network, ip: "192.168.33.100" config.vm.provision :shell, :inline => "yum install -y httpd && /sbin/service httpd start"end

$ vim Vagrantfile

demo1






$ vim Vagrantfile

demo1

VMイメージ






$ vim Vagrantfile

demo1

GUI表示






$ vim Vagrantfile

demo1

IPアドレス






$ vim Vagrantfile

demo1

プロビジョニングChef / Puppet / Shell


$ vagrant upBringing machine 'default' up with 'virtualbox' provider...[default] Importing base box 'centos64_ja'...

demo1


[default] Running provisioner: shell...[default] Running: inline scriptLoaded plugins: fastestmirrorDetermining fastest mirrors * base: ftp.iij.ad.jp * extras: ftp.iij.ad.jp * updates: ftp.iij.ad.jpSetting up Install ProcessResolving Dependencies--> Running transaction check---> Package httpd.x86_64 0:2.2.15-28.el6.centos will be installed

demo1


$ open http://192.168.33.100/

demo1

http://192.168.33.100/

http://192.168.33.100/


$ vagrant sshWelcome to your Vagrant-built virtual machine.[vagrant@localhost ~]$

$ vagrant destoryAre you sure you want to destroy the 'default' VM? [y/N] y[default] Forcing shutdown of VM...Connection to 127.0.0.1 closed by remote host.[default] Destroying VM and associated drives...

demo1

demo2


Wordpress

Varying Vagrant Vagrants


• github で公開https://github.com/10up/varying-vagrant-vagrants

• WordPress 環境を構築• 20 のコンポーネントをインストール！

https://github.com/10up/varying-vagrant-vagrants

https://github.com/10up/varying-vagrant-vagrants



Ubuntu 12.04 LTS (Precise Pangolin) subversion 1.7.9nginx 1.4.1 ngrepmysql 5.5.31 dos2unixphp-fpm 5.4.15 WordPress 3.5.2memcached 1.4.13 WordPress trunkPHP memcache extension 3.0.6 WP-CLIxdebug 2.2.1 WordPress Unit TestsPHPUnit 3.7.21 Composerack-grep 2.04 phpMemcachedAdmin 1.2.2 BETAgit 1.8.3 phpMyAdmin 4.0.3


$ git clone https://github.com/10up/varying-vagrant-vagrants.git$ cd varying-vagrant-vagrants$ vagrant up



$ open http://192.168.50.4/

demo2

http://192.168.33.100/

http://192.168.33.100/


$ open http://local.wordpress.dev/

demo2

http://192.168.33.100/

http://192.168.33.100/

開発サーバ構築の流れ


1. Vagrantfile 書く2. プロビジョニング書く3. vagrant up で構築4. vagrant destory で破棄 (vagrant reload で再構築)

従来のツールに例えると


Vagrantfile = Makefile vagrant up = make

$ vim Makefile$ make

$ vim Vagrantfile$ vagrant up

Vagrant 良いところ


• ホストとサーバでディレクトリ共有＝＞開発は IDE で、実行はサーバで

• IPアドレス、マシンリソース定義• VCS(Git等) で差分管理• 構築、配布、共有が楽

Sahara Plugin


• Vagrant Plugin https://github.com/jedi4ever/sahara

• DB の ROLLBACK のようにサーバの状態が戻せる

https://github.com/jedi4ever/sahara

https://github.com/jedi4ever/sahara

Sahara Plugin


$ vagrant plugin install sahara

• インストール

Sahara Plugin


$ vagrant sandbox on• sandbox モード開始 = BEGIN;

$ vagrant sandbox rollback• 元に戻す = ROLLBACK;

$ vagrant sandbox commit• 変更確定 = COMMIT;

$ vagrant sandbox off• sandbox モード終了

Sahara Plugin


$ vagrant sandbox onvagrant sandbox on0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%

$ vagrant ssh[vagrant@localhost ~]$ sudo rm -rf /bin[vagrant@localhost ~]$ ls-bash: ls: コマンドが見つかりません[vagrant@localhost ~]$ exit

Sahara Plugin


$ vagrant sandbox rollback0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%

$ vagrant ssh[vagrant@localhost ~]$ ls

おすすめ1


http://docs.vagrantup.com/v2/



おすすめ2


http://www.amazon.co.jp/dp/1449335837



Summary


• 誰でも全く同じ環境を構築できる• 構成はコードで書く => Vagrantfile

• 環境構築はコマンド一つだけ => vagrant up

@shin1x1


vagrant を web開発環境に使う

Technology