『Vagrant+VCCW』でWordPressローカル環境を構築してみよう

Tweet

Pocket

1. Macに『Vagrant + VirtualBox』を導入する手順
2. Windowsローカル開発環境を『Vagrant + VirtualBox』で作ってみよう
3. Vagrantを使ってみよう！Boxの取得から起動・停止・削除まで
4. 『Vagrant Cloud』を利用してVagrantのBoxを追加してみよう
5. Vagrantで仮想マシンに接続＆Webサーバを立ち上げてみよう
6. Vagrantで作成した環境を「コピー＆配布して他人と共有する」方法
7. 『Vagrant+VCCW』でWordPressローカル環境を構築してみよう <- 本記事
8. 本番環境のWordPressサイトを『VCCW+WordMove』でローカルと同期！

こんにちは、okutani(@okutani_t)です。お店のサイトやブログなんかを立ち上げる時、WordPressを使うとかんたんにリッチなWebサイトが作れて便利です。

ふつうにWordPressを利用する分には、サーバーにWordPressをインストール&ログインで、更新作業なんかポチポチすればOKの楽チン作業。

ですが、デザインをHTMLやCSSで変えたかったり、コーディング作業をしなければならない場合は、ローカル環境を構築して利用するのがベターです。

『VCCW』というVagrantで動作するテンプレートを使うことで、ローカル環境にWordPressをサクッとインストールすることができます。

というわけで、VCCWを使うには『Vagrant + VirtualBox』が必要になってくるので、まだ導入していない方は下記記事を参考に前準備を済ませておきましょう。

LINKMacに「Vagrant」+「VirtualBox」を導入する手順 | vdeep

なお本記事では、Mac上でVCCWの設定を進めています。Windowsでは多少設定が違ってくるかと思いますのでご了承ください。

ではさっそく、VCCWの導入方法を見ていきましょう。

[2017/03/14追記] VCCWのバージョンが新しくなっていて細かい部分がいくつか変更されていました。本記事は過去のバージョン（http://v2.vccw.cc/）についての解説になります。そのうち新しいバージョンの方も記事にします

スポンサーリンク

VCCWのダウンロード

VCCWのダウンロード方法は2パターンあり、「公式サイトからZIPをダウンロード」「gitコマンドを使ってダウンロード」があります。どちらでもお好きな方法でダウンロードしましょう。

公式からのダウンロードは次のとおりです。公式TOPの「Download .zip」を選択でOK。

LINKVCCW – A WordPress development environment.

解凍&好きな名前にリネームしておきましょう。

gitコマンドを使ったダウンロードは次のとおりです。

$ git clone git@github.com:miya0001/vccw.git 好きな名前

これでVCCWがローカルPCに取得できました。公式を見る限りは、gitコマンド経由ではなくてZIPから導入する手順で書かれています。なので、本記事ではZIPファイルから導入を進めていきます。

今回は、一例として当ブログをVCCWで管理できるように進めるので「vdeep」とサイト名にリネームしておきます。

ダウンロードしたVCCW本体を、次の場所に配置しておきました。

~/Vagrant/vdeep/

「~」はホームディレクトリの意味です。通常、Macだと「/Users/ユーザ名/」にあたります。その直下に「Vagrant」ディレクトリを作成して、そこにリネームしたVCCWのファイルを配置、としています。

ちなみに今回ダウンロードした「vccw-2.19.0」の中身はこうなってました。

vagrant-hottsupdaterの導入

ここで「vagrant-hostsupdater」というプラグインを導入しておくと、「http://192.168.33.11」というIPアドレスが「http://wordpress.local」といったホスト名としてアクセスできる設定が書けるようになります。

下記コマンドで導入しておきましょう。

$ vagrant plugin install vagrant-hostsupdater

※正確にはvagrant-hostsupdaterは、仮想マシン立ち上げ時にホストOSの「/etc/hosts」を、後述の「Vagrantfile」の設定に合わせて書き換えてくれます。仮想マシン終了時に、自動で起動前のhostsの設定に戻ります。

VCCWのVagrant Boxの追加

次のコマンドでVCCWのVagrant Boxを追加します。必ずネットワーク環境下でおこないましょう。

