VagrantのVCCWでWordPress環境構築＆他PCからの接続

Flywheelでサクッとローカル環境を構築しようとしたのですが、マシンの制約で断念しました。手段を変えてVagrantのVCCWを使用したら構築できましてので、備忘録として残しておきます。

ローカルWordPress環境の比較記事：

5 of the Best Local WordPress Development Tools Compared for 2020

インストール環境
インストール済ソフトなど
VCCWのインストール
vagrant起動前の準備
vagrant起動
VCCW関連初期パスワード

インストール環境

OS X 10.11.6 (El Capitan)

インストール済ソフトなど

VirtualBox 5.2.42
vagrant 2.2.9
PHP 5.6.36

VCCWのインストール

ワークディレクトリ(~/Vagrant)を作成し、ワークディレクトリ配下に新たなディレクトリ(wpgrant)にvccwをクローン作成する例となります。

$ cd ~/Vagrant
$ git clone https://github.com/vccw-team/vccw.git wpgrant

クローンしたディレクトリの内容を確認します。

$ cd wpgrant
$ ls
Gemfile  Gemfile.lock  LICENSE  README.md  Rakefile  Vagrantfile  ansible.cfg  bin  provision  spec

vagrant起動前の準備

site.yml の作成

site.yml をデフォルトからコピーして作成します。

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

site.yml の編集

site.yml は以下のように変更しました。(変更前後の差分)

「<」は変更前のファイル、「>」は変更後のファイルを表します。

$ diff provision/default.yml site.yml
12,13c12,13
< memory: 1024
< cpus: 1
---
> memory: 2048             # メモリの割当を変更
> cpus: 2                        # CPU数の割当を変更
18,19c18,19
< hostname: vccw.test
< ip: 192.168.33.10
---
> hostname: itbibommini　　# 任意の文字列(hosts設定要の例)or 192.168.xxx.xxx
> ip: 192.168.xxx.xxx      # xxx.xxx は同じネットワークで、まだ使われていないものにします 
26c26
<   - www.vccw.test
---
>   - www.itbibommini

※ a（added）は追加、d（deleted）は削除、c（changed）

※ iPhoneなどから確認したい場合は、hosts設定しなくてもアクセスできるように、

hostname: 192.168.xxx.xxx

にしておいた方が無難です。

Vagrantfile の編集

$ cd ~/Vagrant/wpgrant
$ vi Vagrantfile

※ viコマンドでなく、テキストエディタで編集しても良いです。私は「Sublime Text」を使用しました。

ネットワーク設定をブリッジ接続に変更します。(52行目)

  config.vm.network :private_network, ip: _conf['ip']

　　　↓

  config.vm.network :public_network, ip: _conf['ip'], hostsupdater: "skip"

hosts の編集

hostname を任意の文字列にした場合は、hosts設定を追加します。(IPアドレスにした場合は不要)

※VirtualBoxをインストールしたPCのホストOSのhosts、および他(呼出元)PCのhostsに追加しました。

$ sudo vi /private/etc/hosts         # /etc/hosts でも良いかな
Password:

アカウントのパスワードを入力します。

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost
fe80::1%lo0     localhost
192.168.xxx.xxx itbibommini

site.yml で指定した「ip:」と「hostname:」を紐付けます。

wq! で保存し、編集終了します。

プロビジョニング済みの場合

WordPress のホスト名が vccw.testになっていたりするので、ホスト名を変更します。（WP-CLI で変更します。）

$ cd ~/Vagrant/wordpress
$ wp search-replace vccw.test itbibommini

vagrant起動

$ vagrant up

起動したら(最初は起動に時間がかかります)、

ブラウザからhostnameで指定したホスト

例：http://itbibommini

にアクセスします。

VCCW関連初期パスワード

WordPress

ログインURL： http://<hostname>/wp-login.php
ユーザー名： admin
パスワード： admin

MySQL

MySQLホスト： 127.0.0.1
ユーザー名：wordpressまたはroot
パスワード： wordpress
Port： 3306

SSH

ホスト： <hostname> または 192.168.xxx.xxx
ユーザー名： vagrant
パスワード： vagrant
Port： 22