WordPressで行う 継続的インテグレーションのススメ ハンズオンWordCamp Kansai 2015 堀家・北島・占部
アジェンダ
• CI とは
• プラグインの雛形を生成してみよう
• ユニットテストを書いてみよう
• プラグインを作成してみよう
• Travis CIを使ってGitHubにプッシュするたびにテストが実行されるようにしてみよう
• リポジトリにプッシュしてTravis CIで自動的にテストが実行されることを確認しよう
• WordMoveでデプロイしてみよう
CIとは
CIとは
• 継続的インテグレーション( Continuous Integration )
• 主にプログラマーのアプリケーション作成時の品質改善や納期の短縮のための習慣のこと。
• 狭義にはビルドやテスト、インスペクションなどを継続的に実行していくことを意味する。
http://ja.wikipedia.org/wiki/継続的インテグレーション
プラグインの雛形を生成してみよう
プラグインの雛形を生成してみよう
• 一から作るのは面倒なのでVCCWに同梱されているWP-CLIを使って雛形を作成してみましょう。
• まずVCCWにログインしましょう。
プラグインの雛形を生成してみよう
# vccwのディレクトリまで移動$ cd vccw
# VCCW起動$ vagrant up
# VCCWにログイン$ vagrant ssh
# WordPressのディレクトリに移動[vccw]$ cd /var/www/wordpress
プラグインの雛形を生成してみよう
# プラグインの雛形を作成[vccw]$ wp scaffold plugin sample-plugin
Success: Created /var/www/wordpress/wp-content/plugins/sample-pluginSuccess: Created test files.
# もし既存のプラグインにテストだけ追加したい場合は下記で可能です。[vccw]$ wp scaffold plugin-tests <plugin-slug>
このメッセージが表示されたら成功
プラグインの雛形を生成してみよう
• プラグインの雛形が作成されたか確認してみましょう
プラグインの雛形を生成してみよう
[vccw]$ ls -al /var/www/wordpress/wp-content/plugins/sample-plugin/
合計 20drwxr-xr-x. 1 vagrant vagrant 272 6月 9 23:17 2015 .drwxr-xr-x. 1 vagrant vagrant 850 6月 9 23:18 2015 ..-rw-r--r--. 1 vagrant vagrant 310 6月 9 23:17 2015 .travis.ymldrwxr-xr-x. 1 vagrant vagrant 102 6月 9 23:17 2015 bin-rw-r--r--. 1 vagrant vagrant 321 6月 9 23:17 2015 phpunit.xml-rw-r--r--. 1 vagrant vagrant 4334 6月 9 23:17 2015 readme.txt-rw-r--r--. 1 vagrant vagrant 226 6月 9 23:17 2015 sample-plugin.phpdrwxr-xr-x. 1 vagrant vagrant 136 6月 9 23:17 2015 tests
プラグインの雛形を生成してみよう
# vccwからログアウト[vccw]$ exit
ユニットテストを書いてみよう
ユニットテストを書いてみよう
• 今回のハンズオンでは次のような仕様のショートコードのプラグインを作成していきます。
• [greeting language="japanese"] で こんにちは と表示
• [greeting language="english"] で hello と表示
• それ以外では何も表示しない
ユニットテストを書いてみよう
• 今回はテストファーストと手法で作成していきましょう。
• テストファーストとは、モノを作成するよりも先に、まずテストから作成する、という手法のこと。
• テストを先に書くことで仕様が明確になる、テストを100%通るコードになる、などのメリットがあります。
ユニットテストを書いてみよう
• 下記にテストの雛形が生成されているので、それを編集していきましょう。
• vccw/www/wordpress/wp-content/plugins/sample-plugin/tests/test-sample.php
• ユニットテスト用のコードには、自動実行させるために必要ないくつかのルールがあります。
ユニットテストを書いてみよう
# vccw/www/wordpress/wp-content/plugins/sample-plugin/tests/test-sample.php を編集
class SampleTest extends WP_UnitTestCase {public function test_languageがjapaneseならこんにちは() {}
public function test_languageがenglishならhello() {}
}
tests/ 内に test-hoge.php というファイル名で保存
ユニットテストを書いてみよう
# vccw/www/wordpress/wp-content/plugins/sample-plugin/tests/test-sample.php を編集
class SampleTest extends WP_UnitTestCase {public function test_languageがjapaneseならこんにちは() {}
public function test_languageがenglishならhello() {}
}
Test で終わるクラス名
ユニットテストを書いてみよう
# vccw/www/wordpress/wp-content/plugins/sample-plugin/tests/test-sample.php を編集
class SampleTest extends WP_UnitTestCase {public function test_languageがjapaneseならこんにちは() {}
public function test_languageがenglishならhello() {}
} test_ で始まるメソッド名
ユニットテストを書いてみよう
• それでは実際にテストコードを書いていきましょう。
• 「[greeting language="japanese"] で こんにちは と表示」をテストするコードを追記します。
ユニットテストを書いてみよう
# vccw/www/wordpress/wp-content/plugins/sample-plugin/tests/test-sample.php を編集
class SampleTest extends WP_UnitTestCase {public function test_languageがjapaneseならこんにちは() {
// ショートコードを実行して結果を取得$greeting = do_shortcode( ‘[greeting language=“japanese”]’ );// アサーションメソッドを実行して期待した結果かどうかチェック// ここでは $greeting が こんにちは ならOK $this->assertEquals( ‘こんにちは’, $greeting );
}……
} 引数で渡した2つの値が同じならOKなアサーション
ユニットテストを書いてみよう
• 先ほどのテストコードを参考に「test_languageがenglishならhello() 」のテストも追加してみてください。
• 他にもたくさんのアサーションメソッドが用意されていますので、必要に応じて使い分けましょう。https://phpunit.de/manual/current/ja/appendixes.assertions.html
ユニットテストを書いてみよう
# vccw/www/wordpress/wp-content/plugins/sample-plugin/tests/test-sample.php を編集
class SampleTest extends WP_UnitTestCase {public function test_languageがjapaneseならこんにちは() {
$greeting = do_shortcode( ‘[greeting language=“japanese”]’ );$this->assertEquals( ‘こんにちは’, $greeting );
}
public function test_languageがenglishならhello() {$greeting = do_shortcode( ‘[greeting language=“english”]’ );$this->assertEquals( ‘hello’, $greeting );
}}
ユニットテストを書いてみよう
• テストコードが書けたらテストを実行してみましょう。
ユニットテストを書いてみよう
# VCCWにログイン$ vagrant ssh
# プラグインのディレクトリに移動[vccw]$ cd /var/www/wordpress/wp-content/plugins/sample-plugin
# テスト実行[vccw]$ phpunit
Installing...Running as single site... To run multisite, use -c tests/phpunit/multisite.xmlNot running ajax tests... To execute these, use --group ajax.PHPUnit 4.3.1 by Sebastian Bergmann.
Configuration read from /var/www/wordpress/wp-content/plugins/sample-plugin/phpunit.xml
~ 省略 ~
FAILURES! Tests: 2, Assertions: 2, Failures: 2.
プラグインのコードを書いていないので当然エラー…
ユニットテストを書いてみよう
• テストファーストの手法では、まず失敗するテストを書いて、それが成功するコードを書いていくことで品質を保証します。
• では今書いたテストが成功するコードを書いていきましょう。
• その前に…
おまけ:便利なアノテーション
• アノテーションとはメタデータを表す特別な構文のことで、テストメソッドの前にコメントを書くことで実行されます。
おまけ:便利なアノテーション
class SampleTest extends WP_UnitTestCase {
/** * @group グループ名 */public function test_languageがjapaneseならこんにちは() {
……}
}
$ phpunit —group グループ名
グループ名で絞り込んでテストすることができます。
おまけ:便利なアノテーション
class SampleTest extends WP_UnitTestCase {
/** * @test */public function languageがjapaneseならこんにちは() {
……}
}
メソッド名の test_ を省略できます。
おまけ:便利なアノテーション
class SampleTest extends WP_UnitTestCase {
/** * @runInSeparateProcess */public function test_languageがjapaneseならこんにちは() {
……}
}
テストを個別のPHPプロセスで実行できます。
おまけ:便利なアノテーション
• 複数指定できます。
• 他にも便利なアノテーションがたくさんあるので下記でご確認ください。
• https://phpunit.de/manual/current/ja/appendixes.annotations.html
プラグインを作成してみよう
プラグインを作成してみよう
# vccw/www/wordpress/wp-content/plugins/sample-plugin/sample-plugin.php を編集
add_shortcode( 'greeting', function( $atts ) {if ( empty( $atts['language'] ) ) {
return;}switch( $atts['language'] ) {
case 'japanese' :return 'こんにちは';
case 'english' :return 'hello';
}} );
プラグインを作成してみよう
• コードが書けたら再度テストを実行してみましょう。
プラグインを作成してみよう
# VCCWにログイン$ vagrant ssh
# プラグインのディレクトリに移動[vccw]$ cd /var/www/wordpress/wp-content/plugins/sample-plugin
# テスト実行[vccw]$ phpunit
Installing...Running as single site... To run multisite, use -c tests/phpunit/multisite.xmlNot running ajax tests... To execute these, use --group ajax.PHPUnit 4.3.1 by Sebastian Bergmann.
Configuration read from /var/www/wordpress/wp-content/plugins/sample-plugin/phpunit.xml
Time: 1.43 seconds, Memory: 12.00Mb
OK (2 tests, 2 assertions)
緑のメッセージならテストクリア
Travis CIを使ってGitHubにプッシュするたびにテストが実行され
るようにしてみよう
Travis CIを使ってGitHubにプッシュするたびにテストが実行されるようにしてみよう
• Travis CIはGitHub上のリポジトリと連携してCIを行うことができるサービス。
• GitHubにプッシュすると、自動的にテストが実行されます。
• プラグインディレクトリに生成された.travis.ymlを編集することで様々な環境のテストを実行できます。例えば、( PHP5.3、5.4 ) ☓ ( WordPress 4.1、4.2 )。
Travis CIを使ってGitHubにプッシュするたびにテストが実行されるようにしてみよう
• まずはGitHubにsample-pluginのリポジトリを作成しましょう。
Travis CIを使ってGitHubにプッシュするたびにテストが実行されるようにしてみよう
リポジトリを作成
Travis CIを使ってGitHubにプッシュするたびにテストが実行されるようにしてみよう
リポジトリ名を入力(例:sample-plugin)
リポジトリ名を入力したらクリック
Travis CIを使ってGitHubにプッシュするたびにテストが実行されるようにしてみよう
プッシュ先のURL。後で使うのでメモ! HTTPSでなくSSHを使います!
Travis CIを使ってGitHubにプッシュするたびにテストが実行されるようにしてみよう
• GitHub上のsample-pluginのリポジトリとTravis CIを連携させましょう。
Travis CIを使ってGitHubにプッシュするたびにテストが実行されるようにしてみよう
sample-pluginのリポジトリと連携
ここからリポジトリ一覧に移動
リポジトリにプッシュしてTravis CIで自動的にテストが実行される
ことを確認しよう
リポジトリにプッシュしてTravis CIで自動的にテストが実行されることを確認しよう
• Travis CIの登録、連携ができたらGitHubにプッシュしてテストが実行されるか確認してみましょう。
リポジトリにプッシュしてTravis CIで自動的にテストが実行されることを確認しよう
# sample-plugin のディレクトリで git init$ vagrant ssh[vccw]$ cd /var/www/wordpress/wp-content/plugins/sample-plugin[vccw]$ git init
# ファイルをステージングに追加[vccw]$ git add .
リポジトリにプッシュしてTravis CIで自動的にテストが実行されることを確認しよう# 変更をコミット[vccw]$ git commit -m "first commit”
Committer: vagrant <[email protected]>Your name and email address were configured automatically basedon your username and hostname. Please check that they are accurate.You can suppress this message by setting them explicitly:
git config --global user.name "Your Name" git config --global user.email [email protected]
If the identity used for this commit is wrong, you can fix it with:
git commit --amend --author='Your Name <[email protected]>'
6 files changed, 260 insertions(+), 0 deletions(-) create mode 100644 bin/install-wp-tests.sh create mode 100644 phpunit.xml create mode 100644 readme.txt create mode 100644 sample-plugin.php create mode 100644 tests/bootstrap.php create mode 100644 tests/test-sample.php
リポジトリにプッシュしてTravis CIで自動的にテストが実行されることを確認しよう
# リモートリポジトリを設定[vccw]$ git remote add origin [email protected]:example/sample-plugin.git
# リモートリポジトリにプッシュ[vccw]$ git push -u origin master
Warning: Permanently added the RSA host key for IP address ‘xxx.xx.xxx.xxx’ to the list of known hosts.Counting objects: 10, done.Compressing objects: 100% (9/9), done.Writing objects: 100% (10/10), 4.28 KiB, done.Total 10 (delta 0), reused 0 (delta 0)To [email protected]:example/sample-plugin.git * [new branch] master -> masterBranch master set up to track remote branch master from origin.
GitHubのリポジトリの情報に 合わせてください。
リポジトリにプッシュしてTravis CIで自動的にテストが実行されることを確認しよう
• プッシュできたらTravis CIを確認してみましょう。
リポジトリにプッシュしてTravis CIで自動的にテストが実行されることを確認しよう
テストにパスすれば緑が表示されます。
失敗した時は赤が表示されます。
WordMoveでデプロイしてみよう
WordMoveでデプロイしてみよう
• WordPressのデプロイツール
• VCCW にインストールされています。
• アップロード・ダウンロードがコマンド一発でできる。
• rsyncで自動的に更新があったファイルだけアップロード・ダウンロードするので高速。
WordMoveでデプロイしてみよう
• WordMoveの設定ファイルを編集しましょう。
• vccw/Movefile にサーバーへの接続情報などを記述します。
• YAML形式で記述します。インデントが崩れるとエラーになるので注意。
• 今回デプロイのテスト用に、デジタルキューブ様から超高速WordPressサーバーAMIMOTOの環境をご提供いただいています!
WordMoveでデプロイしてみよう
WordMoveでデプロイしてみよう
• WordMoveはSSHでサーバーと通信するため鍵の設定が必要です(一応FTPでの通信もありますが…)。
• VCCWはMacの鍵をデフォルトで共有するようになっているので、レンタルサーバーに鍵を置けばすぐに接続できるようになっています。
• 今回はAMIMOTO(AWS)にすでに鍵を設定していますので、先ほどダウンロードした鍵をVCCW内に配置して使用するように設定していきます。
WordMoveでデプロイしてみよう
# VCCWにログイン$ vagrant ssh
# /vagrantディレクトリに移動[vccw]$ cd /vagrant
# 鍵を配置[vccw]$ chmod 600 wckansai2015_rsa[vccw]$ mv wckansai2015_rsa ~/.ssh/id_rsa
# AMIMOTOに接続できるか確認[vccw]$ ssh [email protected][amimoto]$ exit
WordMoveでデプロイしてみよう
# VCCWにログイン$ vagrant ssh
# /vagrantディレクトリに移動[vccw]$ cd /vagrant
# 更新のあるファイル、データベース全てをstaging環境へアップロード[vccw]$ wordmove push -e staging —-all
▬▬ ✓ Pulling Plugins ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ remote | get_directory: /var/www/inc/www/wp-content/plugins /var/www/wordpress/wp-content/plugins .git/ .gitignore .sass-cache/ bin/ tmp/* Gemfile* Movefile wp-config.php wp-content/*.sql .DS_Store wp-content/*I, [2015-06-12T07:40:24.742386 #13394] INFO -- : rsync --progress -e 'ssh -p 22 [email protected]’ -rlpt --compress --omit-dir-times --delete --exclude .git/ --exclude .gitignore --exclude .sass-cache/ --exclude bin/ --exclude 'tmp/*' --exclude 'Gemfile*' --exclude Movefile --exclude wp-config.php --exclude 'wp-content/*.sql' --exclude .DS_Store --exclude 'wp-content/*' :/var/www/inc/www/wp-content/plugins/ /var/www/wordpress/wp-content/pluginsreceiving incremental file listsample-plugin/tests/test-sample.php
5388 100% 7.52kB/s 0:00:00 (xfer#118, to-check=297/1618)sample-plugin/tests/
5388 100% 7.52kB/s 0:00:00 (xfer#118, to-check=297/1618)sample-plugin/sample-plugin.php……
アップロードしている表示がでればOK
WordMoveでデプロイしてみよう
# 他にもいろいろあるよ
# 更新のあるプラグインだけアップロード[vccw]$ WordMove push -e staging —p
# 更新のあるテーマだけアップロード[vccw]$ WordMove push -e staging —t
# 更新のあるコアファイルだけアップロード[vccw]$ WordMove push -e staging —w
# 更新のあるファイル、データベース全てをstaging環境からダウンロード[vccw]$ WordMove pull -e staging —-all
WordMoveでデプロイしてみよう
• WordMoveを使ってVagrant内のWordPressと本番環境を同期する! | Firegoby
https://firegoby.jp/archives/5644
• ssh-agentを使ってVagrant上のゲストOSからMac側の秘密鍵を使えるようにする |
Firegobyhttps://firegoby.jp/archives/5694
• ふつうのレンタルサーバーでも、VCCWとWordmoveを使って快適にローカル環境で開発しようぜ! |Toro_Unit
http://www.torounit.com/blog/2014/12/09/1889/
• さくらのレンタルサーバーにWordPressをデプロイするのはVCCW + Wordmoveが最高に捗る | モンキーレンチ http://2inc.org/blog/2014/12/09/4512/