ゼロからできるWordPress開発〜VCCWでローカル開発環境構築編〜

こんにちは〜、1月からマークアップエンジニアになりましたCandyです。
VCCWを使ったWordPress開発環境構築とデプロイのフローを、出来る限り丁寧にまとめたいと思います。
今回はローカル開発環境構築編です。

公式サイト(http://vccw.cc/)にも結構わかりやすく書いてあるのですが、WordPressの日本語化等の設定を含めて、初心者にもわかりやすく書いていこうと思います。黒い画面が苦手な人もきっと大丈夫!

VCCWとは

後ろの席のイケメンがこう説明しておりました。

VCCWとは仮想環境を構築するためのツール Vagrant とインフラ構築自動化ツール Chef をベースにしたWordPress環境構築ツールです。
簡単に言うと、XAMPPやMAMPのようにローカル環境の構築を容易に出来るものです。

VCCWのもうひとつのCはなんの頭文字なんでしょうね。知ってる人がいたら教えてください。
→ CentOSのCだと教えていただきました。なるほど!

VCCWでローカル開発環境構築

まずはVCCWを使うにあたって必要なものをインストールしていきます〜。

1. VirtualBoxのインストール

インストール済みの人はスキップしてください。VirtualBox 4.3以上が必要です。
https://www.virtualbox.org/

2. Vagrantのインストール

こちらもインストール済みの人はスキップしてください。Vagrant 1.5以上が必要です。
http://www.vagrantup.com/

3. プラグインvagrant-hostsupdaterのインストール

Macの方はターミナルから下記コマンドでVagrantのプラグイン(vagrant-hostsupdater)をインストールするとhostsファイルに192.168.33.10 vccw.devと追加してくれます。

$ vagrant plugin install vagrant-hostsupdater

Windowsの方はできないからhostsファイルに直接自分で追加してね、ということらしいです。hostsファイルの場所はOSによって様々なのでOS名+hosts等でぐぐってみてください。書き換えは管理者権限で行う必要がありますが、わからない人はhostsファイルをDesktopとかにコピーして編集後に元の位置に戻すとつまづかないと思います。

4. Vagrant boxのダウンロード

$ vagrant box add miya0001/vccw

これで事前準備は完了です。

5. VCCWのダウンロード

いよいよVCCWのダウンロードです。任意のディレクトリ名を指定してgit cloneします。ここではvccw-testとします。

$ git clone https://github.com/vccw-team/vccw.git vccw-test

zipでダウンロードしたい人は公式サイトからダウンロードできます。

6. 設定ファイルの作成

defalt.ymlsite.ymlとしてコピーし、vccw-test直下に移動させます。

// コピー
$ cp vccw-test/provision/default.yml vccw-test/site.yml

7. 初期設定

vccw-testの中のsite.ymlをエディタで開きます。ここでWordPressの日本語化やマルチサイトの設定等が可能です。

 #
 # WordPress Settings
 #
 version: latest
 lang: en_US #日本語化はen_USをjaに変更
 title: Welcome to the VCCW
 multisite: false #マルチサイト化はfalseをtrueに変更
 rewrite_structure: /archives/%post_id%

hostnameやipの変更をしたい場合は下記を変更してください。

#
# Network Settings
#
hostname: vccw.dev #任意のhostnameに変更
ip: 192.168.33.10 #任意のipに変更
sync_folder: 'www/wordpress'

編集後site.ymlを保存したら初期設定は完了です。

8. Vagrantの起動

vccw-testディレクトリに移動してVagrantを起動します。

// 移動
$ cd vccw-test
// Vagrant起動
$ vagrant up

もしvagrant upした後にsite.ymlの設定を変更したい場合は一旦下記のコマンドで停止させてから再度起動してください。

// Vagrant停止
$ vagrant halt

9. 確認

hostnameを変更しなかった人は、下記にアクセスするとWordPressのHello World!が表示されれば成功です!お疲れ様でした!
http://vccw.dev/
※ 管理画面はhttp://vccw.dev/wp-adminでadmin/adminで入れます。

あっという間過ぎて拍子抜けしませんでしたか?近いうちにデプロイ編も書きたいと思います。ではでは〜!