このブログは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のバックアップも取れておらず、デプロイもできないです…
というわけで、次回以降はそこらへんに触れていきたいと思います。
ではでは
