こんにちは、okutani(@okutani_t)です。お店のサイトやブログなんかを立ち上げる時、WordPressを使うとかんたんにリッチなWebサイトが作れて便利です。
ふつうにWordPressを利用する分には、サーバーにWordPressをインストール&ログインで、更新作業なんかポチポチすればOKの楽チン作業。
ですが、デザインをHTMLやCSSで変えたかったり、コーディング作業をしなければならない場合は、ローカル環境を構築して利用するのがベターです。
『VCCW』というVagrantで動作するテンプレートを使うことで、ローカル環境にWordPressをサクッとインストールすることができます。
というわけで、VCCWを使うには『Vagrant + VirtualBox』が必要になってくるので、まだ導入していない方は下記記事を参考に前準備を済ませておきましょう。
LINKMacに「Vagrant」+「VirtualBox」を導入する手順 | vdeep
なお本記事では、Mac上でVCCWの設定を進めています。Windowsでは多少設定が違ってくるかと思いますのでご了承ください。
ではさっそく、VCCWの導入方法を見ていきましょう。
スポンサーリンク
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://vdeep.net/wp-login.php」か「http://192.168.33.15/wp-login.php」でアクセスできます。
IDとパスワードを求められるので、両方とも「admin」と入力してログイン。
お馴染みのダッシュボードが表示されたでしょうか？
利用できるvagrantコマンド
先ほども出てきましたが、次のコマンドで仮想マシン起動。
$ vagrant up
次のコマンドで仮想マシンを終了できます。
$ vagrant halt
次のコマンドで再起動。書き換えたsite.ymlはこのコマンドで再読み込みできます。
$ vagrant reload
立ち上げた仮想マシンには次のコマンドでログインできます。
$ vagrant ssh
ログアウトは普通にexitでOKです。
$ exit
WordPressサイトの構築方法
WordPressのローカル開発環境が整ったので、カスタマイズの方法をかんたんに説明します。
Vagrantfileがある階層に「www」というディレクトリが作成されています。
その中に「wordpress」ディレクトリがあるので、そちらを書き換えていけば、仮想マシンの「/home/vdeep/vdeep.net/public_html」にファイルを同期することができます。
実際のサイト構築は、Mac側の「www/wordpress」を編集して進めていきましょう。
まとめ
VCCWを使うことでかんたんにWordPressローカル環境が整いました。
site.ymlを書き換えていけば、お好みのWordPressローカル環境が一発で立ち上げられるので便利ですね。
次回は「WordMove」を使って本番環境とローカル環境を同期させてみたいと思います。