ローカルでのWordPress環境構築にはVagrantのVCCWがお手軽で早くてとても便利

公開日：2018/05/24 更新日：2018/05/24

はじめに

これまでは、例えばMacの場合はMAMPを使用してローカル環境にWordPressを構築しいじっていました。しかし、WordPressのインストールは毎回手作業で行っており面倒でした。本当ならばWP-CLI等を使って自動で環境構築できるようにしておくなどしておけばよかったのですが、どうも面倒でやらずじまいでした。そして今回新しいパソコンにまたWordPress環境を構築する必要が出てきたため、良いタイミングだと考えWordPress環境の自動構築について調べました。すると、vagrantのboxとしてWordPressがインストール済でそのほか諸々の環境も含めて構築済のboxを見つけました。それがvccwです。これを使うと、vccwのboxを自分のPCにクローンして、vagrant upするだけでWordPressが動く仮想マシンができあがります。ここでは実際にvagrantを使ってWordPress環境を含むvccwを作成し、その上で動作するWordPressサイトにアクセスするまでの手順をメモします。

参考サイト

以下が公式サイトになります。 VCCW

以降の作業内容は以下のサイトを参考にさせて頂きました。ありがとうございます。 WordPressをVagrant環境にらくらくインストールする。- Qiita

できるようになることと作業概要

自分のPC上でvccwによる仮想マシンを作成し、その上で動作するWordPressサイトを簡単に構築できるようになります。なお、vccwには以下が含まれています。（2018/5/24時点）

Ubuntu 16.04 Xenial64
WP-CLI & WordPress
PHP 7
MySQL 5.7.x
Apache 2.4.x
NodeJS latest
Ruby 2.3

以降では、vagrantでvccwをダウンロード&インストールしてWordPressにアクセスするところまでの手順を説明します。以降の作業はほとんどターミナル上での作業になります。Ubuntu、Windows10の両方共にほとんど同じ作業になります。

必要となる環境

下記の通りすでにvagrantを使っている環境であることが前提となります。2018/5/24時点です。

OSは問わない。Windows、Mac、LinuxでもOK。今回私はUbuntuとWindows10の両方を使いました。
仮想化支援機構がONになっている必要あり（vagrant動作のため）
vagrant(ver1.8.6以上)、VirtualBox（ver5.1.6以上）はインストール済とする

VCCWのインストールと起動

以下では、私の環境ではホームディレクトリにVagrantというディレクトリが作成済でそこで作業するためにcdで移動しています。そして~/Vagrantにwpgrantという私が適当につけた名前のディレクトリにvccwのboxをクローンしています。vccwのboxはhttps://github.com/vccw-team/vccw.gitにあります。https://github.com/vccw-team/vccw.gitの後にクローン先となるディレクトリを指定できます。

$ cd ~/Vagrant
$ git clone https://github.com/vccw-team/vccw.git wpgrant
Cloning into 'wpgrant'...
remote: Counting objects: 5920, done.
remote: Total 5920 (delta 0), reused 0 (delta 0), pack-reused 5920
Receiving objects: 100% (5920/5920), 9.17 MiB | 570.00 KiB/s, done.
Resolving deltas: 100% (2085/2085), done.

クローンしたディレクトリの中身を見てみると、以下のようになっています。

$ ls
Gemfile  Gemfile.lock  LICENSE  README.md  Rakefile  Vagrantfile  ansible.cfg  bin  provision  spec

ここで、vccwのboxから作成する仮想マシン（以降ではこの仮想マシンを単純にvccwと呼びます。）の設定が記述されているprovision/default.ymlを編集し、vccw上に構築するWordPressを日本語化しておきます。

（・・・上省略・・・）
#
# WordPress Settings
#
version: latest
lang: ja #ここを en_US → ja に変更
title: Welcome to the VCCW
multisite: false
rewrite_structure: /archives/%post_id%
（・・・下省略・・・）

このクローンしたディレクトリでvagrant upするだけでWordPress環境を構築済の仮想マシンが出来上がってしまいます。なんとも便利です。ダウンロードとインストールにそれなりに時間かかりますが、もちろんこれは初回のvagrant up時のみです。

$ vagrant up
Bringing machine 'vccw.test' up with 'virtualbox' provider...
==> vccw.test: Box 'vccw-team/xenial64' could not be found. Attempting to find and install...
    vccw.test: Box Provider: virtualbox
    vccw.test: Box Version: = 20180107
==> vccw.test: Loading metadata for box 'vccw-team/xenial64'
    vccw.test: URL: https://vagrantcloud.com/vccw-team/xenial64
==> vccw.test: Adding box 'vccw-team/xenial64' (v20180107) for provider: virtualbox
    vccw.test: Downloading: https://vagrantcloud.com/vccw-team/boxes/xenial64/versions/20180107/providers/virtualbox.box
    vccw.test: Progress: 3%

最終的に以下のようなメッセージまでが表示されてvccwのインストールは完了です。

（・・・上省略・・・）
TASK [stat] ********************************************************************
ok: [vccw.test]