$ vagrant box add miya0001/vccw

私の環境下では15分ほどかかりました。コーヒーでも飲みながら待ちましょう。

ちなみに、このBoxは一度追加しておけば使い回しができます。覚えておきましょう。

provisionファイル「site.yml」の設定

「provision/default.yml」をテンプレートとして、「site.yml」というファイルを作成して便利な設定を記述していきます。

site.ymlには「言語設定」「最初から導入したいWordPressプラグイン」「ホスト名」「利用するメモリー量」などなどを設定できます。便利ですね。

次のように、cpコマンドで複製しておきましょう。

$ cd ~/Vagrant/vdeep/
$ cp provision/default.yml site.yml

エディターでsite.ymlを編集します。該当する箇所を適宜書き換えてみてください。「plugins」に使いたいプラグインを書いておくと、勝手にインストールしてくれます。

複数VCCWを立ち上げたい場合は、IPなんかも重複しないように変えてあげると良いですね。

hostname: vdeep.local
ip: 192.168.33.20
memory: 1024
lang: ja
plugins:
  - contact-form-7
  - jetpack

ちなみにsite.ymlファイルはいつでも変更することができます。のちほど紹介するvagrant reloadを叩けばOKです。

VCCWを使って仮想マシンを起動する

ターミナルから下記のようにvccwのディレクトリに移動して、仮想マシンを起動させてみましょう。こいつも多少時間がかかります……

$ cd Vagrant/vdeep
$ vagrant up

途中パスワードを求められますが、自身のPCで使っているパスワードを入力してください。

起動が成功したら、ブラウザのアドレスバーに設定したホスト名かIPアドレスを入力。WordPressサイトが表示されたら成功です。

無事、VCCWを使ってWordPressがローカル環境に導入できました。

管理画面の確認

管理画面は「http://設定したホスト名/wp-login.php」か「http://設定したIP/wp-login.php」でアクセスできます。

IDとパスワードを求められるので、両方とも「admin」と入力してログイン。

お馴染みのダッシュボードが表示されたでしょうか？

利用できるvagrantコマンド

先ほども出てきましたが、次のコマンドで仮想マシン起動。

$ vagrant up

次のコマンドで仮想マシンを終了できます。

$ vagrant halt

次のコマンドで再起動。書き換えたsite.ymlはこのコマンドで再読み込みできます。

$ vagrant reload

立ち上げた仮想マシンには次のコマンドでログインできます。

$ vagrant ssh

ログアウトは普通にexitでOKです。

$ exit

WordPressサイトの構築方法

WordPressのローカル開発環境が整ったので、カスタマイズの方法をかんたんに説明します。

Vagrantfileがある階層に「www」というディレクトリが作成されています。

その中に「wordpress」ディレクトリがあるので、そちらを書き換えていけば、仮想マシンの下記の場所にファイルを同期することができます。

実際のサイト構築は、この「www/wordpress」を編集して進めていきましょう。

まとめ

VCCWを使うことでかんたんにWordPressローカル環境が整いました。

site.ymlを書き換えていけば、お好みのWordPressローカル環境が一発で立ち上げられるので便利ですね。

次回は「WordMove」を使って本番環境とローカル環境を同期させてみたいと思います。

1. Macに『Vagrant + VirtualBox』を導入する手順
2. Windowsローカル開発環境を『Vagrant + VirtualBox』で作ってみよう
3. Vagrantを使ってみよう！Boxの取得から起動・停止・削除まで
4. 『Vagrant Cloud』を利用してVagrantのBoxを追加してみよう
5. Vagrantで仮想マシンに接続＆Webサーバを立ち上げてみよう
6. Vagrantで作成した環境を「コピー＆配布して他人と共有する」方法
7. 『Vagrant+VCCW』でWordPressローカル環境を構築してみよう <- 本記事
8. 本番環境のWordPressサイトを『VCCW+WordMove』でローカルと同期！

Tweet

Pocket

okutani (@okutani_t) のヒトコト

当ブログvdeepもVCCWを使って管理しています。もうこのツールがないとWordPressのカスタマイズできないぐらいに利用してます。便利、便利。