Windows10にVCCWをインストールしてみた

【この記事を読むのに必要な時間は約 11 分です。】

VirtualBoxもVagrantもWordPressも使っているので、VirtualBox上で簡単にローカルWordPress環境が整えられた上、WordMoveというツールを使えば簡単に、実際のサーバーとローカルWordPress環境が移植出来ると噂のVCCWをインストールしてみた。

VCCW

こちらがVCCWのホームページ

VCCW is a Vagrant based development environment for WordPress plugins, themes, or websites.
2016年12月24日現在、VCCW3.05がインストールされる。VCCW2.xxまではCentOSであったが、Ubuntu16.04に変更されている。

インストールされるもの

Ubuntu 16.04 Xenial64
  Subversion Git jq
WP-CLI & WordPress
  WP-CLI
  WordPress i18n Tools
  WordPress Coding Standards for PHP_CodeSniffer
PHP 7
  PHPUnit Composer PHP_CodeSniffer
MySQL 5.7.x
Apache 2.4.x
NodeJS latest
Ruby 2.3
  Bundler Wordmove MailCatcher

VCCWインストールのための事前準備

VirtualBoxとVagrant

「VitualBox」と「Vagrant」はインストールしておくこと。
Vagrant Vagrant 1.8.6以降
VirtualBox VirtualBox 5.1.6以降

ディレクトリの準備

ディレクトリを以下のように作成した。
 E:/Users/jumpup/MyVagrant/(vccw_test)
補足 「vccw_test」フォルダはgitでインストール時に指定して作成する。

WindowsPowerShell

Vagrantを操作する際に、管理者モードで実行する。
WindowsPowerShellでLinuxコマンドを利用するにあたってはこちらも参考にして欲しい。

WindowsユーザーがドットインストールのVagrant入門でつまずかない方法
ドットインストールのVagrant入門をWindows7/10で行おうとするとつまずく。...と思う。 つまずかないように予め同じような環...

VCCWインストール手順

VirtualBoxとVagrant

1. (事前に)VirtualBoxをインストールしておく。

2. (事前に)Vagrantをインストールしておく。

手順

3. vagrantプラグイン「vagrant-hostsupdater plugin」をインストールする。
WindowsPowerShellで

  $ vagrant plugin install vagrant-hostsupdater

補足1 Windowsユーザーは、プラグインを入れても、自分でhostsファイルを設定する必要がある。
補足2 Windowsユーザーは、hostsファイルを設定しない限りvccw.devではアクセス出来ない。

Windowsユーザーはこのプラグインをインストールする必要はない。自分でhostsファイルを編集する必要がある。

参考-hostsファイルの編集

4. vagrant boxをダウンロードする。
WindowsPowerShellで

  $ vagrant box add vccw-team/xenial64

5. VCCW本体をzipまたはtar.gz.形式でダウンロードする。
VCCWのホームページからダウンロードする。
または、gitでダウンロードする。WindowsPowerShellで

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

補足 インストールフォルダも一緒に作成できる。私は「vccw_test」としたが好きな名前で良い。
gitでダウンロードするには予めgit for windowsをインストールしている必要がある。git for windowsのインストールの方法は以下に詳しい。

6. vagrantを操作するために作成したディレクトリに入る。
WindowsPowerShellで

  $ cd vccw_test

7.既に、vaglantfileは作成されていのでvaglantの初期化処理は必要ない。

8.必要なら vagrant up する前に/provisionにあるdefault.ymlvaglantfileのあるフォルダへコピーし、site.ymlへリネームして編集する。
補足 Vagrant up 後にvagrantfileやsite.ymlを書き換えた場合は、vagrant reload 後に設定が反映される。

9.vagrant up を実行する。相当時間がかかるので、じっくり待つ。
注意 WindowsPowerShellは管理者権限で行なわないと失敗する。
WindowPowerShellで

  $ vagrant up
  # vagrant upが終了したら起動しているか確認する
  $ vagrant status

10.サイトをチェックする
-http://vccw.dev/ ←ホストファイルを変更出来ていたら
-http://192.168.33.10/ ←そうでなければデフォルトのIPアドレスでサイトへ接続する。
見事Twenty Seventeenのテーマを採用したサイトが表示されるはず。

11.http://192.168.33.10/wp-adminで管理画面へログイン。
  デフォルト設定ならば ユーザー名admin パスワードadminで管理画面が表示される。


以上

参考 – 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 # 512 がデフォルト 少ないので1024に変更
cpus: 1

#
# Network Settings
#
hostname: vccw.dev # デフォルト windowsの場合、hostsファイルを自分で編集して追記する必要がある
ip: 192.168.33.10 # デフォルト 上記と併せてhostsファイルを編集して追記する

#
# WordPress Settings
#
version: latest
lang: ja # en_US がデフォルト 日本語に変更する
title: VCCW_test # Welcome to the VCCWがデフォルト 自分の好みに変更する
multisite: false
rewrite_structure: /archives/%post_id% #この部分はVCCWインストール後にワードプレス管理画面のパーマリンク設定で変更した方が問題が少ない

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

#
# WordPress User
#
admin_user: jump-up # admin がデフォルト
admin_pass: jump-up password # admin がデフォルト
admin_email: jump.up@gmail.com # 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:
  - debug-bar #デフォルトのままで このプラグインをインストールしないようにするとMovefileが作成されなかった

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

#
# WordPress Options
#
options:
  blogdescription: Hello VCCW_test #Hello VCCW. がデフォルト。

#
# WordPress Multisite Options
#
multisite_options: {}

#
# The values of wp-config.php
#
force_ssl_admin: false
wp_debug: false # true がデフォルト
savequeries: false

#
# 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
#
ruby_gems:
  - bundler
  - wordmove

#
# NPM modules
#
npms: []

#
# composer
#
composers:
  - hirak/prestissimo:*
  - phpunit/phpunit:*
  - squizlabs/php_codesniffer:*
  - wp-coding-standards/wpcs:*
  # - phpmd/phpmd:*
  # - sebastian/phpcpd:*
  # - phploc/phploc:*
  # - phing/phing:*

#
# wp-cli package commands
#
wp_cli_packages:
  - vccw/wp-cli-scaffold-movefile:@stable

#
# 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
  sendmail_path: /usr/bin/env catchmail
  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

注意を要する部分について

VCCWをインストールしてそのままワードプレスを利用する場合には、問題にならないが、その後wordmoveを実行する場合には注意した方が良い部分があるので説明する。

1.パーマリンク設定は、VCCWインストール直後にワードプレスの管理画面から変更することをオススメ。
補足 これで.htaccessファイルが作成される。wordmoveを利用する際は、.htaccessファイルはpullしない方が良い。

2.debug barプラグインは必要ないからとsite.ymlでインストールしないように設定するとMovefileファイルが作成されないので、デフォルトのままVCCWをインストールした方が良い。
補足1 wp_debugはfalseにしておいて大丈夫。

3.debug bar プラグインはインストール後、wordmove pullを実行する前に無効にしておく。
補足 そうでないとpullするウェブサイトによっては警告だらけになってしまい、管理画面が正常に表示されないことがある。

既にあるウェブサイトをwormoveでpullする場合、デバッグモードやデバック用プラグインが有効になっていると、管理画面が正常に表示されないリスクがあるので、注意が必要だ。
以上

もし良ければお願いします。

良かったらフォローお願いします。