VagrantとVCCWでWindows10のローカルにWordPressの環境を構築してみた

VCCW – A WordPress development environment.

今まではWordPressのローカル環境はXAMPPで行っていたのですが、VCCWというのが話題になっているようなので、導入してみることにしました。

VCCWとは

VCCWはVagrantを利用したWordPressの開発環境のことで、動作にはVagrant(仮想マシン環境を管理する)とVirtualBox(仮想マシン)が必要になります。

VCCWを導入するメリットとしては、ローカルに本番と同じ環境を構築することができるという点があります。

VirtualBoxを導入する

まずはVirtualBoxを導入します。

ダウンロード

Oracle VM VirtualBox」から下記のダウンロードボタンをクリックします。

VirtualBoxのダウンロードボタンをクリック

対応するOSを選択してダウンロードします。

対応するOSを選択してダウンロード

私はWindowsの5.1.10をダウンロードしました。

インストール

ダウンロードした後、VirtualBoxのexeをクリックしてインストールします。

VirtualBoxのexeをクリック

セットアップが始まるので「Next」をクリックします。

セットアップを確認し「Next」をクリック

インストール項目を確認した後、「Next」をクリックします。

インストール項目を確認した後「Next」をクリック

スタートメニューやショートカットが生成されることを確認し、「Next」をクリックします。

ショートカットなどが生成されることを確認し「Next」をクリック

警告文を読み、よければ「YES」をクリックします。

警告文を読み、よければ「YES」をクリック

メッセーシを読み、よければ「Install」をクリックします。

メッセーシを読み、よければ「Install」をクリック

VirtualBoxのインストールが始まるので待ちます。

VirtualBoxのインストールが始まるので待つ

「Finish」をクリックします。

「Finish」をクリック

VirtualBoxが起動するのを確認し、閉じます。

VirtualBoxが起動するのを確認し、閉じる

私は上記のタイミングあたりでWindowsセキュリティが起動したので、「インストール」をクリックしました。

Windowsセキュリティが起動、「インストール」をクリック

Vagrantを導入する

VirtualBoxの導入が終わった後は、Vagrantを導入します。

ダウンロード

Vagrant by HashiCorp」に行き、「DOWNLOAD」をクリックします。

「DOWNLOAD」をクリック

対応するOSを選択してダウンロードします。

対応するOSを選択してダウンロード

私はWindows(64bit版)の1.9.1をダウンロードしました。

インストール

Vagrantのmsiをクリックしてインストールします。

msiをクリックしてインストール

セットアップが始まるので「Next」をクリックします。

セットアップが始まるので「Next」をクリック

規約に同意し、「Next」をクリックします。

規約に同意し、「Next」をクリック

インストールする場所を確認し、よければ「Next」をクリックします。

インストールする場所を確認し、よければ「Next」をクリック

メッセージを確認し、「Install」をクリックします。

メッセージを確認し、「Install」をクリック

インストールが始まるので待ちます。

インストールが始まるので待ち

メッセージを確認し、「Finish」をクリックします。

メッセージを確認し、「Finish」をクリック

以上でVagrantがインストールされます。Vagrantをインストールした後は再起動が必要になるので注意します。

hostsの設定をする

VCCWを導入する準備として、hostsの設定を行います。hostsファイルは「C:\Windows\System32\drivers\etc\hosts」にあります。

メモ帳を管理者権限で起動します。

メモ帳を管理者権限で起動

hostsをファイルを開きます。

hostsをファイルを開く

hostsに「192.168.33.10 vccw.dev」と記述し、上書きした後メモ帳を閉じます。

「192.168.33.10 vccw.dev」と記述

VCCWを導入する

いよいよVCCWを導入してきます。

ダウンロード

VCCW – A WordPress development environment.」に行き、「Download.zip」をクリックします。

「Download.zip」をクリック

私は3.0.4をダウンロードしました。

作業場所を決める

ダウロードしたvccwをクリックして解凍します。

vccwをクリックして解凍

解凍したvccwを好きな名称に変えておきます。私は「vccw」としました。

フォルダ名を決めた後、vccwの作業場所を決めます。私は「C」直下に「project」というフォルダを作り、そこに「vccw」を移動しました。

作業場所を決めてフォルダを移動

site.yml

次に「site.yml」というファイルを作ります。「site.yml」を作っておくと、構築するWordPressのIPアドレスや言語などを指定できるので便利です。

「provision」フォルダにある「defalut.yml」をvccw直下にコピーし、「site.yml」とファイル名を変えます。

「provision」に入る
「defalut.yml」をコピー
「site.yml」とファイル名を変更

次に「site.yml」を開き、langを「lang: en_US」から「lang: ja」に変更します。

「lang: ja」に変更

vagrant up

コマンド画面から「vagrant up」を実行して仮想マシンを起動します。vccwフォルダを左クリックして選択したあと、Shiftキーを押しながら右クリックをします。次にメニューにある「コマンドウィンドウをここで開く」を選択します。

メニューにある「コマンドウィンドウをここで開く」を選択

コマンド画面が開くので「vagrant up」と入力し、Enterキーを押します。

「vagrant up」と入力

問題がなければ下記のように「vagrant up」の実行が完了します。

「vagrant up」の実行が完了

vccwの中を見ると「.vagrant」や「wordpress」フォルダが生成されていることがわかります。

「.vagrant」や「wordpress」フォルダが生成

「wordpress」フォルダの中を見ると、いつものWordPressのファイルを確認することができます。

WordPressのファイルがある

確認

実際にブラウザで動作しているかを確認してみます。ブラウザのアドレスバーに「http://vccw.dev」、または「http://192.168.33.10」と入力します。

「http://vccw.dev」と入力
「http://192.168.33.10」と入力

vccwが正常に動作していれば、下記のように何らかのWordPressテーマの表示があるはずです。

WordPressテーマの表示がある

上記URLの後に「/wp-login-php」と入力すると、管理画面のログインページが表示されます。

「http://vccw.dev/wp-login-php」と入力
「http://192.168.33.10/wp-login-php」と入力

初期状態の場合、ユーザー名、パスワード共に「site.yaml」で「admin」となっているはずなので「admin」と入力すると管理画面に入ることができます。

ユーザー名とパスは「admin」

管理画面に入ることができました。

管理画面にログイン

まとめ

最初はVCCWはgit cloneで行っていたのですが、MailCatcherのスタートで躓いて出来ず、zipに変更してようやく「vagrant up」することができました。

VCCWはすんなりいけばXAMPPなどを導入してDBの設定などを行うよりも、ずっと簡単にローカルでのWordPerssの環境を構築することができます。

ローカルでのWordPressの構築に興味がある方はVCCWを試しても良いと思います。

スポンサーリンク