WordPress開発環境のまとめ~vccw,xdebug,Eclipseのハマり所と対策

 WordPressはブログ作成に広く使われているが、テーマをカスタマイズして使っているケースがほとんどだと思う。カスタマイズはWordPressの中からできるが、動作が遅くて効率が悪い。ここを改善するためには、専用の開発環境が必要になる。

 WordPressの開発環境についてネット探すと色々紹介記事が出てくる。しかしそこに書いてある手順通りにやっても、うまく入らないことが多く、簡単に比較ができない。ブログをメインに書く人にとって、開発環境の構築はハードルが高い作業に違いない。

 そこで今回は、WordPress開発環境を比較した結果から、アマチュアブロガーにおすすめできる開発環境をご紹介する。それと、その開発環境を実際に入れてみて大ハマリした経験をもとに、ハマりどころとその対策についてご紹介する。

 

WordPress開発環境にはどんなものがあるか

Vagrant+vccw 設定のハマりどころ

Vagrantとvccwのバージョンに注意
vagrant upでエラー(ゴミ掃除の手順)
サイトが表示されない
サイトを表示させるとPHPのエラー画面が出る
wordmoveが失敗する
プロキシが通らない

xdebugのハマりどころ

NetBeansが接続を待っています・・・

Eclipse(neon3)の設定

Vagrant+vccw の使いこなし

起動時の入力省力化
wordmove実行時のパスワード入力省力化
複数の仮想マシンを作る

 

<参考購入先>
WordPress開発 参考書 ネットの情報もいいですが本も情報が充実しています
PHP参考書 まるで呪文のようなPHPの理解に役立ちます

 

スポンサーリンク

WordPress開発環境にはどんなものがあるか

 WordPress で本格的なブログを作るには、ローカル(例えばあなたのPC)にサイトを構成するファイル一式を置き、カスタマイズとテストを繰り返したのち、本番環境にデプロイ(展開)するやり方をすることが多いと思う。これを実現するための開発環境についてまとめたのが次の表だ。

 

表1 WordPress開発環境の比較(Windowsベース)
(内容を保証するものではありません。間違いがあればご指摘いただけると嬉しいです)

構成 IDE or エディタ 同期  コスト

 環境構築
の難度

ライト
カスタム

本格カスタム

備考
VirtualBox
+Vagrant
+vccw
+WordMove

NetBeans
Eclipse
Bracketsなど

サイト+DB
完全同期

無料  △  
XAMPP NetBeans
Eclipse
Bracketsなど
サイトのみ? 無料  ×  
MAMP NetBeans
Eclipse
Bracketsなど
サイト+DB
DB同期不完全
無料  
WebMatrix オールインワン(内臓) サイト+DB
完全同期
無料 同期するにはサーバー側がWebMatrixに対応している必要がある
PhpStorm オールインワン(内臓) サイト+DB
完全同期
有料
○   

Hvper-V
+Docker

Eclipse 無料 × × 使いやすいコンテナがあれば良いのですが

 

 「ライトカスタム」は関数やスタイルシートをちょっといじるだけ、「本格カスタム」は独自の関数やスタイルをゴリゴリ追加して作り込むことを意味する。この表では本格カスタムに適した◎の環境が2つある。思うに、

アマチュアブロガーは VirtualBox+Vagrant+vccw+WordMove

お金を払える人は PhpStorm

を選ぶのがよさそうだ。

 本格カスタムではこのほかに Eclipse や NetBeans などのIDE(エディタ+デバッガ)が必要になる。なお、CSSのスタイルカスタマイズには Brackets (エディタ)が便利なので使い分けたい。
 ちなみに当サイトは Twenty Twelve のカスタマイズ(子テーマ)で構成されている。開発には WebMatrix を利用したがデバッグ機能が弱く苦労した。

 

※:VirtualBox=仮想マシン管理ソフト、Vagrant=仮想マシンを作るソフト、vccw=Wordpressの開発に必要なソフトをまとめたソフトウェアパッケージ、WordMove=本番環境とローカルとの同期をとる為のソフト

 

 


Vagrant+vccw 設定のハマりどころ

  VirtualBox+Vagrant+vccw+WordMove の環境構築に関しては、わかりやすい手順がネットにある[1]。基本的にこの記事を参考にすればよいが、書いてある通りにやってもうまくいかず、ハマる場合が多い。そのハマりどころや失敗した場合のリカバリーについてご紹介する。

 

Vagrantとvccwのバージョンに注意

 本記事は次のバージョンを前提としている。

