ガジェット通信

見たことのないものを見に行こう

ディレクターなら知っておきたいVCCWでWordPressの開発環境を構築する方法

DATE:
  • ガジェット通信を≫

こんにちは。ディレクターのJackです。

最近、海が非常に恋しいです。週末にサーフィンへ行きたいと思います。

さて、今回は「VCCWでWordPressの開発環境を構築する方法」をご紹介します。
最近、WordPressの構築案件に携わっているのですが、細かい仕様を確認する際、実際にソースコードを見たくなるときってありますよね。
ただ本番環境のソースコードを見て編集するわけにもいかないので、開発環境を構築する必要があります。

そこで便利なのがVCCWなのです。

VCCWとは

VCCWとは、VagrantをベースとしたWordPressの開発環境です。
下記リンクよりダウンロードできます。

http://vccw.cc/

インストールする

それでは、インストールをしていきましょう。
インストール環境は「OS X Yosemite」となります。
また作業ディレクトリは「/Users/jack/」となります。作業ディレクトリはご自身の開発環境に応じて変更してください。

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

事前にVirtualBoxとVagrantをインストールしておきます。
インストール方法は簡単です。下記リンクよりdmgファイルをダウンロードし、インストールを行いましょう。

Vagrantをダウンロードする
http://www.vagrantup.com/downloads.html
VirtualBoxをダウンロードする
https://www.virtualbox.org/wiki/Downloads

VCCWをダウンロードする

gitでVCCWをcloneしましょう。

$ pwd
/Users/jack/
$ git clone https://github.com/vccw-team/vccw.git
Cloning into ‘vccw’…
remote: Counting objects: 2569, done.
remote: Compressing objects: 100% (9/9), done.
remote: Total 2569 (delta 0), reused 0 (delta 0), pack-reused 2557
Receiving objects: 100% (2569/2569), 702.46 KiB | 569.00 KiB/s, done.
Resolving deltas: 100% (974/974), done.
Checking connectivity… done.

vagrant-hostupdater plugin のインストール

ダウンロード後、vccwディレクトリへ移動し、vagrant-hostsupdaterのインストールを行います。
インストールコマンドは下記となります。

$ cd vccw/
$ pwd
/Users/jack/vccw/
$ vagrant plugin install vagrant-hostsupdater
Installing the ‘vagrant-hostsupdater’ plugin. This can take a few minutes…
Installed the plugin ‘vagrant-hostsupdater (0.0.11)’!

site.ymlで設定を行う

provision/default.ymlをコピーしましょう。コピー先のファイル名は、site.ymlにしてください。

$ cp /Users/jack/vccw/provision/default.yml /Users/jack/vccw/site.yml

必要に応じて、IPの変更作業を行います。vimなどのエディタで編集しましょう。
デフォルトは192.168.33.10に設定されているので、デフォルトのまま利用する場合には変更の必要はありません。
私の環境では、すでに192.168.33.10は使用済みなので、この記事ではIPを192.168.33.11へと変更しています。

site.ymlファイルの一部を下記に記載します。

#
# Network Settings
#
hostname: vccw.dev
ip: 192.168.33.11
sync_folder: ‘www/wordpress’

Vagrantを起動する

設定が完了したので、いよいよVagrantを起動してみましょう。
起動するには、下記コマンドを入力します。

$ pwd
/Users/jack/vccw/
$ vagrant up

初回起動時は、chef/centos-6.5というchef導入済みのboxイメージがダウンロードされます。

==> vccw.dev: adding to (/etc/hosts) : 192.168.33.11 vccw.dev # VAGRANT: 3132002cf708f00d94cb29c4553a94d0 (vccw.dev) / c19ed99f-aa6f-493d-b437-aaf92f907236
Password:
==> vccw.dev: Setting hostname…

途中でホスト名の設定をする必要があるので、Mac管理者パスワードの入力をしてください。
この設定を行うことによって「http://vccw.dev」というアドレスで開発環境にアクセスできるようになります。

Vagrantにログインする

VagrantにSSHでログインするには「vagrant ssh」を利用します。
下記コマンドを入力してみましょう。

$ pwd
/Users/jack/vccw/
$ vagrant ssh
Last login: Tue May 12 20:35:35 2015 from 10.0.2.2
___ ___ ___
___ / / / / /__/
/__/ / /:/ / /:/ __ :
: / /:/ / /:/ /__/ :
: / /:/ ___ / /:/ ___ __ : :
___ __: /__/:/ / / /__/:/ / / /__/ : :
/__/ | |:| : / /:/ : / /:/ : :/:/
:| |:| : /:/ : /:/ : ::/
:__|:| :/:/ :/:/ :/:/
__::::/ ::/ ::/ ::/
~~~~ __/ __/ __/

http://vccw.cc/

Initial code by Takayuki Miyauchi.

https://github.com/miya0001

[vagrant@vccw ~]$

ログイン成功ですね。
サーバ内の「/var/www/wordpress」にWordPressのファイルがあるので、ここで開発を行いましょう。
ローカルの「/Users/jack/vccw/www/wordpress」に「/var/www/wordpress」のディレクトリがマウントされているので、お好きなエディタで開発を楽しむことができます。

まとめ

今回は、「VCCWでWordPressの開発環境を構築する方法」をご紹介しました。
VCCWを利用すれば、クライアント様との打ち合わせ時にも簡単にデモを用意することができるので、とても便利ですね。
また、VCCWには「WordMove」という本番環境やテスト環境とコンテンツを同期できる、便利なコマンドもインストールされています。
次回は、WordMoveを活用したコンテンツ同期のお話ができればと思っています。

本日はここまで! WordPressライフを一緒にエンジョイしましょう!

カテゴリー : 生活・趣味 タグ :
LIGの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。

TOP