Vagrant+Virturlbox+VCCWの使い方(Mac/Windows)

• 作成：2017/04/17
• 更新：2017/06/06
• WordPress > 使い方

WordPressテーマ・プラグイン開発を効率的に行えるようにVagrant/VCCW/WP-CLIをインストールしてWordPress開発環境を構築する時のメモです。Mac/Windows対応。

エンジニア速報は Twitter の@commteで配信しています。

手順

WordPressテーマ+プラグイン開発環境を整える一連の流れ。

1. 1. Xcodeインストール
2. 2. Homebrewインストール
3. 3. Command Line Tools
4. 4. VirtualBox をインストール
5. 5. Vagrant をインストール
6. 6. hosts変更プラグイン「vagrant-hostsupdater」インストール
7. 7. VCCW を github からclone
8. 8. ローカルにWP-CLIインストール

Vagrantについて

Vagrantとは、簡単なコマンドで仮想環境を操作できるツール。VirtualBoxとセットでインストールします。

• Virtual Boxと一緒に使う
• 仮想環境を簡単に構築・管理・配布できる
• yumやapt-getのようなコマンドが使える
• VirtualBoxを立ち上げなくてよい
• GitHub+Boxで開発環境の共有が手軽に行える
• 短いコマンドでマシン起動・停止・破棄など行える

VCCWについて

VCCWとはLAMPとWordPress環境を簡単に立ち上げるツールのことです。WordPressテーマ・プラグインの開発・テストが簡単に行えるようになります。

• LAMP(Apache/MySQL/PHP)環境構築
• WordPress/WP-CLI/Wordmoveなどもインストールされる
• SSLが有効化されている
• デバックモード無効有効化
• ホスト名変更

似たboxとしてnginxを使ったVVV(Varying Vagrant Vagrants)があります。VVVにはnginx/MariaDB/NodeJsなどが含まれます。

Varying Vagrant Vagrants

WP-CLIについて

ターミナル上でWordPressに関する色々なことを操作できるツール。

• WordPressの更新やバージョンアップ・テーマ・プラグインをコマンドから管理
• スターターテーマがあるのでオリジナルテーマ開発に便利
• 管理画面で行う設定等がコマンド一発
• 固定・投稿ページ・コメント作成
• インポート、エクスポート

などなど色々なことが短いコマンドで可能。

A more RESTful WP-CLI | WP-CLI

Mac版

Homebrew インストール

Xcodeをインストールしてagreeしておきます。同意しておかないとエラーがでます。

ターミナルからCommand Line Tools をインストール

xcode-select --install

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

これで入らなかったら

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

と入力。Homebrew — macOS 用パッケージマネージャー

バージョン確認。

brew -v
Homebrew 1.1.12

VirtualBoxのインストール

brew cask install virtualbox

Vagrant インストール

brew cask install vagrant

バージョン確認

vagrant -v

hostsupdaterインストール

vagrant plugin install vagrant-hostsupdater

VCCWインストール

分かりやすい名前のディレクトリを作成します。VCCWは何個もインストールできますが、ディレクトリによって、ymlファイルのホスト名・ipアドレスは変更したほうがよいでしょう。

# 一つ目
mkdir vccw_test1

#二つ目
mkdir vccw_test2

そのディレクトリに移動してvccwをダウンロードします。

git clone https://github.com/vccw-team/vccw.git

provision/ディレクトリにあるdefault.ymlをコピーしてsite.ymlにリネームしVagrantfileと同じディレクトリに移動させます。

cd provision
cp default.yml ../site.yml

viなどでsite.ymlを開き、langをjaに変更して設定反映。※Vagrant up の前に変更。

vim ../site.yml

# WordPress Settings
#
version: latest
lang: ja

# Network Settings
hostname: vccw.dev
ip: 192.168.33.10

複数作成する場合

※2017/04/20追記:複数のサーバを立ち上げたい場合は、vccw2などのディレクトリを作りvccwをダウンロードしたら、site.ymlファイル内のipアドレスとホスト名を変更してください。その後Vagrant up を叩くとスムーズにいきます。

# Network Settings
# 複数作成する時はhostnameとipアドレスを変更してください
hostname: vccw2.dev
ip: 192.168.33.11

VCCWに移動、Vagrant 起動

cd vccw
vagrant up

192.168.33.10 を表示するとWordPressがインストールされているのを確認できました。192.168.33.10/wp-adminに入ると日本語に変更されています。管理画面はadmin/adminでログイン可能。

参考:Vagrantのインストール（macOS編） - Qiita

WordPressのローカル開発環境をVagrantでMacに構築する - Qiita

Vagrant コマンド

マシンの起動

vagrant up

マシンの停止

vagrant halt

マシンの再起動

vagrant reload

マシンの再インストール(設定変更を反映)

vagrant provision

マシン廃棄

vagrant destroy

VM一覧取得

vagrant global-status

WP-CLIインストール

WP-CLI をローカルにインストールします。

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

動くか確認。

php wp-cli.phar --info

バージョンが表示されたら、

実行権限付与し、wpにリネームして移動。

chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

wpで実行できるか確認

wp --info

WordPressディレクトリに移動してwpコマンドを試してみます。

cd wordpress

ssh でサーバに接続してみます。WordPressが置いてあるディレクトリは以下。

vagrant ssh
cd /var/www/html

データベースを見てみます。

mysql -u root -p
Enter password:
mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
| wordpress          |
+--------------------+

サーバ内でスターターテーマがインストールできます。

wp scaffold _s sample-theme

プラグイン スターターキットを入れる場合。

wp scaffold plugin sample-plugin

Windows版

Windowsは環境開発を構築するのが面倒ですが、とりあえず下からダウンロード。

Download - Vagrant by HashiCorp

Nextを押し、インストールを進めて再起動。

Windowsの場合はBIOSで「Virtualization」をEnabledにします。

Cygwin等でVCCWをcloneします。

$ git clone https://github.com/vccw-team/vccw.git

※2017/04/24追記:windowsのgitクライアントは改行コードの自動変換があり動かなくなることがあるそうで、gitクライアントを使っている人はzipを直接ダウンロード(VCCW)するほうがよいそうです。Takayuki Miyauchiさん、ご指摘ありがとうございます。

git clone する方法だと改行コードを勝手に変えるWindows用のgitクライアントを使ってる人が動かねーって質問してきてめんどくさいので .zip をダウンロードする方法を推奨します。テスト用の余計なファイルも含まれないのでディレクトリ構成もすっきりしてます。 https://t.co/9U4odHtuz1

— Takayuki Miyauchi (@miya0001) 2017年4月22日

Vagrantプラグイン インストール

$ vagrant plugin install vagrant-hostsupdater

vagrant 起動

vagrant up

http://192.168.33.10/ にアクセスするとWordPressがインストールされたページが表示されます。

http://192.168.33.10/wp-admin/ にadmin / admin でログインします。

英語表記になっているので日本語化します。

provision/ディレクトリにあるdefault.ymlをコピーしてsite.ymlにリネームしVagrantfileと同じディレクトリに移動させます。

site.ymlをエディタで開きlang: jaに変更します。

設定反映のためvagrant provisionします。

日本語表記になりました。

WP-CLI

wp-cliをローカルにインストール

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

確認

$ php wp-cli.phar --info
$ chmod +x wp-cli.phar

wp-cli.phar をwpにリネーム

sudo mv wp-cli.phar wp

以上、Vagrant/VCCW/WP-CLIをインストールしてWordPress環境を構築する方法でした。