VCCW(ver3.18.0)でWordPress構築~ローカル環境構築編~

このブログはWordPressなのですが、VCCWという開発環境で構築しました。

VCCW関連の記事は多く出回っているのですが、それぞれバージョンが違ったり細かい説明が飛ばされていたりと個人的に苦戦しました。
ということで自分が何度もvagrant destroyを繰り返して試行錯誤した結果、ある程度満足する状態の構築手順がまとまったので残しておきたいと思います。

VCCWとは

VCCW
その前に簡単にVCCWについてですが、その名前の通り
Vagrant
Chef
CentOS
WordPress
を元に構成されているWordPress構築&デプロイ環境がまるっと内包されているものです。
とはいえ最近のバージョンではChefではなくAnssible、CentOSではなくUbuntuとなっています笑

つまりは仮想マシン上でWordPressをとても簡単に構築できるという便利ツールで、コマンド数行叩くだけでWordPressが立ち上がってしまいます。
自分は1日もかからずにこのブログをデプロイすることができたので、開発速度面で言えばかなり魅力的な技術です。

とはいえVCCWを動かすまでにいくつか準備があるので早速進めていきます。

VirtualBoxインストール

brewが入っている前提で進めていきます。
VirtualBoxもVagrantもアプリなので、brew caskでインストールできます。

$ brew search virtualbox
virtualbox

となっていればインストールできるということなので実行します。

$ brew cask install virtualbox
...略
installer: Package name is Oracle VM VirtualBox
installer: Installing at base path /
installer: The install failed (エラーによってインストールできませんでした。ソフトウェアの製造元に問い合わせてください。)

これで無事にインストールできればよかったのですが、自分の場合はこんなエラーが出ました。
原因としてはインストールの許可がセキュリティ的に許可されていないことらしいので、システム環境設定 > セキュリティとプライバシー > 一般 から許可した上で再度実行します。

$ brew cask list
virtualbox

となっていれば無事完了です。

Vagrantインストール

VirtualBoxと同じ手順でインストールしていきます。

$ brew cask install vagrant
$ brew cask list
vagrant

最後に、仮想環境に対してホスト名からアクセスできるようになるVagrantの拡張プラグインを入れておきます。
これはVCCWで開発するのであれば必須です。

$ vagrant plugin install vagrant-hostsupdater

これでVCCWの準備は完了しました!

VCCWでWordPress構築

ここからWordPressをローカルで立ち上げるだけなら簡単なのですが、自分が何度も失敗した経験を踏まえた上で個人的にしっくりきた手順で進めていきたいと思います。

VCCW環境の土台となるBoxをインストール

VCCWで仮想環境を立ち上げるのに必要となるVagrantBoxをインストールしておきます。
これはちょっと時間かかります。

$ vagrant box add vccw-team/xenial64
$ vagrant box list
vccw-team/xenial64 (virtualbox, 20180107)

でOKです。

VCCWの雛形をインストール

VCCWを初期構築する際に必要となるファイル群をインストールしていきます。
まずはお好きな開発ディレクトリに移動しておきます(今回はvccwTest)。

$ mkdir vccwTest
$ cd vccwTest

出回っている記事ではgitでVCCWのリポジトリから落としているのですが、gitのremoteに登録されてしまうのとバージョンが古くなるので、こちらから直接zipファイルを入手した方が良いです。
今回は執筆時点で最新だったver3.18.0になっています。

zipファイルを解凍すると中身がこんな感じになっています。

この中身を全て先ほど作ったディレクトリの中に入れます。

VCCWの設定ファイルを作成する

いちおうこの時点でvagrant upコマンドを叩けばローカルでWordPress環境が立ち上がります!
ですが、vagrant upする前に設定をカスタマイズした上で実行した方が無駄がないです。

VCCWはprovision/default.ymlから設定を読み込むのですが、このファイルをコピーしたsite.ymlというファイルをプロジェクトルートに配置することで設定を上書きできます。
ので、まずはsite.ymlを作って移動しておきます。

$ cp provision/default.yml site.yml

site.ymlの中身はこんな感じです。

# encoding: utf-8
# vim: ft=ruby expandtab shiftwidth=2 tabstop=2

#
# General Settings
#
wp_box: vccw-team/xenial64

#
# Virtual Machine Settings
#
memory: 1024
cpus: 1

#
# Network Settings
#
hostname: vccw.test
ip: 192.168.33.10

#
# WordPress Settings
#
version: latest
lang: en_US
title: Welcome to the VCCW
multisite: false
rewrite_structure: /archives/%post_id%

#
# WordPress Path
#
wp_siteurl: ''  # Path to the WP_SITEURL like "wp"
wp_home: ''     # Path to the WP_HOME like "wp"

#
# WordPress User
#
admin_user: admin
admin_pass: admin
admin_email: vccw@example.com

#
# WordPress Database
#
db_prefix: wp_
db_host: localhost
db_name: wordpress
db_user: wordpress
db_pass: wordpress

#
# WordPress Default Plugins
# Plugin's slug or url to the plugin's slug.
#
plugins:
- logbook

#
# WordPress Default Theme
# Theme's slug or url to the theme's .zip.
#
theme: ''

#
# WordPress Options
#
options:
  blogdescription: Hello VCCW.

#
# WordPress Multisite Options
#
multisite_options: {}

#
# The values of wp-config.php
#
force_ssl_admin: false
wp_debug: true
savequeries: false

gitignore: https://raw.githubusercontent.com/github/gitignore/master/WordPress.gitignore

#
# Addtional PHP code in the wp-config.php
#
extra_wp_config: |
  // Addtional PHP code in the wp-config.php
  // These lines are inserted by VCCW.
  // You can place addtional PHP code here!

