WordPressのテスト環境をVCCWで構築する方法

ブログ・ITハック ,

VCCW トップページ
WordPressでブログなど構築するのは、とても簡単ですが、
テーマ変更などで大幅に変更する場合、テスト環境が必要となります。
VCCWを使って、MacBookAirでWordPressのテスト環境を構築します。

広告

VCCWをインストールする前の準備

VirtualBoxをインストール

VirtualBox
https://www.virtualbox.org/wiki/Downloads
VirtualBox
ダウンロードしたdmgファイルをひらいて、VirtualBox.pkgをひらいてインストールを行います。
VirtualBoxインストール
追記
VAGRANTより先にVirtualBoxをインストールしないと、VAGRANTが正しくインストールされないようです。

VAGRANTをインストール

VAGRANT
http://www.vagrantup.com/downloads.html
VAGRANT
ダウンロードしたdmgファイルをひらいて、Vagrant.pkgをひらいてインストールを行います。
VAGRANT インストール

作業フォルダを用意する

適当なフォルダを作成して、作業用のフォルダを確保します。
作業フォルダ

VCCWをZipでダウンロードする

ターミナルからコマンドでコピーもできるみたいですが、Zipでファイル一式をダウンロードできます。
http://vccw.cc/
VCCW トップページ

ダウンロードしたZipを、先ほど作成した作業フォルダに解凍します。
解凍したフォルダは、「vccw」に変更しました。
Vccw解凍

vagrant-hostupdater pluginをインストールする

開発環境のWordPressのサイトに、IPアドレスではなく、ホスト名でアクセスできるようにプラグインをインストールします。
インストールには、ターミナルからコマンドで実行することができます。

ターミナルは、Macのその他に入っているはずです。
スクリーンショット 2015 10 11 17 52 13
ターミナルをひらいたら、次コマンドでインストールを行います。
カッコ内の日本語は解説なので、入力する必要ありません。

$ cd ~/vccw-kanaog (VCCWの作業フォルダへ移動)
$ cd vccw (VCCWを解凍(設置)したフォルダ)
$ ls (フォルダの中身を確認)
LICENSE	README.md	Vagrantfile	provision
$  vagrant plugin install vagrant-hostsupdater (インストール)
Installing the 'vagrant-hostsupdater' plugin. This can take a few minutes...
Installed the plugin 'vagrant-hostsupdater (0.0.11)'!

defalut.ymlをsite.ymlに変更してコピー

vccw/provision/フォルダにある、defalut.ymlをコピーして、
vccw/フォルダにペーストします。
スクリーンショット 2015 10 12 19 37 03

site.ymlを、miなどのテキストエディタで開き、編集します。
WordPressの各種設定項目が記述されているので、必要に応じて変更しましょう。

Vagrantを起動する

ターミナルから、コマンド(vagrant up)で起動させます。

$ cd vccw (VCCWを解凍(設置)したフォルダ)
$ ls (フォルダの中身を確認)
LICENSE	README.md	Vagrantfile	provision
$ vagrant up (Vagrantを起動)

初回は、初期設定で時間がかかります。
途中で、Macの管理者アカウントのパスワード入力を求められるので、入力します。

その後も、インストールに時間がかかります。

==> vccw.dev:   
==> vccw.dev: * package[autoconf] action install

こんな状態で止まっていても、インストールが完了されていませんので、ひたすら待ちます。

==> vccw.dev:   
==> vccw.dev: * execute[yum-makecache] action run

こうなったら完了です。

==> vccw.dev: Chef Client finished, 44/230 resources updated in 872.66456533 seconds
$

テスト環境にアクセスしてみる

site.ymlの、hostnameに変更をしていない場合、
http://vccw.dev をブラウザで開きます。

#
# Network Settings
#
hostname: vccw.dev
ip: 192.168.33.10
sync_folder: 'www/wordpress'

ちゃんとインストールが成功している場合、このようにWordPressの初期状態のページが表示されます。
スクリーンショット 2015 10 13 18 54 03

http://hiroshi-kanao.com/blog/wp-admin/が管理者ページです。
site.ymlに、ユーザ名とパスワードが記載されているので、そちらのものでログインできます。

www/wordpressのフォルダに、WordPressがインストールされています。
スクリーンショット 2015 10 13 19 42 03

うまくいかなかったら・・・

404 Errorが表示されるケース

http://vccw.devにアクセスしても、404 Errorが表示される場合、VCCWのインストールが完了していないことが考えられます。
インストールに時間がかかるので、ちゃんと完了するまで待ちましょう。

もしインストールが、なんらかの原因で失敗した場合、
vagrantを一旦削除(vagrant destroy)して、再度vagrant upすると成功しました。

vagrantを削除(Virtual Boxに登録された設定も削除されます)

$ vagrant destroy

vagrantの状態確認

$ vagrant status

vagrantの一旦停止

$ vagrant suspend

vagrantのシャットダウン

$ vagrant halt

vagrantの再起動

$ vagrant reload

広告

この記事を書いた人

金尾 浩史

2013年1月から2016年5月までタイ・バンコクで働いていました。 嫁はタイ人。タイ人との国際結婚や、タイでの生活を紹介しています。 富山県出身1987年生まれ。  Twitter:@HiroshiKanao  Facebook:Hiroshi.Kanao  Instagram:hiroshi_kanao

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です