WordCamp Kansai 2015 CI ハンズオン

11,140 views

Published on

WordCamp Kansai 2015 CI ハンズオンの資料です。

Published in: Internet

WordCamp Kansai 2015 CI ハンズオン

  1. 1. WordPressで行う 継続的インテグレーションのススメ
 ハンズオン WordCamp Kansai 2015 堀家・北島・占部
  2. 2. アジェンダ • CI とは • プラグインの雛形を生成してみよう • ユニットテストを書いてみよう • プラグインを作成してみよう • Travis CIを使ってGitHubにプッシュするたびにテストが実行されるようにしてみよ う • リポジトリにプッシュしてTravis CIで自動的にテストが実行されることを確認しよう • WordMoveでデプロイしてみよう
  3. 3. CIとは
  4. 4. CIとは • 継続的インテグレーション
 ( Continuous Integration ) • 主にプログラマーのアプリケーション作成時の 品質改善や納期の短縮のための習慣のこと。 • 狭義にはビルドやテスト、インスペクションな どを継続的に実行していくことを意味する。 http://ja.wikipedia.org/wiki/継続的インテグレーション
  5. 5. プラグインの雛形を生成してみよう
  6. 6. プラグインの雛形を生成してみよう • 一から作るのは面倒なのでVCCWに同梱され ているWP-CLIを使って雛形を作成してみま しょう。 • まずVCCWにログインしましょう。
  7. 7. プラグインの雛形を生成してみよう # vccwのディレクトリまで移動 $ cd vccw # VCCW起動 $ vagrant up # VCCWにログイン $ vagrant ssh # WordPressのディレクトリに移動 [vccw]$ cd /var/www/wordpress
  8. 8. プラグインの雛形を生成してみよう # プラグインの雛形を作成 [vccw]$ wp scaffold plugin sample-plugin Success: Created /var/www/wordpress/wp-content/plugins/sample-plugin Success: Created test files. # もし既存のプラグインにテストだけ追加したい場合は下記で可能です。 [vccw]$ wp scaffold plugin-tests <plugin-slug> このメッセージが表示されたら成功
  9. 9. プラグインの雛形を生成してみよう • プラグインの雛形が作成されたか確認してみ ましょう
  10. 10. プラグインの雛形を生成してみよう [vccw]$ ls -al /var/www/wordpress/wp-content/plugins/sample-plugin/ 合計 20 drwxr-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.yml drwxr-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.php drwxr-xr-x. 1 vagrant vagrant 136 6月 9 23:17 2015 tests
  11. 11. プラグインの雛形を生成してみよう # vccwからログアウト [vccw]$ exit
  12. 12. ユニットテストを書いてみよう
  13. 13. ユニットテストを書いてみよう • 今回のハンズオンでは次のような仕様のショート コードのプラグインを作成していきます。 • [greeting language="japanese"] で こんにちは と 表示 • [greeting language="english"] で hello と表示 • それ以外では何も表示しない
  14. 14. ユニットテストを書いてみよう • 今回はテストファーストと手法で作成していきま しょう。 • テストファーストとは、モノを作成するよりも先 に、まずテストから作成する、という手法のこと。 • テストを先に書くことで仕様が明確になる、テスト を100%通るコードになる、などのメリットがあり ます。
  15. 15. ユニットテストを書いてみよう • 下記にテストの雛形が生成されているので、そ れを編集していきましょう。 • vccw/www/wordpress/wp-content/plugins/ sample-plugin/tests/test-sample.php • ユニットテスト用のコードには、自動実行させ るために必要ないくつかのルールがあります。
  16. 16. ユニットテストを書いてみよう # 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 というファイル名で保存
  17. 17. ユニットテストを書いてみよう # 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 で終わるクラス名
  18. 18. ユニットテストを書いてみよう # 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_ で始まるメソッド名
  19. 19. ユニットテストを書いてみよう • それでは実際にテストコードを書いていきま しょう。 • 「[greeting language="japanese"] で こんに ちは と表示」をテストするコードを追記しま す。
  20. 20. ユニットテストを書いてみよう # 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なアサーション
  21. 21. ユニットテストを書いてみよう • 先ほどのテストコードを参考に「test_languageが englishならhello() 」のテストも追加してみてくだ さい。 • 他にもたくさんのアサーションメソッドが用意され ていますので、必要に応じて使い分けましょう。
 https://phpunit.de/manual/current/ja/ appendixes.assertions.html
  22. 22. ユニットテストを書いてみよう # 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 ); } }
  23. 23. ユニットテストを書いてみよう • テストコードが書けたらテストを実行してみ ましょう。
  24. 24. ユニットテストを書いてみよう # 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.xml Not 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. プラグインのコードを書いていないので当然エラー…
  25. 25. ユニットテストを書いてみよう • テストファーストの手法では、まず失敗するテ ストを書いて、それが成功するコードを書い ていくことで品質を保証します。 • では今書いたテストが成功するコードを書い ていきましょう。 • その前に…
  26. 26. おまけ:便利なアノテーション • アノテーションとはメタデータを表す特別な 構文のことで、テストメソッドの前にコメン トを書くことで実行されます。
  27. 27. おまけ:便利なアノテーション class SampleTest extends WP_UnitTestCase { /** * @group グループ名 */ public function test_languageがjapaneseならこんにちは() { …… } } $ phpunit —group グループ名 グループ名で絞り込んでテストすることができます。
  28. 28. おまけ:便利なアノテーション class SampleTest extends WP_UnitTestCase { /** * @test */ public function languageがjapaneseならこんにちは() { …… } } メソッド名の test_ を省略できます。
  29. 29. おまけ:便利なアノテーション class SampleTest extends WP_UnitTestCase { /** * @runInSeparateProcess */ public function test_languageがjapaneseならこんにちは() { …… } } テストを個別のPHPプロセスで実行できます。
  30. 30. おまけ:便利なアノテーション • 複数指定できます。 • 他にも便利なアノテーションがたくさんある ので下記でご確認ください。 • https://phpunit.de/manual/current/ja/ appendixes.annotations.html
  31. 31. プラグインを作成してみよう
  32. 32. プラグインを作成してみよう # 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'; } } );
  33. 33. プラグインを作成してみよう • コードが書けたら再度テストを実行してみま しょう。
  34. 34. プラグインを作成してみよう # 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.xml Not 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) 緑のメッセージならテストクリア
  35. 35. Travis CIを使ってGitHubにプッ シュするたびにテストが実行され るようにしてみよう
  36. 36. Travis CIを使ってGitHubにプッシュするた びにテストが実行されるようにしてみよう • Travis CIはGitHub上のリポジトリと連携してCIを行うこ とができるサービス。 • GitHubにプッシュすると、自動的にテストが実行され ます。 • プラグインディレクトリに生成された.travis.ymlを編集 することで様々な環境のテストを実行できます。例えば、 ( PHP5.3、5.4 ) ☓ ( WordPress 4.1、4.2 )。
  37. 37. Travis CIを使ってGitHubにプッシュするた びにテストが実行されるようにしてみよう • まずはGitHubにsample-pluginのリポジトリ を作成しましょう。
  38. 38. Travis CIを使ってGitHubにプッシュするた びにテストが実行されるようにしてみよう リポジトリを作成
  39. 39. Travis CIを使ってGitHubにプッシュするた びにテストが実行されるようにしてみよう リポジトリ名を入力(例:sample-plugin) リポジトリ名を入力したらクリック
  40. 40. Travis CIを使ってGitHubにプッシュするた びにテストが実行されるようにしてみよう プッシュ先のURL。後で使うのでメモ! HTTPSでなくSSHを使います!
  41. 41. Travis CIを使ってGitHubにプッシュするた びにテストが実行されるようにしてみよう • GitHub上のsample-pluginのリポジトリと Travis CIを連携させましょう。
  42. 42. Travis CIを使ってGitHubにプッシュするた びにテストが実行されるようにしてみよう sample-pluginのリポジトリと連携 ここからリポジトリ一覧に移動
  43. 43. リポジトリにプッシュしてTravis CIで自動的にテストが実行される ことを確認しよう
  44. 44. リポジトリにプッシュしてTravis CIで自動 的にテストが実行されることを確認しよう • Travis CIの登録、連携ができたらGitHubに プッシュしてテストが実行されるか確認して みましょう。
  45. 45. リポジトリにプッシュしてTravis CIで自動 的にテストが実行されることを確認しよう # sample-plugin のディレクトリで git init $ vagrant ssh [vccw]$ cd /var/www/wordpress/wp-content/plugins/sample-plugin [vccw]$ git init # ファイルをステージングに追加 [vccw]$ git add .
  46. 46. リポジトリにプッシュしてTravis CIで自動 的にテストが実行されることを確認しよう # 変更をコミット [vccw]$ git commit -m "first commit” Committer: vagrant <vagrant@2inc.local> Your name and email address were configured automatically based on 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 you@example.com If the identity used for this commit is wrong, you can fix it with: git commit --amend --author='Your Name <you@example.com>' 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
  47. 47. リポジトリにプッシュしてTravis CIで自動 的にテストが実行されることを確認しよう # リモートリポジトリを設定 [vccw]$ git remote add origin git@github.com: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 git@github.com:example/sample-plugin.git * [new branch] master -> master Branch master set up to track remote branch master from origin. GitHubのリポジトリの情報に 合わせてください。
  48. 48. リポジトリにプッシュしてTravis CIで自動 的にテストが実行されることを確認しよう • プッシュできたらTravis CIを確認してみましょ う。
  49. 49. リポジトリにプッシュしてTravis CIで自動 的にテストが実行されることを確認しよう テストにパスすれば緑が表示されます。 失敗した時は赤が表示されます。
  50. 50. WordMoveでデプロイしてみよう
  51. 51. WordMoveでデプロイしてみよう • WordPressのデプロイツール • VCCW にインストールされています。 • アップロード・ダウンロードがコマンド一発ででき る。 • rsyncで自動的に更新があったファイルだけアップ ロード・ダウンロードするので高速。
  52. 52. WordMoveでデプロイしてみよう • WordMoveの設定ファイルを編集しましょう。 • vccw/Movefile にサーバーへの接続情報などを記述します。 • YAML形式で記述します。インデントが崩れるとエラーにな るので注意。 • 今回デプロイのテスト用に、デジタルキューブ様から超高速 WordPressサーバーAMIMOTOの環境をご提供いただいてい ます!
  53. 53. WordMoveでデプロイしてみよう
  54. 54. WordMoveでデプロイしてみよう • WordMoveはSSHでサーバーと通信するため の設定が必要です (一応FTPでの通信もありますが…)。 • VCCWはMacの をデフォルトで共有するようになっているの で、レンタルサーバーに を置けばすぐに接続できるようになっ ています。 • 今回はAMIMOTO(AWS)にすでに を設定していますので、先 ほどダウンロードした をVCCW内に配置して使用するように設 定していきます。
  55. 55. WordMoveでデプロイしてみよう # VCCWにログイン $ vagrant ssh # /vagrantディレクトリに移動 [vccw]$ cd /vagrant # を配置 [vccw]$ chmod 600 wckansai2015_rsa [vccw]$ mv wckansai2015_rsa ~/.ssh/id_rsa # AMIMOTOに接続できるか確認 [vccw]$ ssh nginx@wapuu.pw [amimoto]$ exit
  56. 56. 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 example1@example.com’ -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/plugins receiving incremental file list sample-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
  57. 57. 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
  58. 58. WordMoveでデプロイしてみよう • WordMoveを使ってVagrant内のWordPressと本番環境を同期する! | Firegoby
 https://firegoby.jp/archives/5644 • ssh-agentを使ってVagrant上のゲストOSからMac側の秘密 を使えるようにする | Firegoby
 https://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/

×