こんにちは、ぶっきーです。
WordPressの開発環境、あなたはどう作ってますか？
XAMPP(ザンプ)やDocker(ドッカー)など色々方法はあるかと思いますが、今回は「VCCWを使ったWordPressローカル開発環境の構築方法」をご紹介します。
VCCWとは？
VCCWとは、Vagrant、Chef、CentOS、WordPressの頭文字を取ったもので、VirtualBox上で動くWordPressの開発環境のことです。
なんだか見慣れない単語が…
そもそもVirtualBoxやVagrantって？
「VirtualBox(バーチャルボックス)」
PC内に仮想的なPCを作成し、元のOSとは別のOSを起動させることが出来るソフトです。。
例えば、Windowsを起動しながらLinuxを動作させることができちゃったりします。
元のOSをホストOS、VirtualBoxで作られた仮想のOSをゲストOS（または仮想マシン）
と呼びます。
「Vagrant(ベイグラント)」
仮想マシンを管理するためのコマンドラインツールです。
VirtualBoxで仮想マシンを構築しようとすると様々な設定を手動で行わなければいけませが、Vagrnatを使用すると、設定ファイルに基づいて自動的に環境を構築してくれます。
簡略化ツールのようなものという認識で大丈夫です。
環境構築の手順
1. まずは「VirtualBox」をインストール
https://www.virtualbox.org/
上記URLから最新版がDL出来ます。
2. 「Vagrant」をインストール
上記URLから最新版がDL出来ます。
インストールが完了したら、PowerShellを開き下記コマンドを入力してください。
※コマンドプロンプトでは一部コマンドが使えないので、PowerShellを使いましょう。
バージョンが表示されていたらインストール成功です。
vagrant -v
3. Vagrantのプラグインをインストール
「vagrant-hostsupdater」
Vagrantを起動/停止した際、hostsファイルにIPアドレスとホスト名を自動的に記述/削除してくれるプラグイン。
後ほど仮想マシンを起動させる際に使いますのでインストールしておきましょう。
vagrant plugin install vagrant-hostsupdater
4. 作業ディレクトリを用意する
今回は「D:\vagrant」にtest.comという作業環境を用意したいと思います。
下記コマンドを実行してください。
cd D:\vagrant mkdir test.com
※cdコマンドでディレクトリの移動、mkdirコマンドでディレクトリの作成が出来ます。
分からない方は別途検索してください。
https://github.com/vccw-team/vccw.git
次に、上記URLからVCCWをzipファイルでDL・解凍し、
中身を「D:\vagrant\test.com」にコピーします。
5. site.yml（設定ファイル）の作成
「D:\vagrant\test.com」にディレクトリを移動し、ファイルの一覧を確認します。
下記コマンドを入力してください。
cd test.com ls
先程「D:\vagrant\test.com」にVCCWを移動させたのでファイルやディレクトリの一覧が下記画像のように表示されるはずです。
※[mastetr ≡]という表示はデフォルトでは表示されません。Gitというバージョン管理ツールをインストールしていると表示されるものです。今回は使用しないので無視していただいても大丈夫です。
「D:\vagrant\test.com\provision」内の「default.yml」というファイルを「site.yml」という名前で「D:\vagrant\test.com」にコピーしましょう。
下記コマンドを入力してください。
cp ./provision/default.yml ./site.yml
※「site.yml」というファイル名は「Vagrantfile」という設定ファイルで指定されています。特に変更するメリットはないので、こだわりがなければデフォルトのままで構いません。
次に、site.ymlを編集します。
特に大事なのは下記3行。
hostname: vccw.test ip: 192.168.33.10 lang: en_US
↓ 変更
hostname: test.com ip: 192.168.33.12 lang: ja
| hostname | ホスト名、任意のものを入力。 |
|---|---|
| ip | 基本的にはそのままでOK。 2つ目以降の環境を用意する際は「192.168.33.11」などに変更。 |
| lang | 日本語WordPressをインストールするなら「ja」にしましょう。 |
仮想マシンを起動
下記コマンドを入力してください。
仮想マシンの構築に少し時間がかかりますのでコーヒーでも飲んで待ちましょう。
vagrant up
※「Windows」の人は注意！
「vagrant up」実行時、Windows環境では謎のエラーが発生することもあります。
その場合は下記2つの対処法をお試しください。
1. 別バージョンをインストール
下記エラー文が発生する場合、VirtualBoxとVagrantの相性が悪いという原因が考えられます。別バージョンをインストールし直してみてください。
default: SSH address: 127.0.0.1:2222 default: SSH username: vagrant default: SSH auth method: private key ・ ・ ・ 省略
私は下記のバージョンでインストールして問題なく動いているので参考にしてください。
・VirtualBox：5.1.30
・Vagrant：2.0.0
https://www.virtualbox.org/wiki/Download_Old_Builds
https://releases.hashicorp.com/vagrant/
過去のバージョンは上記URLからDLできます。
2. BIOSの仮想化設定を有効化する。
BIOSのCPU設定箇所に「VirtualizationTechnology」があるか確認しましょう。この設定が「Disable(無効)」の場合上手く仮想マシンを起動出来ませんので、「Enable(有効)」に変更してください。
※お使いのPCによってBIOSの起動方法や設定項目は違うので、上記設定項目がない場合もあります。詳しくはネットで調べるかPCのメーカーに問い合わせてみてください。
無事に「vagrant up」が完了したら、site.yml内の「hostname」で記述した「test.com」で仮想マシンにアクセス出来るはずです。
しかし、ステップ3で「vagrant-hostsupdater」プラグインをインストールしていない場合は、まだ「test.com」で仮想マシンにアクセスすることは出来ません。
「C:\Windows\System32\drivers\etc\」内のhostsファイルを開き、site.ymlで記述した「ip」と「hostname」をhostsファイルの一番下に追記してください。
192.168.33.12 test.com
「vagrant-hostsupdater」は「ip」と「hostname」をhostsファイルへ自動で記述してくれるプラグインです。便利なので是非インストールして使ってみてください。
「test.com」で仮想マシンにアクセス出来るようになりました！
デフォルトではユーザー名/パスワード共にadminでログイン可能です。
仮想マシンの停止
vagrant halt
※作業が終わったら仮想マシンを停止（シャットダウンのようなもの）しましょう。
作業の再開
vagrant up
※作業を再開したい場合はもう一度「vagrant up」しましょう。
※仮想マシン起動後に「site.yml」を書き換えたい場合
「vagrant up」での起動後にsite.ymlを書き換えても、設定内容は反映されません。下記コマンドを入力することで設定内容が反映されます。
vagrant provision
最後に
今回はVCCWを使ってローカル環境を作ってみました！
コマンド操作が必要なため、初めはXAMPPより難しいかもしれません。
しかし一度慣れてしまえばこちらの方が早く、簡単にローカル環境を作れちゃいますので、頑張ってVCCWの使い方を覚えてみてくださいね！
次の記事では今回紹介しきれなかった、開発環境と本番環境を簡単に同期する「Wordmove」というコマンドラインツールの使い方をご紹介致します。
それではまた！