WIndows10Pro 1607、VirtualBox 5.1.22、Vagrant 1.9.3、vccw 2.21、NetBeans 8.2、Eclipse neon3

 多くのソフトを組み合わせた構成は微妙なバランスの上に成立している。VirtualBox 、Vagrant,、vccwについては、安易に新しいバージョンに入れ替えない方がよい

 最新版を入れてみて動かない場合は古いバージョンにダウングレードする。VirtualBox 、Vagrant、 vccwの古いバージョンは下記から入手できる。

VirtualBox  All branches でバージョンをクリックしたのち、上の行のreleasesリンクを開く。
Vagrant 拡張子msiとなっているものをダウンロードする。
vccw 左上にあるBranchボタンを押して tags タブをクリックする。

Vagrant 1.9.4は不具合がある。修正パッチが出ているが、1.9.5が出るまで使わないのが無難だ。

 

 

vagrant upでエラー(ゴミ掃除の手順)

 vagrant upが失敗したり、いきなりPCの電源を切るなどした場合は、ゴミが残って動作が不調になることがある。そんな場合のゴミ掃除の手順は次の通り。

(1)vagrant halt を実行してターミナルを抜ける。
(2)タスクマネージャーを起動し VirtualBox や Vbox 関係のプロセスを終了(残っていれば)。
(3)C:\Users\ユーザー名の下にある VirtualBox VMs の中身を削除(新たに追加されたものだけ)。
(4)vccwフォルダ下の .vagrant フォルダ を削除。

 

 ちなみに、仮想マシンからの正常な終了手順は次の通り。haltを忘れてPCの電源を切らないよう注意

 exit (仮想マシンを抜ける) → halt(仮想マシン終了) → exit (ターミナル終了)

 

 また、しばらく使っていないと SSH auth method: private key で止まってしまう場合があるようだ。この場合、いったんターミナルを強制的に閉じてVirtualBoxマネージャーを起動した状態で実行すると回復できるようだ(再現性を検証中)。

 

 まずはvagrant upをやってこの画面を見ることが目標。ここまでできて道半ばだ。

 

 試行錯誤が済んだら VM VirtualBOXを開いてゴミ掃除する。ここのゴミは実行に実害はないので最後でよい。

 

 

 

サイトが表示されない

 まったく表示されない場合はhostsの登録を忘れている。

C:\Windows\System32\drivers\etc\hosts

を開いて最後に

192.168.33.10 vccw.dev

を追加する。編集は管理者権限が必要だがいったんコピーして編集したものをエクスプローラなどで上書きする形にすると簡単。

 プロキシ下では、

  インターネットのプロパティ – 接続 – ローカルエリアネットワーク(LAN)の設定

 を開き、プロキシを使用しないローカルアドレスに

  192.168.33.10;vccw.dev

 を追記する。

 

 

サイトを表示させるとPHPのエラー画面が出る

 Wordpressにインストールされているプラグインのエラー。原因はPHPのバージョンが整合していない。基本的にホスト、開発環境、デバッガの3つで、同じバージョンを使うのが無難だ。

 vccw3.2はPHP7にしか対応していないので、PHP7で使えないプラグインをインストールしていると下のようなエラーが現れる。

vccw3.2にはPHPのスイッチ機能が未実装。この画面を見たら素直にvccw2を使おう。

 

 

 左の Deprecated: Assigning the return value of new by reference is deprecated in・・はワーニング。

 プラグインのデバッグが必要ないなら、wp-config.phpでWP_DEBUGを false にすると見えなくなる。

 

 仮想マシンを作るとき、以下の編集をしておくとこの設定を最初から falseにできる。

(1)vccwフォルダの下にあるprovisionフォルダからdefault.ymlを一つ階層上にコピー
(2)default.yml を site.yml にリネーム
(3)site.yml を開いて wp_debug のところをfalse に書き換える。

(site.ymlの例)

#
# The values of wp-config.php
#
force_ssl_admin: false
wp_debug: false
savequeries: false

 

 開発環境のPHPのバージョンは次の方法で変更できる(vccw3.2では変更できない)。

(1)site.yml を作る(上記参照)
(2)site.yml を開いて php_version のところにバージョン番号を書く
定義できるバージョン番号はこちらに一覧がある。

(site.ymlの例)

#
# phpenv
#
php_version: 5.6.30

(4)vagrant provision を実行する。途中で固まってしまう場合は一度仮想マシンを削除(上記のゴミ掃除の手順を参照)して作り直す。

 

wordmoveが失敗する

 鍵の作成とsshエージェントへの登録ができていない。sshエージェントはデーターベースに対するwordmoveで必要になる。手順は次の通り。

(1)鍵を作成する

