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

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

先日は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します。


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

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

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

hostsファイル変更方法

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



次に、 hostsファイルを
右クリック
プロパティ
セキュリティ タブ
Users を選択
編集
フルコントロール→許可 にチェック
適用
OK


パーミッションの変更は以上です。

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

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



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

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



ここまでの作業で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

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

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

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


6. vagrant up

先述した通り、vccwのディレクトリで vagrant up と入力するとあとは自動で環境構築をしてくれます。


次の記事でも書きましたが、初回のvagrant upは時間がかかります。
土日で分かるPHPプログラミング教室の実践 | たきもとけんご.com

時間がかかる理由は、先述した数多くのツールのinstと、データベース設定等を自動で行ってくれるからです。
通信環境によって掛かる時間はまちまちですが、終わるまで気長に待ちましょう。


instが終わったらブラウザのアドレスバーに次の様に入力します。
instが成功していれば次の様な画面になるはずです。

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

まとめ

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

vagrantを利用した環境構築は世の中的に主流なのでしょうか?
私は独学なので世の中の事情に詳しくないのですが・・。


便利、便利、という話はよくネットで目にしますが、実情は
vagrantを利用すると便利!

vagrant + Git を利用して一括で必要なツールがインストールできる!
必要なツールを一つ一つ手動でインストールする手間が省けて便利だよね!

というところだと思います。
確かに、こういう意味では便利です。


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

参考サイト

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

スポンサーリンク
336 x 280 – レクタングル(大)
336 x 280 – レクタングル(大)
  • このエントリーをはてなブックマークに追加

この記事が気に入ったら
いいね!しよう

スポンサーリンク
336 x 280 – レクタングル(大)
トップへ戻る