windows8.1にvagrant,VCCWでWordPressローカル開発環境を構築する方法

2016.05.07

こんにちは。たきもとです。

先日は301リダイレクトの設定について紹介しました。
WordPress 301リダイレクトによるパーマリンク変更方法 | たきもとけんご.com

今回はwindows8.1にvagrant,VCCWでWordPressローカル開発環境を構築する方法を紹介します。

動作環境

私の動作環境は次の通り。

  • windows8.1 64bit

 
 

なぜVCCWで環境構築をしようと思ったのか

WPテーマを自作しようと思いまして。
自作のためにはローカル開発環境が必要かな、と。

WPローカル開発環境構築方法を幾つか調べる内にVCCWを知りました。
全部　”らしい” という噂レベルで大変恐縮なのですが、次の噂を信じてVCCWに決めました。

  • 複数のツール(PHP, MySQL, node.js など)を一括でinstしてくれるらしい
  • ローカル開発環境→本番環境への移行が容易らしい

前者については事実確認がとれました。
無事にinstが完了したので。

後者については,私がWPテーマを無事に完成した後に報告します。
 
 

VCCWとは

まず、VCCWについて。

公式サイトはこちら。
VCCW
 
 

VCCWはWPローカル開発環境を簡単に構築できるツールである、という理解。

詳細は本家HPを見るのが一番です。
VCCWについてざっくり押さえるとしたら次の点です。

  • 色々便利なツールを簡単に準備してくれる

 
 
色々ってなに？ という疑問に対する答えは本家HPに書いてあります。
ここではその一部を抜粋します。

・CentOS 6.5

  • Subversion
  • Git
  • jq

・WordPress latest

  • WP-CLI
  • WordPress i18n Tools
  • WordPress Coding Standards for PHP_CodeSniffer

・PHP 5.4

  • PHPUnit
  • Composer
  • phpenv
  • php-build

・MySQL 5.5
・Apache
・Node.js

  • grunt, grybt-cli, grunt-init
  • gulp

・Ruby 2.1

  • Bundler
  • Wordmove
  • Sass
  • MailCatcher

 
 
引用: What’s Installed | VCCW

 
 
PHPUnitはテストで使用するはず。まだ使ったことないけど。

APIを叩くのにComposerは必要でしょう。使ったことないけど。
今後きっと使うはず。

Node.jsが何なのか知らないけど、きっとjavaScriptに関係しているはず。

Rubyは触ったことないけど、いつか使う気がする。

Wordmoveは ローカル→本番 への移行に大活躍するらしい。
期待しています。
 
 
こんな感じの理解で、これからVCCWを使っていきます。
 
 

事前知識

環境構築の際、案外用語や操作で躓いたりします。
ここでは事前知識を必要最低限に絞って紹介します。
 
 

クローン

Git, GitHubを利用するときに必ず聞く言葉。
大抵の場合、GitHubにある開発環境(リポジトリ)を自分のPCに再現することをクローンと言います。

ここでは、

  • GitHub上の環境をローカルにコピーするコト

という理解でokです。
 
 

VCCWをwindows8.1, vagrantで使用するまでの手順

VCCWをwindows8.1, vagrantで使用するまでの手順は次の通りです。

  1. VirtualBox, Vagrant, Git をインストール
  2. vagrant-hostsupdater pluginをインストール
  3. hostsのパーミッションを変更する
  4. VCCWをローカルにクローン
  5. site.ymlの修正
  6. vagrant up

 
 

1. VirtualBox, Vagrant, Git をインストール

VirtualBox, Vagrant, Git はHPからDLします。
DL手順は先日書いたこちらの記事を参考にして下さい。

土日で分かるPHPプログラミング教室の実践 | たきもとけんご.com

HPからDLするだけなので、悩む箇所はないと思います。
お気づきの点等御座いましたら、コメント欄よりご連絡下さい。
 
 

2. vagrant-hostsupdater pluginをインストール

VM起動時、停止時にhostsファイルの自動書換を行ってくれます。

詳細はGitHubの次のページに記載されています。
Vagrant::Hostsupdater | GitHub/cogitatio/vagrant-hostsupdater
 
 
コマンドプロンプトに次のコマンドを入力することでinstします。

vagrant plugin install vagrant-hostsupdater

 
 

3. hostsのパーミッションを変更する

VCCWインストール前に、hostsファイルのパーミッションを変更します。

hostsファイルはデフォルトでは読み取り専用になっているので、フルコントロール可に変更します。
 
 

hostsファイル変更方法

まず、次の階層までディレクトリを辿ります。

C:/WINDOWS/system32/drivers/etc/hosts

 
 
