Edited at

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

More than 1 year has passed since last update.


VCCWとは


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


導入


前提


  • Mac / 10.12.4 Sierraで作業

  • VCCW v3を使用


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


VirtualBox

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

screenshot-www.virtualbox.org-2017-12-26-17-39-44-864.png

「OS X hosts」を選択する


Vagrant

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

screenshot-www.vagrantup.com-2017-12-26-17-42-08-016.png


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


参考