チームでのウェブ制作に、「Vagrant」と「VirtualBox」でMacにWordPress制作用の仮想環境を構築する

WindowsやMacでサイトの制作をする時にローカル（パソコン内）にテスト環境を作る方法として「XAMPP」と「MAMP」がよく使われます。
手軽さという意味では使い勝手がいい2つのアプリケーションですが、チームで分業して制作する際に、それぞれの環境（PHPのバージョンなど）が微妙に異なっていたりしてトラブルの原因となることも多いそうです。
今回「WordBench京都」の勉強会に参加して「Vagrant（ベイグラント）」を使った開発環境（仮想マシン）の構築方法を教わってきました。

「Vagrant」を使うメリット

Vagrantのメリットと特徴をいくつかあげてみます。

• 仮想環境を専門知識がなくても構築できる
• 仮想環境ごとにPHPなどのバージョンやサーバーを指定できる
• 1つのテキストファイル（vagrantfile）で誰でも同じ環境を作れる
• SSLが使用できる

Vagrantはパソコン内に仮想環境を簡単に作れるようになるツールです。今までも仮想環境を作ることはできましたが、一般のひとにはハードルが高かったそうです。

制作するサイトごとに、PHP・MySQL・Apacheなどのバージョンを指定することができます。また、本番サーバー（Linuxなど）の環境も合わせることができるので、問題が起こりにくいという点もあげられます。

開発環境は1つのテキストファイル（vagrantfile）で管理できます。ひとりがGitでバージョン管理をすれば、チーム全体がいつでも同じ環境で制作をおこなうことができます。

以下指摘をいただいたので一部訂正をしています。

今回講師をしてくださった瀬戸さん(@as_chachamaru)は通常は「MAMP」「XAMPP」を使用して、バージョンなどを変えたい時だけ「XAMPP」のhtdocs内にvagrant用のフォルダを置いて使用しているそうです。

「Vagrant」と「VirtualBox」をインストールする

ここから実際に仮想環境を構築していきます。ターミナルでコマンドを入力するところもありますが、直接ファイルを動かすことが大半なので黒い画面に苦手意識があるひとでもできると思います。

「Vagrant」と「VirtualBox」をサイトからダウンロード、インストーラーを開きインストールします。

[DOWNLOAD]をクリックします。

今回はMacで構築するので[MAC OS X]を選択します。32bitと64bitの両方がインストールされます。

VirtualBoxの方は[VirtualBox 4.3.14 for OS X hosts]をクリックします。

両方ともdmgファイルがダウンロードされます。ダブルクリックで開いたらpkgファイルがあるので、右クリックの[開く]を選択、開いても大丈夫ですか？とダイアログが表示されるので[開く]をクリックします。

インストーラーが起動するので、[続ける]をクリックしていけばOKです。VirtualBoxも同じ手順になります。

「ターミナル.app」を起動して下記のように入力してreturnキーを押します。

[Vagrant 1.6.3]などとインストールしたVagrantのバージョンが表示されたらVagrantが正常にインストールできています。VirtualBoxは起動しておいてください。VirtualBoxはVagrantが制御してくれるので起動する必要はありません。

「VCCW」をダウンロードする

今回はWordpressに特化した仮想環境を構築するため、「VCCW」を使用します。VCCWには仮想環境のOSや設定ファイルなどをあらかじめ用意しておいた「box」と呼ばれるパッケージ（これによってインストール時間が短縮される）とWordPressを使用するためのVagrantの設定が含まれています。仮想環境はほとんど全てがこのファイルから読み込まれるのでとても重要なファイルです。

画面右側にあるダウンロードボタンからzipファイルをダウンロードします。

ファイルを解凍すると[vccw-1.3]というフォルダの中に4つのファイルがあります。すべて選択してコピーしておきます。

どこにでもいいので、フォルダを1つ作って、コピーしておいたファイルをペーストします。（今回はデスクトップに[project-01]を作成）

[vagrantfile.sample]をコピーして、同じ階層にペーストします。新しいファイルは[vagrantfile]とリネームしておきます。

