VCCW – A WordPress development environment.
今まではWordPressのローカル環境はXAMPPで行っていたのですが、VCCWというのが話題になっているようなので、導入してみることにしました。
VCCWとは
VCCWはVagrantを利用したWordPressの開発環境のことで、動作にはVagrant(仮想マシン環境を管理する)とVirtualBox(仮想マシン)が必要になります。
VCCWを導入するメリットとしては、ローカルに本番と同じ環境を構築することができるという点があります。
VirtualBoxを導入する
まずはVirtualBoxを導入します。
ダウンロード
「Oracle VM VirtualBox」から下記のダウンロードボタンをクリックします。
![VirtualBox VirtualBoxのダウンロードボタンをクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/VirtualBox0001.png)
対応するOSを選択してダウンロードします。
![VirtualBox 対応するOSを選択してダウンロード](https://www.pc-weblog.com/wp-content/uploads/2016/12/VirtualBox0002.png)
私はWindowsの5.1.10をダウンロードしました。
インストール
ダウンロードした後、VirtualBoxのexeをクリックしてインストールします。
![VirtualBox VirtualBoxのexeをクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/VirtualBox0003.png)
セットアップが始まるので「Next」をクリックします。
![VirtualBox セットアップを確認し「Next」をクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/VirtualBox0004.png)
インストール項目を確認した後、「Next」をクリックします。
![VirtualBox インストール項目を確認した後「Next」をクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/VirtualBox0005.png)
スタートメニューやショートカットが生成されることを確認し、「Next」をクリックします。
![VirtualBox ショートカットなどが生成されることを確認し「Next」をクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/VirtualBox0006.png)
警告文を読み、よければ「YES」をクリックします。
![VirtualBox 警告文を読み、よければ「YES」をクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/VirtualBox0007.png)
メッセーシを読み、よければ「Install」をクリックします。
![VirtualBox メッセーシを読み、よければ「Install」をクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/VirtualBox0008.png)
VirtualBoxのインストールが始まるので待ちます。
![VirtualBox VirtualBoxのインストールが始まるので待つ](https://www.pc-weblog.com/wp-content/uploads/2016/12/VirtualBox0009.png)
「Finish」をクリックします。
![VirtualBox 「Finish」をクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/VirtualBox0010.png)
VirtualBoxが起動するのを確認し、閉じます。
![VirtualBox VirtualBoxが起動するのを確認し、閉じる](https://www.pc-weblog.com/wp-content/uploads/2016/12/VirtualBox0011.png)
私は上記のタイミングあたりでWindowsセキュリティが起動したので、「インストール」をクリックしました。
![VirtualBox Windowsセキュリティが起動、「インストール」をクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/VirtualBox0012.png)
Vagrantを導入する
VirtualBoxの導入が終わった後は、Vagrantを導入します。
ダウンロード
「Vagrant by HashiCorp」に行き、「DOWNLOAD」をクリックします。
![vagrant 「DOWNLOAD」をクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/vagrant0001.png)
対応するOSを選択してダウンロードします。
![vagrant 対応するOSを選択してダウンロード](https://www.pc-weblog.com/wp-content/uploads/2016/12/vagrant0002.png)
私はWindows(64bit版)の1.9.1をダウンロードしました。
インストール
Vagrantのmsiをクリックしてインストールします。
![vagrant msiをクリックしてインストール](https://www.pc-weblog.com/wp-content/uploads/2016/12/vagrant0003.png)
セットアップが始まるので「Next」をクリックします。
![vagrant セットアップが始まるので「Next」をクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/vagrant0004.png)
規約に同意し、「Next」をクリックします。
![vagrant 規約に同意し、「Next」をクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/vagrant0005.png)
インストールする場所を確認し、よければ「Next」をクリックします。
![vagrant インストールする場所を確認し、よければ「Next」をクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/vagrant0006.png)
メッセージを確認し、「Install」をクリックします。
![vagrant メッセージを確認し、「Install」をクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/vagrant0007.png)
インストールが始まるので待ちます。
![vagrant インストールが始まるので待つ](https://www.pc-weblog.com/wp-content/uploads/2016/12/vagrant0008.png)
メッセージを確認し、「Finish」をクリックします。
![vagrant メッセージを確認し、「Finish」をクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/vagrant0009.png)
以上でVagrantがインストールされます。Vagrantをインストールした後は再起動が必要になるので注意します。
hostsの設定をする
VCCWを導入する準備として、hostsの設定を行います。hostsファイルは「C:\Windows\System32\drivers\etc\hosts」にあります。
メモ帳を管理者権限で起動します。
![hosts メモ帳を管理者権限で起動](https://www.pc-weblog.com/wp-content/uploads/2016/12/hosts0001.png)
hostsをファイルを開きます。
![hosts hostsをファイルを開く](https://www.pc-weblog.com/wp-content/uploads/2016/12/hosts0002.png)
hostsに「192.168.33.10 vccw.dev」と記述し、上書きした後メモ帳を閉じます。
![hosts 「192.168.33.10 vccw.dev」と記述](https://www.pc-weblog.com/wp-content/uploads/2016/12/hosts0003.png)
VCCWを導入する
いよいよVCCWを導入してきます。
ダウンロード
「VCCW – A WordPress development environment.」に行き、「Download.zip」をクリックします。
![vccw 「Download.zip」をクリック](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw0001.png)
私は3.0.4をダウンロードしました。
作業場所を決める
ダウロードしたvccwをクリックして解凍します。
![vccw vccwをクリックして解凍](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw0002.png)
解凍したvccwを好きな名称に変えておきます。私は「vccw」としました。
フォルダ名を決めた後、vccwの作業場所を決めます。私は「C」直下に「project」というフォルダを作り、そこに「vccw」を移動しました。
![vccw 作業場所を決めてフォルダを移動](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw0003.png)
site.yml
次に「site.yml」というファイルを作ります。「site.yml」を作っておくと、構築するWordPressのIPアドレスや言語などを指定できるので便利です。
「provision」フォルダにある「defalut.yml」をvccw直下にコピーし、「site.yml」とファイル名を変えます。
次に「site.yml」を開き、langを「lang: en_US」から「lang: ja」に変更します。
![vccw 「lang: ja」に変更](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw0008.png)
vagrant up
コマンド画面から「vagrant up」を実行して仮想マシンを起動します。vccwフォルダを左クリックして選択したあと、Shiftキーを押しながら右クリックをします。次にメニューにある「コマンドウィンドウをここで開く」を選択します。
![vccw メニューにある「コマンドウィンドウをここで開く」を選択](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw0009.png)
コマンド画面が開くので「vagrant up」と入力し、Enterキーを押します。
![vccw 「vagrant up」と入力](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw0010.png)
問題がなければ下記のように「vagrant up」の実行が完了します。
![vccw 「vagrant up」の実行が完了](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw0011.png)
vccwの中を見ると「.vagrant」や「wordpress」フォルダが生成されていることがわかります。
![vccw 「.vagrant」や「wordpress」フォルダが生成](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw0012.png)
「wordpress」フォルダの中を見ると、いつものWordPressのファイルを確認することができます。
![vccw WordPressのファイルがある](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw0013.png)
確認
実際にブラウザで動作しているかを確認してみます。ブラウザのアドレスバーに「http://vccw.dev」、または「http://192.168.33.10」と入力します。
![vccw 「http://vccw.dev」と入力](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw-wp0001.png)
![vccw 「http://192.168.33.10」と入力](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw-wp0002.png)
vccwが正常に動作していれば、下記のように何らかのWordPressテーマの表示があるはずです。
![vccw WordPressテーマの表示がある](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw-wp0003-1024x693.png)
上記URLの後に「/wp-login-php」と入力すると、管理画面のログインページが表示されます。
![vccw 「http://vccw.dev/wp-login-php」と入力](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw-wp0004.png)
![vccw 「http://192.168.33.10/wp-login-php」と入力](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw-wp0005.png)
初期状態の場合、ユーザー名、パスワード共に「site.yaml」で「admin」となっているはずなので「admin」と入力すると管理画面に入ることができます。
![vccw ユーザー名とパスは「admin」](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw-wp0006.png)
管理画面に入ることができました。
![vccw 管理画面に入ることができました。](https://www.pc-weblog.com/wp-content/uploads/2016/12/vccw-wp0007.png)
まとめ
- VirtualBoxを導入する。
- Vagrantを導入する。
- hostsの設定をする。
- VCCW(zip)を導入する。
- 作業場所を決める。
- 「site.yml」を作る。
- コマンド画面で「vagrant up」する。
最初はVCCWはgit cloneで行っていたのですが、MailCatcherのスタートで躓いて出来ず、zipに変更してようやく「vagrant up」することができました。
VCCWはすんなりいけばXAMPPなどを導入してDBの設定などを行うよりも、ずっと簡単にローカルでのWordPerssの環境を構築することができます。
ローカルでのWordPressの構築に興味がある方はVCCWを試しても良いと思います。
コメント