VCCWでWordPressローカル環境を構築して制作効率化

開発環境構築2018.6.24

前回記事「Local by FlywheelでWordPressローカル環境を構築して制作効率化」に引き続き、最近注目されているWordPressのローカル環境構築についてまとめていきたいと思います。今回はVCCWというものを使った方法です。

VCCWとは？

VCCWとはWordPressに必要なローカル環境が一式揃ったパッケージで、Vagrantの仮想環境上で動作します。その名の通り、V（Vagrant）C（Chef）C（CentOS）W（Wordpress）の頭文字をとったものになります。このようにWebサーバーやDBなどWordPressに必要な環境だけでなく、VCCWでは下記のものが一式揃います！・Ubuntu ・WP-CLI ＆ WordPress ・PHP ・MySQL ・Apache ・NodeJS ・Ruby またSSHでログインもできるようで、WordPressといろんな連携をさせたシステムも作成することができます。では早速インストールからWordPressサイトの表示まで行っていきたいと思います。

1. VartualBoxのインストール

まずはVartualBoxが必要となりますので公式サイト（https://www.virtualbox.org/）からインストーラーをダウンロードします。過去記事「仮想環境のVartualBoxを使ってMacでIE＆Edgeブラウザチェック」も参考に。 VCCWでWordPressローカル環境を構築して制作効率化

インストール後、ターミナルで下記コマンドを入力しインストールの確認を。詳細情報が表示されたらOKです。

$ VirtualBox --help

2. Vagrantのインストール

次にVagrantを同じく公式サイト（https://www.vagrantup.com/）からインストーラーをダウンロードしていきます。 VCCWでWordPressローカル環境を構築して制作効率化

インストール後、ターミナルで下記コマンドを入力しインストールの確認を。バージョンが表示されたらOKです。

$ vagrant -v

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

Vagrantのプラグインで、ホストOSの設定ファイル（/etc/hosts）へゲストOS情報の追加や削除を行うのに必要となります。下記コマンドでインストールしていきます。インストールが完了したら念のため確認しておきます。

$ vagrant plugin install vagrant-hostsupdater

// インストール後の確認（vagrant-hostsupdaterのバージョンが表示されたらOK）
$ vagrant plugin list

4. プロジェクトフォルダの作成

任意の場所にVCCWで使用するプロジェクトフォルダを作成して、その場所へ移動しておきます。

$ mkdir ~/[PATH]/[DIRECTORY_NAME]
$ cd ~/[PATH]/[DIRECTORY_NAME]

5. VCCWのインストール

VCCWの公式サイト（http://vccw.cc/）からzipファイルをインストールし解凍した「vccw」フォルダの中身をプロジェクトフォルダ内に入れる（もしくはリネーム）か、gitからクローンすることでインストールします。 VCCWでWordPressローカル環境を構築して制作効率化

gitでクローンする場合はプロジェクトフォルダ内で下記コマンドを実行します。

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

6. Vagrant Boxの追加

下記コマンドで仮想環境のイメージとなるVagrant Boxを追加します。サイズも大きいので少し時間がかかる場合もありますが気長に待ちましょう。完了したらメッセージが表示されます。

$ vagrant box add vccw-team/xenial64
・
（省略）
・
==> box: Successfully added box 'vccw-team/xenial64' (v20180107) for 'virtualbox'!

この時、ダウンロードに時間がかかりすぎると下記のようなエラーが出るようです。イメージ自体ファイルサイズが大きいため通信速度を確認するか、時間帯を変えて再度試してみます。※ちなみに深夜にこの作業をやったところ1時間くらいかかりました、、

An error occurred while downloading the remote file. The error
message, if any, is reproduced below. Please fix this error and try
again.

*************, errno 60

7. Vagrantを起動させてVCCWでのローカル環境を確認

ここまでの作業が完了したら、プロジェクトフォルダにて下記コマンドを実行し、Vagrantを起動させます。途中でパスワードの入力を求められますので、PCの管理者権限でのパスワードを入力します。初回は少し時間がかかるようです。

