Help us understand the problem. What is going on with this article?

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

参考

mrymmh
フロントエンド見習いの覚書
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away