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 VirtualBoxのダウンロードボタンをクリック
VirtualBoxのダウンロードボタンをクリック

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

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

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

インストール

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

VirtualBox VirtualBoxのexeをクリック
VirtualBoxのexeをクリック

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

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

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

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

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

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

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

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

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

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

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

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

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

VirtualBox 「Finish」をクリック
「Finish」をクリック

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

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

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

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

Vagrantを導入する

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

ダウンロード

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

vagrant 「DOWNLOAD」をクリック
「DOWNLOAD」をクリック

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

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

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

インストール

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

hostsの設定をする

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

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

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

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

hosts hostsをファイルを開く
hostsをファイルを開く

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

Google Chromeで「.dev」とするとhttpsにリダイレクトされるのでChromeを利用している人は「dev」ではなく他の名称にしましょう。
hosts 「192.168.33.10 vccw.dev」と記述
「192.168.33.10 vccw.dev」と記述

VCCWを導入する

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

ダウンロード

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

vccw 「Download.zip」をクリック
「Download.zip」をクリック

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

作業場所を決める

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

vccw vccwをクリックして解凍
vccwをクリックして解凍

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

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

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

site.yml

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

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

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

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

vccw 「lang: ja」に変更
「lang: ja」に変更

vagrant up

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

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

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

vccw 「vagrant up」と入力
「vagrant up」と入力

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

vccw 「vagrant up」の実行が完了
「vagrant up」の実行が完了

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

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

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

vccw WordPressのファイルがある
WordPressのファイルがある

確認

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

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

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

vccw WordPressテーマの表示がある
WordPressテーマの表示がある

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

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

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

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

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

vccw 管理画面に入ることができました。
管理画面にログイン

まとめ

  • VirtualBoxを導入する。
  • Vagrantを導入する。
  • hostsの設定をする。
  • VCCW(zip)を導入する。
  • 作業場所を決める。
  • 「site.yml」を作る。
  • コマンド画面で「vagrant up」する。

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

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

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

スポンサーリンク
技術情報
スポンサーリンク
シェアする
ボヘミアンをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク

コメント