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

仮想環境で始めるWordPressローカル環境開発手順

More than 1 year has passed since last update.

はじめに

WordPressの開発環境構築ツールとしてはMAMP, XAMPが有名ですが、直接ローカルに環境を構築するよりも仮想環境に構築した方がメリットが多いのでVCCWを利用します。VCCWの語源はVagrant、Chef、CentOS、Wordpressの頭文字からきているようです。

仮想化のメリットとしては以下のような点が挙げられます。

  • 作っては壊すというサイクルを躊躇なく行える
  • 複数の開発環境を作成することができる
  • まっさらな状態から環境を構築するので、本番に近い環境を構築することができる
  • 複数の開発者と同じ環境を共有できる

VCCWは公式サイトの手順に従うことで構築できます。さらに、WP-CLIというWordPress用のCLI(コマンドベースで操作するインターフェース)を利用すればより簡潔に環境構築をすることできます。
今回は、WP-CLIとVCCWを利用してWordPress開発環境を仮想環境に構築します。なお、OSはmacOSを利用します。

仮想環境の準備

まず仮想環境を乗せるプラットフォームであるVirtualBoxをインストールします。
https://www.virtualbox.org/

次に、仮想環境を構築するVagrantをインストールします。
http://www.vagrantup.com/

WP-CLIのインストール

公式サイトの手順に従ってインストールしていきます。

Pharファイルをダウンロードします。

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

ダウンロードしたファイルの情報が以下のように表示されればOKです。

$ php wp-cli.phar --info

PHP binary: /usr/bin/php
PHP version:    5.6.30
php.ini used:
WP-CLI root dir:    phar://wp-cli.phar
WP-CLI vendor dir:  phar://wp-cli.phar/vendor
WP_CLI phar path:   /Users/nishina
WP-CLI packages dir:
WP-CLI global config:
WP-CLI project config:
WP-CLI version: 1.4.0

ファイルのパーミッションを変更し、パスの通します。

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

以下のように情報が出ればOKです。

$ wp --info

PHP binary: /usr/bin/php
PHP version:    5.6.30
php.ini used:
WP-CLI root dir:    phar://wp-cli.phar
WP-CLI vendor dir:  phar://wp-cli.phar/vendor
WP_CLI phar path:   /Users/nishina
WP-CLI packages dir:
WP-CLI global config:
WP-CLI project config:
WP-CLI version: 1.4.0

wpパッケージインストール

WP-CLIでVCCWを利用する場合はscaffold-vccwというパッケージを利用します。
このパッケージをインストールします。

$ wp package install vccw/scaffold-vccw:@stable

インストール中にメモリ不足で以下のようなエラーになることがあるかもしれないです。

Installing package vccw/scaffold-vccw (@stable)

Updating /Users/nishina/.wp-cli/packages/composer.json to require the package...
Using Composer to install the package...
---
Loading composer repositories with package information
Updating dependencies

Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 107 bytes) in phar:///usr/local/bin/wp/vendor/composer/composer/src/Composer/Repository/ComposerRepository.php on line 565

上記のようなエラーが出た場合、以下のように実行すると問題なくインストールできます。(参考 WP-CLI でメモリ不足のエラーが出る時の対処法)

$ env WP_CLI_PHP_ARGS='-d memory_limit=-1' wp package install vccw/scaffold-vccw:@stable

WordPressの仮想環境を構築する

先ほどインストールしたパッケージを利用し、VCCWのテンプレートファイルを作成します。
--lang=jaはコマンドのオプションで言語を日本語に指定しています(デフォルトは en_US)。そのほかにもオプションとして以下のようなものがあります。

  • --host: ホスト名(デフォルトは vccw.dev)
  • --ip: IPアドレス(デフォルトは 192.168.33.10)
$ wp scaffold vccw <ディレクトリ名> --lang=ja

例えばディレクトリ名にwordpress.devを指定すればコマンドを実行したディレクトリ直下にwordpress.devが作成され、以下のようなファイルぐんが作成されます。

$ cd wordpress.dev
$ tree -L 1

.
├── LICENSE
├── Movefile
├── README.md
├── Vagrantfile
├── ansible.cfg
├── provision
├── site.yml
└── wordpress

vagrant-hostsupdaterのインストール(任意)

vagrant-hostsupdaterというVagrantのプラグインインストールすることでVagrantfileでホスト名とIPを定義していた時、その情報をhostsファイルに自動で登録・削除してくれるようになります。
このプラグインを利用すればVagrantfileで記載したホスト名、IPに何も設定することなくhttp接続できるようになります。

$ vagrant plugin install vagrant-hostsupdater

Vagrantを起動する

先ほど作成されたディレクトリ(Vagrantfileが存在しているディレクトリ)で以下のコマンドを実行し、仮想環境を起動します。

$ vagrant up

以下のコマンドで起動中になっていればOKです。

$ vagrant status
Current machine states:

vccw.test                 running (virtualbox)

動作確認

以下のアドレスからWordPressの画面が見れればOKです。(scaffoldでホスト名やIPをオプションで指定した場合はそのアドレスを開いてください)

http://vccw.test/ もしくは http://192.168.33.10/

TIPS

仮想環境の環境変数を更新する場合

仮想環境のカスタマイズはsite.ymlに記述されています。例えば、利用する言語やWordPressのログインユーザー名などが記載されています。
このファイルを修正することで仮想環境の情報を変更することができます。修正した内容を反映させる場合は以下を実行します。

$ vagrant provision

vagrantで使うコマンド

  • 起動: vagrant up
  • 一時停止: vagrant suspend
  • ssh接続: vagrant ssh
    • ssh接続することで仮想環境にログインできます。
  • 停止: vagrant halt
  • プロビジョニング: vagrant provision
  • 再読み込み: vagrant reload
  • 削除: vagrant destroy

テーマの編集

  • Vagrantfileのあるディレクトリにはwordpressディレクトリが存在しています。このディレクトリはゲストOS(VCCW)の/var/www/htmlのディレクトリと同期されているので、ホストOSのwordpress/wp-content/themes/以下を編集することでVCCWのテーマを編集することができます。

参考

nishina555
Webデベロッパーです。現在は業務委託で仕事をしています。サーバーサイドがメイン。Rails/React/Redux/Node/GraphQL/AWS。大学院時代は自然言語処理の研究を行っていました。
https://nishinatoshiharu.com/
onecareer
ワンランク上のキャリアを目指す学生のための新卒採用サービスONE CAREERの開発・運営会社
https://www.onecareer.jp/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした