【WordPress】初心者でも簡単！VCCWでMacにローカル環境を構築する

レンタルサーバーは契約していないけれど、試しにWordPressに触れてみたい・・・

WordPressの案件を担当していて、ローカルにもステージングや本番と同じ環境を作りたい・・・

そのような場合にVCCWを導入すると、簡単にローカルにWordPress環境が構築出来てしまいます！

私は環境構築などが苦手なため、VCCWはWordPressの仕事をするときに非常に役立っております。

そんなVCCWをMacに導入する方法について、詳しく解説していきます。

 

VCCWとは？

公式サイト：http://vccw.cc/

This is a Vagrant configuration designed for development of WordPress plugins, themes, or websites.

これは、WordPressのプラグイン、テーマ、またはウェブサイトの開発のために設計されたベイグラント構成です。(Google翻訳より)

要は、VCCWをインストールすれば、ネットに繋がず自分のPC内でWordPressの環境が作れるということです。

 

VCCW導入方法

１．VirtualBoxのインストール

VirtualBoxとは、いわゆる仮想マシンというもので、今使っているPCの中に別のPCを作ることが出来ます。

例えば、MacにVirtualBoxをインストールして仮想マシンを作成、その仮想マシンにWindowsをインストールすれば、MacなのにWindowsを起動するといったことも出来るようです。

公式サイトよりVirtualBoxをダウンロード、インストールします。

VirtualBox：https://www.virtualbox.org/

↑「DownloadVirtualBox5.2(現在の最新バージョン)」をクリック。

↑Macなので「OS X hosts」をクリック。「VirtualBox-5.2.6-120293-OSX.dmg」のダウンロードが開始されます。

↑ダウンロードしたファイルをクリックするとインストーラが起動するので、インストールします。

 

２．Vagrantのインストール

Vagrantとは、VirtualBoxなどの仮想マシンを簡単に操作するためのソフトです。

VirtualBoxを直接操作することなく、Vagrantから起動・シャットダウンなど行います。

公式サイトよりVagrantをダウンロード、インストールします。

Vagrant：https://www.vagrantup.com/

↑「DOWNLOAD 2.0.2(現在の最新バージョン)」をクリック。

 

↑Macなので「Mac OS X 64-bit」をクリック。「vagrant_2.0.2_x86_64.dmg」のダウンロードが開始されます。

 

↑ダウンロードしたファイルをクリックするとインストーラが起動するので、インストールします。

 

３．プラグインvagrant-hostsupdaterのインストール

vagrant-hostsupdaterをインストールすることで、「192.168.33.10」といったIPアドレスだけではなく、「vccw.test」などの自分で設定した好きなホスト名でも、WordPressにアクセスすることが可能になります。

IPアドレスは数字で覚えにくいので、ホスト名にサイトのタイトルなどを設定しておけば、直感的にアクセス出来ます。

vagrant-hostsupdaterのインストールは必須ではありませんが、インストールしておくことをお勧めします。

今度はサイトからではなく、ターミナルにコマンドを入力してのインストールとなります。

 

↑デスクトップ右上の虫眼鏡のマークをクリックもしくはcontrolキー + スペースキーを押下してSpotlight検索を表示させます。

 

↑「ターミナル」と入力していくとターミナル.appが表示されるので選択します。

 

↑黒い画面のターミナルが表示されたら、上記コマンドをコピペしてエンターキーを押下します。

↑こんな感じで、「Installed the plugin ‘vagrant-hostsupdater (x.x.x)’!」が表示されればインストール完了です。

 

４．Vagrant Boxのインストール

Vagrant Boxというのは、仮想マシンのベースとなるテンプレートのようなものらしいです。

引き続き、ターミナルからインストールします。

↑ターミナルに上記コマンドをコピペしてエンターキーを押下します。

インストールが完了するまでしばらく待ちましょう。

 

５．VCCWのzipファイルをダウンロード

公式サイトより、VCCWのzipファイルをダウンロードします。

↑「Download .zip」をクリック。「vccw-x.x.x.zip」のダウンロードが開始されます。

 

「vccw-x.x.x.zip」をダブルクリックすると解凍されたフォルダ「VCCW」が作成されます。

 

６．VCCWを配置する

今回は、「MyVagrant」というフォルダを新規作成し、その下に先程解凍したフォルダ「VCCW」を移動しますが、各自お好みの場所に配置すればOKです。

↑/Users/ユーザ名/MyVagrant/vccw というフォルダ構成になっています。

 

７．site.ymlファイルを作成する

default.ymlをコピーしたsite.ymlファイルを作成します。

配置する場所は、default.ymlより一階層上となるので注意が必要です。

/Users/ユーザ名/MyVagrant/vccw/provision/default.ymlをコピーして、vccwフォルダ直下に配置し、「site.yml」にリネームします。

 

８．site.ymlファイルを編集する

site.ymlは各種設定が書かれているファイルです。

内容を変更することで、オリジナルの設定を反映させることが可能です。

例えば、18行目にhostname、19行目にip、24行目にlangがあります。

hostnameをvccw.test→hoge.testに、ipを192.168.33.11に、langをjaに変更し、保存します。

そうすることで、この後仮想マシンを起動した際に、デフォルトのvccw.testまたは192.168.10ではなく、hoge.testまたは192.168.11でアクセス出来るようになります。

また、langをjaに変更したことで、日本語版のWordPressが起動されるようになります。

その他様々な設定が出来ますので、目的に合わせて変更しておきましょう。

 

９．仮想マシンを起動する

ターミナルから、仮想マシンを起動します。

まずは、Vagrantfileがある階層(/Users/ユーザ名/MyVagrant/vccw)まで移動しなければなりません。

コマンド「cd」により、現在のディレクトリの場所を切り替えることが出来ます。

↑ターミナルに上記コマンドをコピペしてエンターキーを押下します。

ユーザ名の前が「〜」から「vccw」に変化していて、ディレクトリが切り替わったことが確認出来ます。

 

ここでようやく、仮想マシンを起動するコマンドを実行します。

↑ターミナルに上記コマンドをコピペしてエンターキーを押下します。

初回は起動までにしばらく時間がかかるので、気長に待ちましょう。

色々と出力されますが、flag to force provisioning. Provisioners marked to run always will still run.と表示されたら起動完了です。

 

１０．ブラウザからアクセスする

site.ymlで設定したipアドレスまたはホスト名をブラウザ(GoogleChromeなど)に入力し、アクセスします。

このようにWordPressのサイトが表示されたら成功です！

 

まとめ

簡単にWordPressのローカル環境を作れるVCCWは、私のように環境周りに詳しくない方には非常におすすめです。

VCCWフォルダをコピーしてsite.ymlファイルのipやホスト名が被らないように修正すれば、複数のサイトもあっという間に構築出来てしまいます。

これ無しでは仕事も出来ないくらい、欠かせない存在となっています。

皆様も是非お試しくださいね！