WordCamp Kansai 2015 CI ハンズオン

WordPressで行う継続的インテグレーションのススメハンズオンWordCamp Kansai 2015 堀家・北島・占部

アジェンダ

• CI とは

• プラグインの雛形を生成してみよう

• ユニットテストを書いてみよう

• プラグインを作成してみよう

• Travis CIを使ってGitHubにプッシュするたびにテストが実行されるようにしてみよう

• リポジトリにプッシュしてTravis CIで自動的にテストが実行されることを確認しよう

• WordMoveでデプロイしてみよう

CIとは

CIとは

• 継続的インテグレーション( Continuous Integration )

• 主にプログラマーのアプリケーション作成時の品質改善や納期の短縮のための習慣のこと。

• 狭義にはビルドやテスト、インスペクションなどを継続的に実行していくことを意味する。

http://ja.wikipedia.org/wiki/継続的インテグレーション

http://ja.wikipedia.org/wiki/%E7%B6%99%E7%B6%9A%E7%9A%84%E3%82%A4%E3%83%B3%E3%83%86%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3

プラグインの雛形を生成してみよう


• 一から作るのは面倒なので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 というファイル名で保存





}

Test で終わるクラス名





} test_ で始まるメソッド名


• それでは実際にテストコードを書いていきましょう。

• 「[greeting language="japanese"] でこんにちはと表示」をテストするコードを追記します。



class SampleTest extends WP_UnitTestCase {public function test_languageがjapaneseならこんにちは() {

// ショートコードを実行して結果を取得$greeting = do_shortcode( ‘[greeting language=“japanese”]’ );// アサーションメソッドを実行して期待した結果かどうかチェック// ここでは $greeting がこんにちはならOK $this->assertEquals( ‘こんにちは’, $greeting );

}……

} 引数で渡した２つの値が同じならOKなアサーション


• 先ほどのテストコードを参考に「test_languageがenglishならhello() 」のテストも追加してみてください。

• 他にもたくさんのアサーションメソッドが用意されていますので、必要に応じて使い分けましょう。https://phpunit.de/manual/current/ja/appendixes.assertions.html

https://phpunit.de/manual/current/ja/appendixes.assertions.html



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]$ 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 グループ名

グループ名で絞り込んでテストすることができます。



/** * @test */public function languageがjapaneseならこんにちは() {

……}

}

メソッド名の test_ を省略できます。



/** * @runInSeparateProcess */public function test_languageがjapaneseならこんにちは() {

……}

}

テストを個別のPHPプロセスで実行できます。


• 複数指定できます。

• 他にも便利なアノテーションがたくさんあるので下記でご確認ください。

• https://phpunit.de/manual/current/ja/appendixes.annotations.html

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]$ 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 )。


• まずはGitHubにsample-pluginのリポジトリを作成しましょう。


リポジトリを作成


リポジトリ名を入力（例：sample-plugin）

リポジトリ名を入力したらクリック


プッシュ先のURL。後で使うのでメモ！ HTTPSでなくSSHを使います！


• GitHub上のsample-pluginのリポジトリとTravis CIを連携させましょう。


sample-pluginのリポジトリと連携

ここからリポジトリ一覧に移動

リポジトリにプッシュしてTravis CIで自動的にテストが実行される

ことを確認しよう

リポジトリにプッシュしてTravis CIで自動的にテストが実行されることを確認しよう

• Travis CIの登録、連携ができたらGitHubにプッシュしてテストが実行されるか確認してみましょう。


# 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


# リモートリポジトリを設定[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を確認してみましょう。


テストにパスすれば緑が表示されます。

失敗した時は赤が表示されます。

WordMoveでデプロイしてみよう


• WordPressのデプロイツール

• VCCW にインストールされています。

• アップロード・ダウンロードがコマンド一発でできる。

• rsyncで自動的に更新があったファイルだけアップロード・ダウンロードするので高速。


• WordMoveの設定ファイルを編集しましょう。

• vccw/Movefile にサーバーへの接続情報などを記述します。

• YAML形式で記述します。インデントが崩れるとエラーになるので注意。

• 今回デプロイのテスト用に、デジタルキューブ様から超高速WordPressサーバーAMIMOTOの環境をご提供いただいています！



• WordMoveはSSHでサーバーと通信するため鍵の設定が必要です（一応FTPでの通信もありますが…）。

• VCCWはMacの鍵をデフォルトで共有するようになっているので、レンタルサーバーに鍵を置けばすぐに接続できるようになっています。

• 今回はAMIMOTO（AWS）にすでに鍵を設定していますので、先ほどダウンロードした鍵をVCCW内に配置して使用するように設定していきます。



# /vagrantディレクトリに移動[vccw]$ cd /vagrant

# 鍵を配置[vccw]$ chmod 600 wckansai2015_rsa[vccw]$ mv wckansai2015_rsa ~/.ssh/id_rsa

# AMIMOTOに接続できるか確認[vccw]$ ssh [email protected][amimoto]$ exit

mailto:[email protected]



# /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


# 他にもいろいろあるよ

# 更新のあるプラグインだけアップロード[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を使って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/

https://%EF%AC%81regoby.jp/archives/5644

https://%EF%AC%81regoby.jp/archives/5694

http://www.torounit.com/blog/2014/12/09/1889/

http://2inc.org/blog/2014/12/09/4512/

WordCamp Kansai 2015 CI ハンズオン

Internet