発売から約1ヶ月してようやくドラクエ11も落ち着いてきたムラタです。
年のせいなのか分からないですけどエンディング見ちゃったらもう完全に心折れちゃってやりこみとかまったくする気起きないですね。
さて今回はローカルでの開発環境のお話です。
会社に入ったばかりのころは特に開発環境と呼ばれるものもなく、必要ともしていなかったのですが、Wordpressを触り始めた頃からxamppを扱うようになり、それ以来ずっとxamppで作業してきました。
正直今更開発環境変えるのもしんどいし、別段今でもxampp使ってて不便だと思ったことはそんな無いんですけど、新しいものを取り入れずにずっと停滞してるのも良くないし、最近は昔に比べてwordpressを使用する案件の率が非常に多いので、もっとwordpressに特化した開発環境に変えてみようと思ったのが発端です。
そこで今回はGoogle先生で『wordpress 開発環境』とかで調べると割とヒットする「VCCW」を今更ながら使ってみようと思います。
目次
VCCWって？
「Vagrant」という仮想環境を構築・管理するツールをベースにしたWordpress開発環境構築ツールのことらしいです。
VagrantとChef（サーバー管理ツール）で仮想環境上にWordpress（PHPやMySQL、Apacheなどを含む）をまとめてインストールしてくれます。
その他にもWordpressの構築に役立つ様々な機能が含まれていて、Wordpressに関する操作をコマンドラインから実行できたり、ローカル環境と本番環境のデータ同期を簡単に実行することができます。
ちなみにVCCWとは
V…Vagrant
C…Chef
C…CentOS
W…Wordpress
の頭文字を取ったものらしいです。
VCCWを使用するには「Vagrant」の他に「VirtualBox」と呼ばれる仮想化ソフトウェアもインストールする必要があります。
VirtualBoxを使うことで例えば現在使用しているOS（例えばWindows）の中でゲストOSとして別のOS（例えばLinux）を実行することができるわけですね。
VCCWを使う前に
VirtualBoxのインストール
それではまずVirtualBoxからインストールしましょう。
まず下記URLから自分のOSにあったインストーラーをDLします。
【2017/11/6 追記】
※2017年11月現在、この後インストールする「Vagrant（ver1.9.7）」が現時点での最新Ver（5.2）に対応していないためVerは必ず5.1.xとします。
DLが完了したら展開し画面に従いインストールします。特に難しいところは無いはずです。
Vagrantのインストール
次にVagrantをインストールします。
こちらも同じく下記URLより適したものを選択してDLし、画面に従いインストールします。
インストールが完了したらコマンドプロンプトを立ち上げ「vagrant -v」と打ち込み、バージョンが表示されたら正常にインストールがされています。
vagrant -v
プラグイン「vagrant-hostsupdater」のインストール
次に「vagrant-hostsupdater」というプラグインをインストールします。
これはvagrant起動時に自動でhostsファイルを設置し、切断時には同じくhostsから設定を削除してくれるものらしいです。
要するに事あるごとにhostsファイルを自身で触る必要がなくなるってことですね。
引き続きコマンドプロンプトから「vagrant plugin install vagrant-hostsupdater」とコマンドしインストールします。
vagrant plugin install vagrant-hostsupdater
現在インストールされているvagrantのプラグインを確認するには「vagrant plugin list」をコマンドします。
vagrant plugin list
これで現在インストール済のプラグインの名前がリスト表示されます。
![]()
Boxのインストール
これに関しては詳しく説明しているサイトが見つけられなかったので自分も全然理解していないのですが、仮想マシンを作成する際に必要なもので仮想マシンのテンプレートみたいなものらしいです。次回から省略可？
インストールするには「vagrant box add [box-name] [box-url]」とするそうですが。自分は参考サイトに従って下記のように指定しました。（名前だけでもいいんでしょうか）
vagrant box add miya0001/vccw
これでインストールが始まるのですが、これが結構長いので注意です。自分は10分以上はかかりました。
ちなみに最初この処理をしていませんでしたが別に普通に動いていたので指定がないならないで良いのかも・・・（自動的にcentosがインストールされる？）
VCCWのダウンロード
いよいよVCCWをダウンロードしてくるわけですが。
方法としてgitでcloneしてくる方法とサイトからzipアーカイブをDLしてくる2つの方法があります。
参考にしたサイトのほとんどでgitによるcloneする方法を書いているのですが、VCCW開発者のブログ記事にはzipによるDLを強く推奨されているので自分はそちらの方法にしました。推奨理由については下記参照。
windowsだとcloneすると改行コードがよろしくないことになるのが多いようです。
サイトからzipアーカイブをDLする場合はこちら
DLできたら解凍して展開したファイルを任意のプロジェクトフォルダにコピペします。
今回は仮に「D:\works\htdocs\project」とします。
![]()
コピペしたら「provision」というディレクトリがあると思うのでその中の「default.yml」ファイルを一つ上の階層にコピペし、名前を「site.yml」に変更します。
![]()
このsite.ymlには様々設定が記述されており、ホスト名やIPアドレス、Wordpressのインストール時のサイト名に言語設定、管理者権限、初期テーマ、PHPの設定など多岐にわたります。
とりあえず変更しておく必要がありそうなのは「hostname」と「ip」、あとは「lang」でしょうか。
ちなみに後からでも変更可能です。
今回はhostnameを「project.dev」
IPを「192.168.33.10」としました。
この二つがブラウザでアクセスする際に必要な情報になります。
#
# Network Settings
#
hostname: project.dev #任意の名前を付けてください
ip: 192.168.33.10 #既に使用しているipと被らないようにしてください
#
# WordPress Settings
#
lang: ja #「ja」としてください
site.ymlの編集が済んだらコマンドプロンプトを立ち上げ、上記プロジェクトの場所まで移動します。
cd /d D:\works\htdocs\project
もしくは該当ディレクトリをshiftキーを押しながら右クリックで「コマンドウインドウをここで開く」というメニューがでるので、それでも該当の箇所に簡単に移動できます。
![]()
移動できたらvagrantコマンドの起動を意味する「vagrant up」とコマンドし、起動させます。
vagrant up
こちらも初回は色々インストールするため結構な時間がかかるので気長に待ちましょう。
2回目以降の起動はそこまで遅くはないので安心してください。
「vagrant up」以外のvagrantコマンドは色々ありますがよく使うのは
- vagrant reload…再起動
- vagrant status…状態の確認（起動中か停止中か）
- vagrant halt…停止させる
- vagrant up…起動させる
- vagrant init…初期化する
- vagrant destroy…現在のインスタンスを削除する
これらでしょうか。「halt」と「up」くらいは覚えておきましょう。
ちなみにこの起動に関して環境によって色々なパターンでうまくいかないことが多いようです。自分の場合はプラグインのhosts-updaterによるhostsへの書き込みの段階でパーミッションエラーとなっていました。
![]()
なのでこの場合、コマンドプロンプトを管理者権限で実行することで解決しました。（プラグインを使わずに手動でhostsにホスト名とIPを書き込んでも可）
![]()
こんな感じで起動中はhostsに書き込まれて、停止すると削除されます。
初回の起動が完了したら「wordpress」というフォルダが生成され、その中にWordpress関連のファイルがインストールされています。
この「wordpress」ディレクトリが構築した仮想環境のドキュメントルート「/var/www/html」と同期してるそうです。
同期させるフォルダの名前もsite.ymlに指定があるので別のが良い人はそこで変えれます。自分は「htdocs」としました。
![]()
仮想完了に構築されたWPを確認する
これで仮想環境でWPが確認できるはずなので早速先ほどのsite.ymlで設定したホスト名かIPアドレスでアクセスしてみましょう。
今回だと「http://project.dev」か「http://192.168.33.10」になります。
![]()
はい、無事に表示されました。
管理画面はsite.ymlで変更していなければユーザー・パスともに「admin」でログインできるはずです。入れなければsite.ymlを開いて確認しましょう。
これでとりあずVCCWでWordpressを表示するというスタートは切れましたね。
※Microsoft Edgeの場合、そのままでは仮想環境上のサイトにはアクセスできないようで、「このページは表示できません」と表示されます。
自分はもう諦めましたが、解決されたい場合は下記のURLが参考になるかと思います。
phpMyAdminを仮想環境にインストールする
これは別に必須ではないですが、自分はちょっとDBの中を触りたいときでもphpMyAdminのようなGUIがないと触りきらない人間なので入れてます。
デフォルトでは入っていないのでまずphpMyAdminのサイトからzipでダウンロードしてきます。
サイトの右上にある緑のボタンからzipをダウンロードし解凍します。（ファイル数が多く割と時間がかかります）
解凍できたらフォルダ名を「phpmyadmin」と変更して、site.ymlでsynced_folderに指定しているフォルダー内に移動します。今回なら「htdocs」になります。
![]()
次にコマンドプロンプトで該当のディレクトリまで移動したら、「vagrant up」で起動させます。既に起動済なら不要です。
起動したら「vagrant ssh」で現在の仮想環境にSSHでログインします。
ログインしたらブラウザを開いて、site.ymlで設定したホスト名もしくはIPアドレスの後に「phpmyadmin」としphpmyadminにアクセスします。
今回なら「http://project.dev/phpmyadmin/」か「http://192.168.33.10/phpmyadmin/」になります。
![]()
無事ログイン画面が開きました。
ユーザー名とパスワードは初期設定では両方とも「wordpress」になっているはずです。
分からなければsite.ymlのデータベースの部分を確認しましょう。
これでphpmyadminのインストールは完了です。
wordmoveを使って本番環境と同期させる
vccwにはwordmoveと呼ばれる本番環境とローカル環境のデータを同期させるツールがあり、テーマファイルやプラグインだけでなくDBの同期もコマンドひとつで行ってくれます。
ただDBに関してはそのまま同期しちゃうとローカルと本番でパスが異なるので同期する前にその辺の調整が必要みたいですね。
パスの書き換えはwordmoveが自動で書き換えてくれるみたいな記事をよく見るのでそうなのだとばかり思ってたのですが・・・このへんはもう少し調べる必要がありそうです。
rubyのインストール
wordmoveはruby製なのでPCにrubyがインストールされていないと動かすことができません。
MacにはデフォルトでインストールされているようですがWindowsには入っていないのでインストールしましょう。
コマンドプロンプトを管理者権限で起動させ、まずrubyがインストールされていないか確認します。「ruby -v」とコマンドします。
ruby -v
既にインストール済ならバージョン情報が表示されるはずです。
エラーが表示された場合は次に進みます。
rubyのサイトより必要なVerのインストーラーをダウンロードします。
今回は「Ruby2.4.1-2(x64)」としました。
![]()
ダウンロードが完了したらインストーラーを実行するだけです。
終わったらもう一度「ruby -v」でバージョンが表示されるか確認しておきます。
Movefileの設定
rubyのインストールが完了したら「vagrant up」したディレクトリ内に「Movefile」というファイルがあると思いますので、それをエディターで開きます。
![]()
このMovefileには本番環境と同期させるために必要なデータベース情報やsshの設定などを行なえます。
まず最初に「local（テスト環境）」の設定を行ないます。
local:
vhost: "http://project.dev"
wordpress_path: "/var/www/html" # use an absolute path here
database:
name: "wordpress"
user: "wordpress"
password: "wordpress"
host: "localhost"
charset: "utf8"
# paths: # you can customize wordpress internal paths
# wp_content: "wp-content"
# uploads: "wp-content/uploads"
# plugins: "wp-content/plugins"
# mu_plugins: "wp-content/mu-plugins"
# themes: "wp-content/themes"
# languages: "wp-content/languages"「vhost」はsite.ymlで設定したhostnameを入れておきます。
今回なら「project.dev」ですね。
「wordpress_path」は仮想環境のwordpressがインストールされている場所のフルパスを記述します。特に変更してなければそのままで大丈夫です。
「database」に関してもwordpressに使用したデータベース情報を変更していなければデフォルトのままで大丈夫です。
※DBの同期も行いたい場合は「site.yml」の「db_prefix」だけは本番と合わせておかないと同期されないので注意。ただし、前述の通りsite_urlなどのパスも上書きされてしまうので使用する場合はその辺の考慮が必要です。
デフォルトではコメントアウトされていますが、他にもwp-contentやuploadsなど特定のディレクトリの場所や名前を変えている場合、その場所を定義する設定などもあります。
次にproduction（本番環境）の設定をしていきます。
production:
vhost: "http://xxxxx.jp/"
wordpress_path: "/home/users/xxxxxxxxxxxx" # use an absolute path here
database:
name: "database-name"
user: "database-user"
password: "database-pass"
host: "xxxxxxx"
port: "3308" # Use just in case you have exotic server config
mysqldump_options: "--max_allowed_packet=50MB" # Only available if using SSH
exclude:
- ".git/"
- ".gitignore"
- ".sass-cache/"
- "bin/"
- "phpmyadmin/"
- "tmp/*"
- "Gemfile*"
- "Movefile"
- "wp-config.php"
- "wp-content/*.sql"
ssh:
host: "xxxxx.jp"
user: "xxxxxxx"
password: "xxxxxxxxxxxx"
port: 2222
rsync_options: --verbose「vhost」は本番のURLを入力して、「wordpres_path」にはローカルと同じくwordpressまでのフルパスを入力します。
「database」にも本番環境で使用しているデータベースの情報を入力します。
「exclude」には同期させないファイルやディレクトリを指定します。
前述のphpmyadminなど本番にアップする必要がないものは漏れがないようしっかり指定しておきましょう。
最後に「ssh」の設定を行ないます。
使用しているレンタルサーバーによってはsshが使用できない場合もあるので注意です。
sshが使用できない、もしくはsshは使用できるが同期をする「rsync」が動かない場合はFTPによる同期もできるそうですが、今後FTPによる同期は廃止される予定だそうです。
FTPの場合は「ssh」の部分を下記のように書き換える必要があります。
ftp:
host: "xxxx"
user: "xxxx"
password: "xxxxxxxx"
passive: trueこれでwordmoveを使う準備が整いました。
早速使ってみましょう。
wordmoveを使用するにはまず現在のインスタンスにsshでログインする必要があります。
コマンドプロンプトでいつも通り該当ディレクトリまで移動したのち、下記のコマンドで仮想環境にsshでログインします。
vagrant ssh
ログインが成功したら
vagrant@xxxx:~$
という表記になっているはずです。
ログインした時は仮想環境の「/home/vagrant」にいるのですが、ここからMovefileがあるディレクトリまで移動する必要があります。
Movefileがあるディレクトリは「/vagrant」になりますので
cd /vagrant
とすると今度は表示が
vagrant@xxxx:/vagrant$
こうなります。
ここでようやくwordmoveは使えるわけです。
wordmoveは基本的にローカル環境から本番環境へ同期（push）か逆の本番からローカルへの同期（pull）になります。
pullとpushを間違えると場合によってはえらいことになるので気を付けましょう。
また同期といっても必ず全部同期させるというわけではなく、オプションを指定することで何を同期させるかの指定も可能です。
- wordmove pull(push) -all … 全て同期
- wordmove pull(push) -w … Wordpressソースファイルのみ
- wordmove pull(push) -t … テーマファイルのみ（themeディレクトリ）
- wordmove pull(push) -d … データベースのみ
- wordmove pull(push) -p … プラグインのみ
- wordmove pull(push) -u … uploads内全て
例えば下記のコマンドだとローカル環境のテーマとデータベース、プラグインを本番環境に同期させることになります。
wordmove push -t -d -p
これで毎回FTPでディレクトリ移動したりファイルを探したりする手間がなくなり、コマンド一発でアップすることができます。
当然そのぶん以前以上に慎重に行わないといけませんし、gitによるバージョン管理も必須と考えていいでしょう。
本当ならいきなりローカルから本番環境ではなくて、その前にステージング環境を用意してそこで確認が取れたら本番という流れが良いんでしょうね。
実際にwordmoveで同期させてみる
ここからは実際にlolipopサーバーを例にwordmoveを動かしてみようと思います。
本番環境は以下の通りです。
WordPressは構築済でルートディレクトリに設定しています。
| 使用サーバー |
ロリポップ（スタンダードプラン） |
| サイトアドレス |
http://ossan.chicappa.jp/ |
| SSH |
可 |
Movefileの編集
まずMovefileの設定から始めますが、localの設定については先ほどと一緒なので割愛して「production」の設定を見ていきましょう。
「vhost」はサイトアドレスの「http://ossan.chicappa.jp/」とします
「wordpress_path」はフルパスが必要になります。ロリポップでは「アカウント情報」の「フルパス」から確認することができます。
![]()
「database」は「サーバーの管理・設定」の「データベース」から確認できます。
パスワードに関しては「操作する」ボタンを選択した先で確認しましょう。
![]()
「database」の設定の中に「port」がありますが、lolipopでは使わないので頭に「#」をつけてコメントアウトするか消してしまいましょう。
自分はこのせいでdbの同期だけずっとひっかかってました。（そもそも注釈に限定的な使用っぽいことは書いてあるんですけどね・・・）
![]()
これでdatabaseはOKです、次に「exclude」は今回はそのままで大丈夫なので肝心の「ssh」の設定に移ります。
まずlolipopではデフォルトではsshは無効の設定になっているので有効にします。
「サーバーの管理・設定」の「SSH」を選択します。
「SSHは設定されていません」という表記になっていると思うのでその下の「SSHを有効にする」ボタンを選択します。
これでSSHが有効になり、サーバーやパスワードなどの情報が表示されます。
![]()
以上でMovefileに必要な情報が全て揃いました。
ローカル環境のテーマファイルを本番環境にpushする
では最初にローカル環境で編集したテーマファイルを本番環境にpushしてみます。
編集した箇所は「sidebar.php」の下記部分になります。
![]()
コマンドプロンプトで「project」まで移動します。
cd /d D:\works\htdocs\project
そしてVagrantを起動。
vagrant up
起動したらSSHでログインします。
vagrant ssh
ログインしたら仮想環境内のMovefileがある場所まで移動。
cd /vagrant
wordmoveコマンドで本番環境へpushします。今回はテーマだけpushできればいいので「-t（theme）」とします。
wordmove push -t
ちゃんとSSHの設定が通っていれば、下記のような記述が出て本番環境へテーマがpushされるはずです。
![]()
本番環境のテーマを覗いて無事反映されているか確認します。
![]()
はい、ちゃんと本番環境のテーマにローカルのテーマが反映されていますね。
以上で本番環境へのpushは完了です。
最後に
xamppからvccwへ変更してみたものの、実はまだ本格的に案件で使用していないので、本当に使いやすいか、便利なのかは全然分からない状況です。
今はまだ使い慣れたxamppの方が手っ取り早いなという印象なのですが、使いこなせるようになったらかなり作業効率も上がるんじゃないかなと期待しています。
まだPHPのバージョンの変更方法やWordmoveでDBのパスが上書きされる件など、調べる必要があることが沢山あるので、面倒くさくてもなるべくVCCWを使うようにしてその辺も解決していきたいですね。
それではまた次回。
ちなみにここに記述してある「strokeWidth」で線の幅を、「strokeColor」で線の色を変更することができます。