ターミナルにこのプロジェクトのパスを指定してカレントを移動させます（これをしないと、参照したいvagrantfileが読み込めていないというトラブルになります）。
[project-01]フォルダをクリックしてCommand+Cでコピーします。ターミナルで下記のように入力してreturnキーを押します。

「Vagrant」ファイルを変更する

「vagrantfile」にはWordPressも含めた、仮想環境の条件が用意されています。必要な環境を再現するためにエディタアプリで「vagrantfile」を開いて変更することができます。詳細はVCCWのCustomizeを確認してください。

とりあえず変更しておくのは、WP_LANGの"en_US"を"ja"にしておくことです。WP_IPは複数のサイトを制作する場合は変更する必要があるようです。

あとでサイトにアクセスする時に必要になるので以下の3つは確認しておきます。

1. WP_HOSTNAME（ホスト名）
2. WP_IP（IPアドレス）
3. WP_DIR（サブディレクトリ）

ターミナルで下記のように入力してreturnキーを押します。

[default: Progress: 30% (Rate: 229k/s, Estimated time remaining: 0:12:57) ]などと表示されます。初回だけ約20分ほど時間がかかりますが、2回目からは30秒ほどで起動するようになります。回線の影響などでうまく処理が進まない場合はControl+Cで処理を停止、vagrant -Vで再読み込みするといいかもしれません。

サイト構築後にVirtualBoxを表示すると[実行中]と表示され、仮想環境の詳細が表示されます。

vagrantfileと同じ階層に[www]というフォルダが作成され、中にWordPressがインストールされています。カスタマイズはここからファイルを開いておこないます。（このあたりの設定もvagrantfileでできるようです）

作成したサイトの表示はホストネームとIP、サブディレクトリの有無によって異なりますが、http://ホスト名 or IP/サブディレクトリ/。になります。例えば管理画面にログインするには以下のようになります。

ちなみにホスト名でアクセスするにはhostsファイルの書き込み権を自動で設定してくれる「vagrant-hostsupdater」というプラグインが必要なようです。

URLはカスタマイズ可能で、vagrant-hostsupdaterを使用すれば起動時に /etc/hosts にレコードを追加し、停止時に自動的に削除します。

hostsファイルの書き換えはセキュリティ面（ファーミング詐欺など）で危ういところもあるそうです。IPでもアクセスできるので、僕はとりあえずプラグインは入れずに使用しようと思っています。

使用する4つのコマンド

Vagrantを使って環境さえ構築してしまえば、ターミナルに入力するコマンドは4つだけです。

1. vagrant haltは仮想環境をシャットダウンします。動かしているとその分だけメモリなどを消費するので、使わない時には消しておくのが基本になります。
2. vagrant upは仮想環境を読み込みます。vagrantfileを変更した後にupを使用すると、変更した設定の差分を読み込んでくれます。
3. vagrant suspendはスリープに近い処理です。作業中の状態を保留状態にするので、次に読み込む時の時間が短縮されます。ただし、容量が圧迫されたままの状態になります。
4. vagrant destroyはリソースをすべて削除します。使用していたvagrantfileがあれば、環境は再構築できるのでデータだけ残しておけばOKです。

サイトを一時的に公開する「Vagrant Cloud」

製作中のサイトを確認してもらう場合は「Vagrant Cloud」というサービスを使うと便利だそうです。

Vagrant Shareという機能を使えば、仮想環境を立ち上げている間だけアクセス可能な使い捨てのURLを取得できるようです。

---

仮想環境やコマンドなどの知識はまったくありませんが、ターミナルをほとんど使用しなかったので、比較的迷うことなく導入することができました。（ターミナルでコマンドたたくだけですよっていうエントリーは初心者には敷居が高いですよね…）

僕自身まだ始め方を覚えた段階なので詳しくは書けないんですが、この手順で進めてもらえばVagrantを始めることができると思います。

• WordBench 京都
• 瀬戸 貴弘さんのTwitterアカウント(@as_chachamaru)