VCCWでローカル開発環境をつくる

## VCCWとは

- Vagrantを使用してWordpressのローカル環境を作ることができる

## 導入

### 前提

- Mac / 10.12.4 Sierraで作業
- VCCW v3を使用

### ダウンロード・インストールするもの

- [Vagrant](https://www.vagrantup.com/)
- [VirtualBox](https://www.virtualbox.org/)
- [VCCW (v3)](http://vccw.cc/)

### VirtualBox
[こちら](https://www.virtualbox.org/wiki/Downloads)からダウンロード＆インストール。

![screenshot-www.virtualbox.org-2017-12-26-17-39-44-864.png](https://qiita-image-store.s3.amazonaws.com/0/107857/844b167b-9b89-c02b-ae56-78c519f02155.png)
*「OS X hosts」を選択する*


### Vagrant

[こちら](https://www.vagrantup.com/downloads.html)からダウンロード＆インストール。

![screenshot-www.vagrantup.com-2017-12-26-17-42-08-016.png](https://qiita-image-store.s3.amazonaws.com/0/107857/6e71cd51-d7d2-4741-01ee-8764d2267e7c.png)

### VCCW (v3)

[こちら](http://vccw.cc/)からダウンロードして解凍、または[`git clone`](https://github.com/vccw-team/vccw)して任意のディレクトリに置く。

## 準備

### VCCWのファイル構成
```bash
.
├── LICENSE
├── README.md
├── Vagrantfile
├── ansible.cfg
└── provision
    ├── default.yml
    ├── playbook.yml
    └── playbooks
        ├── commands.yml
        ├── middleware.yml
        ├── templates
        └── wordpress.yml
```

### VCCWの設定

- `/provision/`内の`default.yml`の内容を調整する
- 各項目解説は[こちら](http://qiita.com/mrymmh/items/0cb3770773b863c6de81)

## 動かす

```bash
$ vagrant up # vagrantを起動
```

- 初回は10〜20分ほど時間がかかる
- ダウンロードしたVirtualBoxを起動する必要はない

ref: [Vagrant - よく使うコマンド](https://qiita.com/mrymmh/items/f1a05cb3b7b8c8435e97)
ref: [Vagrantエラー内容別の対応](https://qiita.com/mrymmh/items/bc317720c9b6d5378fe1)

### 初回起動後のファイル構成

```
.
├── LICENSE
├── Movefile.yml              # 増えた
├── README.md
├── Vagrantfile
├── ansible.cfg
├── provision
│   ├── default.yml
│   ├── playbook.yml
│   ├── playbooks
│   └── site.yml
├── htdocs                    # 増えた
│   ├── index.php
│   ├── license.txt
│   ├── readme.html
│   ├── wp-activate.php
│   ├── wp-admin
│   ├── wp-blog-header.php
│   ├── wp-comments-post.php
│   ├── wp-config-sample.php
│   ├── wp-config.php
│   ├── wp-content
│   ├── wp-cron.php
│   ├── wp-includes
│   ├── wp-links-opml.php
│   ├── wp-load.php
│   ├── wp-login.php
│   ├── wp-mail.php
│   ├── wp-settings.php
│   ├── wp-signup.php
│   ├── wp-trackback.php
│   └── xmlrpc.php
├── wp-cli                   # 増えた
│   └── browse-command.php   # 増えた
└── wp-cli.yml               # 増えた
```

## 表示する

設定ファイルのホスト名（初期値は[vagrant.dev](http://vagrant.dev)）かIPアドレスで表示できる。

### 表示されない...

- a. ドメイン名が`〜.dev`の場合
- b. エラーログに`vagrant-hostupdater`をインストールするよう表示される場合

#### a. ドメイン名が`〜.dev`の場合

Google Chromeでは`http://〜.dev`ドメインが`https://`へリダイレクトされて表示することができないため、ドメイン名を`〜.test`に変更する。

ref: [予約済みドメイン (.example, .localhost, .test) について | blog.jxck.io](https://blog.jxck.io/entries/2017-09-27/example-local-test-domains.html)

#### b. エラーログに`vagrant-hostupdater`をインストールするよう表示される場合

`site.yml`と同階層に移動して以下のコマンドを実行、`vagrant-hostupdater`をインストールする。

```bash
$ vagrant plugin install vagrant-hostsupdater
```

## その他

### Wordpressをサブディレクトリに置く場合

「サブディレクトリに置く」＝管理画面のみ別ディレクトリで表示する
`site.yml`内の`wp_siteurl`にサブディレクトリ名を追加する。

```yaml
sync_folder: 'htdocs'
　・
　・
　・
document_root: '/var/www'
wp_siteurl: 'admin' # ここがサブディレクトリの設定
wp_home: ''
```

サブディレクトリを作成後のファイル構成は👇

```bash
.
├── LICENSE
├── Movefile.yml
├── README.md
├── Vagrantfile
├── ansible.cfg
├── provision
|   ├── cookbooks
|   ├── default.yml
|   └── site-cookbooks
└── htdocs
    ├── index.php
    └── admin
        ├── wp-config.php
        └── 等...
```

### Wordpressのデータをサーバー〜ローカル間で転送する

ref: https://qiita.com/mrymmh/items/c644934cac386d95b7df

## 参考

- [vccw+VagrantでWordPressのローカル開発環境を作りました](http://qiita.com/pugiemonn/items/043bf3a959cb8be69462)
- [【使ってみよう（・∀・）】WordPressのローカル環境 Vagrant & VCCW 【入門者必見！】](http://wp-e.org/2015/10/19/6230/)
- [WordPressのテスト環境をVCCWで構築する方法](http://hiroshi-kanao.com/blog/2015/10/vccw-wordpress/)
- [VCCW勉強会に参加しました！](http://moonglows76.tumblr.com/post/120856332698/vccw%E5%8B%89%E5%BC%B7%E4%BC%9A%E3%81%AB%E5%8F%82%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F)
- [wordpressテーマ作成をする環境をvccwで構築する手順](http://xxxx7.com/2015/02/23/100002)