$ vagrant ssh で仮想サーバーに入る
$ ssh-keygen -t rsa 鍵のパスワードを入力
アクセス権限変更
$ chmod 600 ~/.ssh/id_rsa.pub
公開鍵をホストのサーバーに転送
$ scp ~/.ssh/id_rsa.pub ***@xxxx.ne.jp:~/.ssh/authorized_keys
ホストサーバのパスワードが求められるので入力。

(***@xxxx の部分はホストのユーザーネーム@ホストネーム)

(2)鍵をsshエージェントに登録する(仮想サーバーにログインする度に実行が必要)

$ ssh-agent bash
$ ssh-add 鍵のパスワードを入力
$ cd /vagrant

 

プロキシが通らない

  Vagrant のプロキシは以下で通る[2]。最初にターミナルで以下を実行する。

$ export http_proxy="http://xxx.***.***.***:8080"
$ export https_proxy="http://xxx.***.***.***:8080"
$ vagrant plugin install vagrant-proxyconf

カレントディレクトリのVagrantfile を開いて
Vagrant.configure(2) do |config| のすぐ下に以下を追加する。

if Vagrant.has_plugin?("vagrant-proxyconf")
 config.proxy.http = "http://xxx.***.***.***:8080/"
 config.proxy.https = "http://xxx.***.***.***:8080/"
 config.proxy.no_proxy = "localhost,xxx.0.0.0/8"
end

(xxx.***.***.*** の部分はプロキシのアドレス)

 企業のPCは大抵プロキシ下にある。プロキシ下ではネットの手順を参考にしてうまく行かないのはもちろん、試行錯誤に時間ばかりかかって一向に成果が上がない状況に陥りやすい。ここはオールインワンの有料ソフト(PhpStormなど)を使うことを検討してほしい。

 

スポンサーリンク

xdebugのハマりどころ

 

~NetBeansが接続を待っています・・・

 xdebug.ini の設定と整合がとれていないか、xdebugで使うポートがファイヤーウォールでブロックされている
 vccwをインストールしてもxdebugで使うポートを開放してくれないので自分で定義する必要がある。

Windows10ではxdebugで使うポート(デフォルトでは9000)の通信を許可する受信の規則(TCP)をファイヤーウォールに追加する。

 

netbeansの設定画面NetBeansの設定は文献3がわかりやすい。左は例。

 

ちなみに仮想マシン側の xdebug.ini は、多くの場合下記でよい。

$ sudo vi /etc/php.d/xdebug.ini

( i キーを押して編集モードに入り、以下を後ろにコピペで追記、ESCキーを押して編集モードを抜け、 :wq とタイプしてViを終了する)

xdebug.remote_enable= on
xdebug.remote_autostart = on
xdebug.remote_connect_back=On
xdebug.remote_host=192.168.33.1
xdebug.remote_port=9000
xdebug.idekey="netbeans-xdebug"

$ sudo service httpd restart

 NetBeansのPHPデバッグの設定を変更したら、一度NetBeansを終了させて再起動させないと反映されないので注意。

 


Eclipse(neon3)の設定

 ネットにあまり充実した情報がない。ちょっとややこしいが、次のようにすればできる。

(1)プロジェクトを追加する

File – New – PHP Project 
Project name = wordpress-test(任意)
Create project at existing workspace = C:\vccw\www (wordpressより一つ上の階層を指定)
PHP Version (使っているものを設定)

(2)デバッグの構成を設定

Run – Debug Configurations…

–Debug Configurationsダイアログが開く–

PHP Web Application を選択状態にして Newボタン(左上のアイコン)を押す
Name =vagrant-debug (適当に)
PHP Server の欄で [New]

–PHP Server ダイアログが開く–

Server Name =vagrant (適当に)
Base URL = http://vccw.dev
Document Root: (空欄)
[next >]
Debugger = XDebug (セレクト)
Connection Setting = 9000
[next >]
Path Mapping  [Add]
Path on Server = /var/www/wordpress (vccw3では /var/www/html)
Path in File System = C:\vccw\www\wordpress (vccwのフォルダを指定。vccw3では C:\vccw\wordpress)

–Debug Configurationsダイアログに戻る–

PHP Server = vagrant (先ほど設定した名前になっていることを確認)
File = /wordpress-test/wordpress/index.php  (Browse…を押し、ツリーを展開し、セレクト)
URL Auto Generateのチェックを外して右の欄を /index.php とする
Debuggerタブを開いてBreak at First Lineのチェックを外す。(付けているとデバッグ起動のたびに最初の1行目で止まる)

(3)プロジェクトのプロパティを設定

wordpress-testを右クリック してProperties(一番下)を実行