$ cd ~/[PATH]/[DIRECTORY_NAME]
$ vagrant up
・
（省略）
・
==> vccw.test: [vagrant-hostsupdater] This operation requires administrative access. You may skip it by manually adding equivalent entries to the hosts file.
Password: [PCでの管理者権限のパスワードを入力]
・
（省略）
・
PLAY [all] **************************************************************************
・
（省略）
・
PLAY RECAP *********************************************************************
vccw.test : ok=70 changed=63 unreachable=0 failed=0

間も無くVagrantの環境内にWordPressがインストールされていきます。PLAY RECAP ****のメッセージが表示されたら完了です。VartualBoxのコントロールパネルでVagrantのVCCWイメージが起動しているのが確認できます。 VCCWでWordPressローカル環境を構築して制作効率化

デフォルトでは下記のようにローカルのホスト名もしくはIPアドレスをブラウザでアクセスすると、サイトが表示されているのが確認できます。これらは後述する「site.yml」ファイルで設定をすることで変更できます。

// ホスト名の場合（デフォルト）
http://vccw.test/

// IPアドレスの場合（デフォルト）
http://192.168.33.10/

8. 設定ファイル「site.yml」の作成と編集

開発環境内で使うWordPressの設定ファイルとなる「provision/default.yml」をコピーして「site.yml」に名前を変更し、必要な設定に応じて編集します。そして、一階層上（Vagrantfileがある階層）へsite.ymlファイルを移動させておきます。

$ cd ~/[PATH]/[DIRECTORY_NAME]/provision
$ cp default.yml site.yml
$ mv site.yml ../

コピーした「site.yml」では様々な設定ができますが、主に下記の項目を見ておくといいのではないでしょうか。【provision/site.yml】（カッコ内は初期値）

#
# Network Settings
#
hostname: [ホスト名（vccw.test）]
ip: [IPアドレス（192.168.33.10）]

#
# WordPress Settings
#
version: latest
lang: [ ja（en_US）]
title: [サイト名（Welcome to the VCCW）]
multisite: false
rewrite_structure: /archives/%post_id%

#
# WordPress User
#
admin_user: [ WordPress初期ユーザーID（admin）]
admin_pass: [ WordPress初期ユーザーPW（admin）]
admin_email: [ WordPress初期ユーザーメールアドレス（vccw@example.com）]

#
# WordPress Database
#
db_prefix: wp_
db_host: localhost
db_name: [データベース名（wordpress）]
db_user: [データベースユーザー名（wordpress）]
db_pass: [データベースユーザーPW（wordpress）]

VCCWで複数のWordPress環境を作成する場合などに適宜必要な項目（ホスト名など）を変更しておきます。変更して保存された内容は下記コマンドで反映させておきます。

$ vagrant reload

上記コマンドで反映されない場合は下記のオプションをつけて実行させるようです。

$ vagrant reload --provision
・
（省略）
・
PLAY RECAP *********************************************************************
vccw.test : ok=70 changed=63 unreachable=0 failed=0

この時は少し時間がかかりますが、上記メッセージが表示されたら完了です。再度サイトにアクセスして設定が反映されているかを確認します。デフォルトでは英語なので最低でも日本語には変更しておきたいですね。 VCCWでWordPressローカル環境を構築して制作効率化

9. Vagrantの停止と再起動

VCCWを閉じてVagrantを停止する時には下記コマンドを実行します。再起動する場合はVCCWのフォルダで起動コマンドを実行すればOKです。

// Vagrantの停止
$ vagrant halt

// Vagrantの再起動
$ cd ~/[PATH]/[DIRECTORY_NAME]
$ vagrant up

いかがでしょうか、ちょうど前回記事「Local by FlywheelでWordPressローカル環境を構築して制作効率化」でもWordPressのローカル環境構築を紹介しましたが、プロジェクトによって使い分けるのがいいのではないでしょうか。今後はVagrantを使った内容の記事もアップしていきたいと思います。（参考にさせて頂いたサイト） VCCW公式サイト WordPressをVagrant環境にらくらくインストールする。 - VCCW