WordPressの独自テーマをローカルで開発したかったので、開発環境を構築しました。
なぜローカル環境をこの方法で構築したか？Windowsならではのハマる箇所！をシェアします。
※VagrantやVirtualBoxについての説明はありません
【環境】
PC：Windows10 home
VirtualBox6.0
vagrant 2.2.6
VagrantとVirtualBoxはインストールされている前提で記事を書いています。
各インストーラーはこちら↓↓↓
Virtual Box ⇒ https://www.virtualbox.org/
Vagrant ⇒ https://www.vagrantup.com/
VirtualBox × Vagrant の方法にしたか？
今回のローカル開発では、以下を満たせればOKでした。
- 独自テーマをいじりたいだけ
- DBは手を付けない
- ローカルを汚したくない
- いらなくなったら簡単に削除したい
- 必要になったら簡単に同じ環境を構築したい
WordPressのローカル環境には、XAMPPやMAMPをインストールする方法がありますが、あまりローカルにものを増やしたくなかったので、仮想環境上に簡単に構築ができるVagrantを採用しました。
なぜそこまでローカル環境を汚したくないかと申しますと、、、以前、Javaの開発でローカルがMySQLやらIDEAやらeclipseやらでごちゃごちゃになっちゃいました…SQLのVersionアップ時にもError起きまくりで懲り懲りしました（笑）もうエディタも数増やしたくないし、DBをローカルにインストールしたくないのですｗｗｗ削除するのも一苦労。。。泣
Dockerの方法もあるそうですが、Vagrant×VirtualBoxで事が足りるのでDockerは使いませんでした。
※偉そうに言ってますがDockerを使った事がないので、近々に別案件で試してみたいです。
WordPressのローカル環境構築方法
Vagrant Boxの中に「VCCW」というboxがあります。VCCWひとつをインストールするだけで、必要な開発環境はすべて揃います。
しかも、Vagrantの良いところは、環境そのものを必要に応じて削除・追加が簡単に出来るところです！
- VCCWをインストールすると含まれてくるもの
- Ubuntu
- WP-CLI WordPress
- PHP
- MySQL
- Apache
- NodeJS
- Ruby
次項から実際の導入手順を記載します。Windowsユーザーには落とし穴があるので要注意です！
Vagrant のVCCWBoxをダウンロード
ターミナル・Power Shellで下記コマンドを実行
vagrant box add vccw-team/xenial64
実行すると、
[.vagrant.d/boxes]直下にインストールしたBOXが格納されます。
コマンドでは、このように実行するとインストールされたBOXが確認できます。
vagrant box list
先ほどインストールしたBOX名が表示されればOKです。
【余談】いらなくなったBOXを削除する方法
いらなくなったBOXを削除したい時のコマンドはこちらです。
vagrant box remove 削除するBOXの名前
VCCWのZIPをダウンロード
作業ディレクトリを作成（場所はどこでもOKです）
分かりやすいようにこのようなディレクトリを作成しました。
C:\Users\vagrant\wordpress
作成したディレクトリにVCCW公式ページからダウンロードしたZIPを解凍して格納します。
VCCWのページはこちら⇒http://vccw.cc/#h2-0
格納後のディレクトリ構造はこのようになります。
C:\Users\vagrant\wordpress\vccw
（任意）default.ymlファイルの設定変更
デフォルト設定のままでも問題ありませんが、デフォルト言語がen_USになっているのでjaに変更します。言語設定の他にもホスト名やipを変更する事もできます。
C:\Users\vagrant\wordpress\vccw\provision\default.yml
# # WordPress Settings # version: lang: en_US ⇒ jaに変更
【ハマりどころ】Windowsユーザー向け hostsファイルの追記
Vagrantでは、upした時にホストOSのhostsファイルを自動的に上書きしてくれるプラグイン「vagrant-hostsupdater」がありますが、Windowsの場合Administratorでなければ書込みができないため、vagrant upする際にerror（Errno::EACCES）が出てしまいます。
私はこのerrorに３時間くらい悩まされましたｗｗｗ
この問題を解決するために、C:\Windows\System32\drivers\etc直下にあるhostsファイルにdefault.ymlで設定したホスト名とipを追記します。
このファイルは、バックアップをとることをお勧めします。
↓hostsに追加する文言↓
192.168.33.10 vccw.test
※IPとホスト名のスペースはタブで切りました。
※IPとホスト名は、必ずdefault.ymlで指定したものにしてください。Vagrantを実行
作業ディレクトリに移動します。
cd .\vagrant\wordpress\vccw
Vagrantを開始します。一番最初の実行は時間がかかります。
vagrant up
実行が完了したら、default.ymlで設定したホスト名かipでブラウザアクセスします。
デフォルト設定の場合は「192.168.33.10」or「vccw.test」です。
以上でローカル開発環境が構築できました！ぶっちゃけ１日かかってしまいました…
開発は、C:\Users\vagrant\wordpress\vccw直下にインストールされたwordpressをVScodeでいじいじしてまいります。
次項では、参考までに開発内で使用していくであろうVagrantのコマンドをメモとして残しています。
Vagrant主要コマンド
Vagrant開始
vagrant up
仮想環境内に入る
vagrant ssh
Vagrant停止
vagrant halt
仮想マシーンの再起動
vagrant reload
起動時にsite.ymlの変更を適用したい時
vagrant reload --provision
仮想マシーンの削除 ※Boxは消えません
vagrant destroy
VCCWのmySQLにアクセスする
ターミナル上からのアクセス方法については、こちらの記事をご参照ください。↓