次に、 hostsファイルを
右クリック
プロパティ
セキュリティ タブ
Users を選択
編集
フルコントロール→許可 にチェック
適用
OK
 
 
パーミッションの変更は以上です。
 
 

4. VCCWをローカルにクローン

ここで、実際に自分のPCのどのディレクトリで作業を行うかを決めます。
私は次の場所で作業することにしました。

C:\Users\(ユーザ名)\Desktop\prgrm

 
 
私はデスクトップ上に prgrm というフォルダを作りました。
ここにVCCWをinstします。

コマンドプロンプトで次の階層まで降り、更にgit cloneコマンドを入力します。

cd C:\Users\(ユーザ名)\Desktop\prgrm

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

 
 
ここまでの作業でprgrmの下にvccwというディレクトリが作成されているはずです。
 
 

5. site.ymlの修正

vccwディレクトリ内の README.md を見てみると色々注意書きが書いてあります。
ここではsite.ymlについての作業が必要、と書いてあるのでそれに従います。
 
 

## Configuration

1. Copy `provision/default.yml` to `site.yml`.
1. Edit the `site.yml`.
1. Run `vagrant up`.
 
 
引用: vccw内のREADME.md 抜粋

ナンバリングがおかしいのですが、ざっくり意訳すると

1. provision/default.yml を site.yml としてコピー
2. site.yml を編集
3. (コマンドプロンプトで)vagrant up を実行

 
 
では、早速やってみましょう。

1. provision/default.yml を site.yml としてコピー

コマンドプロンプト上で操作してもokですし、マウスを操作してフォルダを操作してもokです。

provision下のdefault.yml を vccw直下にコピーしましょう。
コピー後、default.yml を site.yml にリネームしましょう。
 
 

2. site.yml を編集

site.yml で最低限編集するべきなのは、言語設定です。
それ以外は必要に応じて編集しましょう。
編集については次のサイトが詳しく紹介しています。

 
 
私は次の箇所を変更しました。

site.yml

#
# WordPress Settings
#
version: latest
lang: ja   ← en_US から ja に変更
title: Welcome to the VCCW
multisite: false
rewrite_structure: /archives/%post_id%

” ← en_US から ja に変更” は解説のために入れています。
実際のファイルには書き込まないで下さい。
 
 

3. (コマンドプロンプトで)vagrant up を実行

あとはvagrantを起動します。
コマンドプロンプトで vccw のあるディレクトリまで移動し、次のコマンドを入力します。

cd C:\Users\(ユーザ名)\Desktop\prgrm\vccw

vagrant up

 
 

6. vagrant up

先述した通り、vccwのディレクトリで vagrant up と入力するとあとは自動で環境構築をしてくれます。
 
 
次の記事でも書きましたが、初回のvagrant upは時間がかかります。
土日で分かるPHPプログラミング教室の実践 | たきもとけんご.com

時間がかかる理由は、先述した数多くのツールのinstと、データベース設定等を自動で行ってくれるからです。
通信環境によって掛かる時間はまちまちですが、終わるまで気長に待ちましょう。
 
 
instが終わったらブラウザのアドレスバーに次の様に入力します。
instが成功していれば次の様な画面になるはずです。

http://192.168.33.10/

windows8.1 vagrant VCCW WordPress ローカル開発環境
 
 

まとめ

コマンドプロンプトに抵抗がなければVCCWは非常に楽な環境構築手段である

vagrantを利用した環境構築は世の中的に主流なのでしょうか？
私は独学なので世の中の事情に詳しくないのですが・・。
 
 
便利、便利、という話はよくネットで目にしますが、実情は
vagrantを利用すると便利！
↓
vagrant + Git を利用して一括で必要なツールがインストールできる！
必要なツールを一つ一つ手動でインストールする手間が省けて便利だよね！

というところだと思います。
確かに、こういう意味では便利です。
 
 
私はプログラミング自体でも躓きますが、環境構築ではもっと躓きます。
新しいツールや手法は若干ハードルが高く感じますが、まだまだ初心者なので今後も気合を入れて挑戦してゆきます。
 
 

参考サイト

大変お世話になりました。

たきもと

1985年生まれ 東京都在住 フリーランスWEBエンジニア.
30歳からWEBプログラミングを独学で習得. その後エンジニアとして某企業にコミット.
現在は週3日稼働のフリーランスエンジニアとして活躍.
学んだことを中心に web 界隈の人達に向けた情報を発信.

たきもとをフォローする
CODE
vagrant wordpress
＼ share ／
たきもと
たきもと.com

コメント

Secured By miniOrange