TASK [Create a Movefile] *******************************************************
changed: [vccw.test]
[VCCW - A WordPress development environment.](https://vccw.cc/)
PLAY RECAP *********************************************************************
vccw.test                  : ok=70   changed=63   unreachable=0    failed=0

続いてvccw上で動作するWordPressを正しく表示するための作業について次で説明します。

WordPressサイトを正しく表示するための名前解決について

vccwが起動した時点でWebサーバとWordPressも動いており、デフォルトの設定ではvccw.testというURLがvccw上で動作するWordPressサイトにアクセスするために用意されています。もしくは、vccwのIPアドレスがデフォルトでは192.168.33.10に設定されているため、このIPアドレスをブラウザで入力すればvccw上のWordPressサイトにアクセスできます。しかしこのままでは、ブラウザからvccw.testにアクセスすると以下のように表示されます。（以下はFirefoxの場合）

また、ブラウザから192.168.33.10にアクセスしてみると、以下のように崩れた状態で表示されます。

上記の原因は共に共通しており、vccw.testというURLを名前解決できていないためです。すなわち、vccw.testと192.168.33.10が結びついていない状態です。そのため、ブラウザからvccw.testにアクセスしても見つけることができず表示できません。また、192.168.33.10にアクセスするとWordPressサイトは表示されますが、その中に含まれるCSSやJS、画像が表示されず崩れてしまいます。これはこれらCSSやJS、画像のURLにvccw.testが含まれており、これを名前解決できないためです。よって、vccw.testを名前解決できるようにする必要があります。このために、ホストOS毎によって以下の作業が必要になります。それぞれについて以降に載せます。

Mac、Linuxの場合 - プラグインvagrant-hostsupdaterのインストール
Windows10の場合 - hostsへの追記

Mac、Linuxの場合 - プラグインvagrant-hostsupdaterのインストール

ホストOSがMac、Linuxの場合は、Windows10の場合に比べてより簡単になります。具体的には、名前解決のための情報を自動で追加してくれるvagrantのプラグインであるvagrant-hostsupdaterを以下のようにインストールします。これで完了です。

$ cd wpgrant
$ vagrant plugin install vagrant-hostsupdater
Installing the 'vagrant-hostsupdater' plugin. This can take a few minutes...
Fetching: vagrant-hostsupdater-1.1.1.160.gem (100%)
Installed the plugin 'vagrant-hostsupdater (1.1.1.160)'!

なお、vagrant up時には、名前解決の設定変更のためにsudo権限が必要となり、以下のようにパスワード入力を求められますので入力してください。なお、ここで求められるパスワードとは、Macの場合はMacで現在ログインして使用しているユーザのパスワード、Linuxの場合も特別な設定をしていなければ現在ログインして使用しているユーザのパスワードになります。（2018/9/5 追記）

[vagrant-hostsupdater] Checking for host entries
==> vccw.test: [vagrant-hostsupdater] Writing the following entries to (/etc/hosts)
==> vccw.test: [vagrant-hostsupdater]   192.168.33.10  vccw.test  # VAGRANT: da9ad6d234525363457834cd2340a (vccw.test) / 334e0cd6-154a-43a9-a6ad-9a5597f5aa235
==> vccw.test: [vagrant-hostsupdater] This operation requires administrative access. You may skip it by manually adding equivalent entries to the hosts file.
[sudo] users のパスワード: （ここでパスワード入力）
==> vccw.test: Setting hostname...

Windows10の場合 - hostsへの追記

Windows10の場合は、vagrant-hostsupdaterが動作できないので、名前解決情報をWindows10に直接登録する必要があります。この作業自体は特に難しいことはなく、１つのテキストファイルを編集するだけでOKです。なお、この作業内容自体は、以下の参考サイト様にわかりやすく記載されているためそちらを参照ください。 Windows10でhostsファイルを簡単に編集する2つの方法 | あいしんくいっと

作業としては、hostsというテキストファイルに以下のように最後に１行追記するだけになります。

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#   127.0.0.1       localhost
#   ::1             localhost
192.168.33.10     vccw.test          # vccw server # ここを追記

VCCW上のWordPressにアクセスしてみる

これであとはブラウザでvccw.test、もしくは192.168.33.10にアクセスすると、無事に以下のようにWordPressサイトが表示されます。

もちろんvagrant sshでvccwにログイン可能です。

$ vagrant ssh

WordPressの管理画面にはhttps://vccw.test/wp-login.php/でログインできます。WordPress管理者として以下のアカウントがデフォルトで設定されています。

ユーザ名: admin
パスワード: admin

WordPressサイトの表示が遅い場合の解決方法

# 2018/5/25 追記 もしvccwのWordPressのサイト表示が遅い場合は、以下に解決方法をまとめたので該当する方は見てみてください。 VCCWのWordPressが遅い問題の解決方法（Windows10、Ubuntu両方）

まとめ

はじめてVCCWを使用しましたが、あっという間にWordPress環境をローカル環境に構築でき非常に便利に感じました。また、VCCWには本番環境との同期機能や他にも様々な機能があるため色々と使えそうです。毎回自分のローカル環境にWordPress環境を構築するのが面倒に感じている方はぜひ試してみてください。