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

VCCWとは

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

導入

前提

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

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

VirtualBox

こちらからダウンロード＆インストール。

「OS X hosts」を選択する

Vagrant

こちらからダウンロード＆インストール。

VCCW (v3)

こちらからダウンロードして解凍、またはgit cloneして任意のディレクトリに置く。

準備

VCCWのファイル構成

.
├── LICENSE
├── README.md
├── Vagrantfile
├── ansible.cfg
└── provision
    ├── default.yml
    ├── playbook.yml
    └── playbooks
        ├── commands.yml
        ├── middleware.yml
        ├── templates
        └── wordpress.yml

VCCWの設定

/provision/内のdefault.ymlの内容を調整する
各項目解説はこちら

動かす

$ vagrant up # vagrantを起動

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

ref: Vagrant - よく使うコマンド
ref: Vagrantエラー内容別の対応

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

.
├── 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）かIPアドレスで表示できる。

表示されない...

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

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

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

ref: 予約済みドメイン (.example, .localhost, .test) について | blog.jxck.io

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

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

$ vagrant plugin install vagrant-hostsupdater

その他

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

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

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

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

.
├── 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でローカル開発環境をつくる