#
# Theme unit testing
#
theme_unit_test: false
theme_unit_test_uri: https://raw.githubusercontent.com/WPTRT/theme-unit-test/master/themeunittestdata.wordpress.xml
# theme_unit_test_uri: https://raw.githubusercontent.com/jawordpressorg/theme-test-data-ja/master/wordpress-theme-test-date-ja.xml

#
# DB will be reset when provision
#
reset_db_on_provision: true

#
# RubyGems
# Wordmove will be forcibly installed.
#
ruby_gems:
  - bundler
  - wordmove

mailcatcher: true

wp_i18n_tools: true

#
# NPM modules
#
npms: []

#
# composer
#
composers:
  - phpunit/phpunit:5.6
  - squizlabs/php_codesniffer:~2.0
  - wp-coding-standards/wpcs:*
  # - phpmd/phpmd:*
  # - sebastian/phpcpd:*
  # - phploc/phploc:*
  # - phing/phing:*

#
# wp-cli package commands
#
wp_cli_packages:
  - https://github.com/vccw-team/wp-cli-scaffold-movefile/archive/master.zip

#
# Linked Clone for Vagrant v1.8
#
linked_clone: false

#
# Advanced Settings
#

#
# PHP ini values
#
php_ini:
  date.timezone: UTC
  default_charset: UTF-8
  mbstring.language: neutral
  mbstring.internal_encoding: UTF-8
  post_max_size: 1024M # Same with VVV
  short_open_tag: Off
  session.save_path: /tmp
  upload_max_filesize: 1024M # Same with VVV
  xdebug.remote_enable: true
  xdebug.remote_host: 127.0.0.1
  xdebug.remote_port: 9000
  xdebug.profiler_enable: true
  xdebug.idekey: VCCWDEBUG
  xdebug.remote_connect_back: true
  xdebug.remote_autostart: true

synced_folder: wordpress
document_root: /var/www/html

設定項目がたくさんありますが、その中でも大事なもの・詰まりやすいものを取り上げます。
ちなみにsite.ymlは初回のvagrant up時に行われる構築処理で読み込まれるだけなので、ここに記載していなくても構築後に修正することは可能です。

hostname

ローカルホストでアクセスする際のURLを設定できます。
ver3.18.0で見てみるとデフォルト値がvccw.testになっており、URLバーにvccw.testと打てばローカルのWordPressにアクセスできます。

特に拘りがなければそのままでもよいのですが、古いバージョンのVCCWをインストールしてしまった方はvccw.devになっているかと思います。
ただ、.devはGoogleが購入したドメインになっているようでChromeでvccw.devにアクセスするとhttpsに強制的にリダイレクトされてしまうので、変更が必要です。

ip

仮想環境のIPアドレスです。
デフォルト値は192.168.33.10になっていて、これも基本的にはそのままで問題ないです。
ただ、仮想環境を複数立ち上げている場合は被らないように末尾の10の部分を変えましょう。

version

デフォルトはlatestになっているので、執筆時点では最新の5.1のWordPressがインストールされます。
一人で開発しているのであれば問題ないのですが、このVCCWの環境を誰かと共有した場合vagrant upをする際により新しいバージョンになってしまう可能性があります。

ので、これは環境構築時点での最新のバージョンを指定しておくとよいと思います。

lang

WordPressの言語設定です。
デフォルトはen_USとなっていて英語表示になっています。
自分は日本語が好きなのでjaにしておきます。WordPress Settings > title

admin_user,admin_pass

WordPressの管理画面にアクセスするユーザー名とパスワードです。
ここに入力したものがローカルでも本番でも適用されることになるのですが、site.ymlをgit管理することを考慮するとあまりベタでパスワードとか書きたくないです。

ので、ここはデフォルトのadminにしておいて管理画面にログインしてから変更するフローにしておいたほうが個人的には良いと思いました。

ruby_gems

仮想環境にはrubyがインストールされるのでgemが使用できる環境です。
デフォルトでbundlerとwordmoveがセットされていますが、この後触ることになるMovefile.ymlというファイルに環境変数を設定したいのでdotenvを追加しておきます。

ruby_gems:
  - bundler
  - wordmove
  - dotenv

WordPressを仮想環境に構築する

ここまできたらいよいよWordPressを仮想環境に構築します。
プロジェクトルートで以下のコマンドを実行して、パスワードを求められたら入力します。

$ vagrant up

初回のvagrant upはWordPressをインストールしたりDBの構築したりプラグインをインストールしたり…面倒なことを全てやってくれているので結構時間かかります。

もしエラーになったらsite.ymlの記述にどこか間違いがあるのが原因になるので、見直してみましょう。
無事完了したら以下のコマンドを実行して仮想環境のステータスを確認します。

$ vagrant status
vccw.test running (virtualbox)

こんな感じになっていればOKです。
設定したホストにアクセスしてみましょう。

デフォルトテンプレートのブログページのTOPが表示されていれば成功です!
ホスト/adminにアクセスすればWordPress管理画面に入れます。
ユーザー名とパスワードはadmin_user,admin_passに設定したものでログインできます。

仮想環境を閉じる・削除する

vagrant upした後は仮想環境が稼働している状態です。
PCに負荷がかかるので開発が終わったらプロジェクトルートで以下のコマンド実行して仮想環境を閉じておきます。

$ vagrant halt

仮想環境を削除する場合は以下のコマンドです。
VCCWの構築で失敗して環境がグチャグチャになったら消して作り直したほうが早いケースもあります。

$ vagrant destroy

おわり

ここまで来たらひとまず独りでローカル環境でWordPressのブログを運用できる状態になってます。
ただ、git管理もできていなければDBのバックアップも取れておらず、デプロイもできないです…

というわけで、次回以降はそこらへんに触れていきたいと思います。
ではでは