Resource のText file encoding を Other にしてUTF-8としておく。
ツリーからPHP – Debug を展開。
Enable project specific settings にチェック
PHP Server = vagrant

 

仮想マシン側のxdebug.iniには下記があればよい。

xdebug.remote_enable= on
xdebug.remote_autostart = on
xdebug.remote_connect_back = on
xdebug.remote_port=9000

 

 EclipseはNetBeansより高機能だが英語。両方試してみて使いやすい方を選んで欲しい。

 ちなみに、Eclipseをインストールする場合は先に  Java SE Development Kit[5] を入れる必要がある。

 

 

スポンサーリンク

Vagrant+vccw の使いこなし

 

起動時の入力省力化

 vagrant up や vagrant halt の入力はターミナルに次の記述をしておくことで省略できる(以下はgitbashの場合)。ターミナルを開くと常に実行されるので注意。

$ vi ~/.bash_profile

echo "vagrant up..."
vagrant up
vagrant ssh

$ sh -c “echo vagrant halt >> ~/.bash_logout”

 

 上記の最後はターミナルをexitするとき vagrant halt を自動実行する。
 ターミナルの起動もショートカットにしておいて作業フォルダーにvccwのディレクトリを書いておくと便利だ。

 

 

wordmove実行時のパスワード入力省力化

 仮想マシンの ~/.bash_profile に次のコードをを書いておくと、毎回聞かれるパスワード入力をしなくて済む。

$ vagrant ssh
$ sudo yum install -y expect でexpectをインストール
( vccw3では sudo apt-get update としたのち、sudo apt-get install -y expect とする )

$ vi ~/.bash_profile で最後に以下のコードを追加[4]

eval `ssh-agent`

KEY_FILENAME='id_rsa'
 PASSPHRASE='****'

expect -c "
 set timeout -1
 spawn ssh-add $HOME/.ssh/$KEY_FILENAME
 expect {
 \"Enter passphrase for\" {
 send \"$PASSPHRASE\r\"
 }
 }
 expect {
 \"denied\" { exit 1 }
 eof { exit 0 }
 }
 "

cd /vagrant

****の部分は鍵を作った時に入れた鍵のパスワード。

 いったんexitで抜けて vagrant ssh として入り直し
Identity added: /home/vagrant/.ssh/id_rsa (/home/vagrant/.ssh/id_rsa)
とかいうメッセージが見えたら成功。

 なお、~/.bash_logoutに ssh-agent -k は記述しないこと(次回から vagrant up が正常に機能しなくなります)。

 

 

複数の仮想マシンを作る

 次の方法で作れる。大きな修正を加えるときのテストに便利だ。

(1)ダウンロードしたvccwのフォルダ一式を追加コピー(例:vccw2などとする)
(2)provisionフォルダからdefault.ymlを一つ階層上にコピー
(3)default.yml を site.ymlにリネーム
(4)site.yml を開いて hostname と ip のところを他の仮想マシンと重複しない値に編集
(例)
hostname: vccw2.dev
ip: 192.168.33.12

(5)Windowsのhostsに編集した値を追記する(上記参照)

 

 vagrant up vagrand halt は、それを実行したディレクトリ下の仮想マシンについてのみ機能し、全体に影響を及ぼさない。

 sshの鍵はそれぞれの仮想マシンの下で個別に重複しない名前の鍵を作成するか、どこかで1個作成し、他の仮想マシンにコピーして使い回しする。キーのコピーは共有フォルダ /var/www/wordpress (vccw3では /var/www/html )を介して行える。

 

(同じ鍵を使いまわしする例)

いまある秘密鍵をローカルの共有フォルダにコピー

$ cp ~/.ssh/id_rsa /var/www/wordpress/id_rsa (vccw3では /var/www/html )

エクスプローラーなどを使ってwordpressフォルダ下にできた id_rsa を別の環境の同じフォルダにコピー。
コピー先の仮想マシンに入って次を実行。

$ mv  /var/www/wordpress/id_rsa ~/.ssh/id_rsa (vccw3では /var/www/html )
$ chmod 600 ~/.ssh/id_rsa (これをしておかないとエラーが出る)

 


 

<参考購入先>
WordPress開発 参考書
WordPress 初心者向けの本

<参考文献 >
本記事の執筆には以下の記事がたいへん参考になりました。
1.XAMPPはもう古い?!VCCWでWordPressローカル開発環境を構築する方法
2.vagrant-proxyconf で行う ゲストOSへのかんたんProxy設定
3.Vagrant vccw で NetBeans からリモートデバッグをやってみる
4.ssh-agent と expect で ssh のパスフレーズ入力を自動化
5. 
Java SE Development Kit