Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

GitHub + Travis CI + COVERALLS (+ Maven) でCI環境を2時間でつくる

2,573 views

Published on

研修時のコード -> http://mae0003.github.io/

  • Be the first to comment

GitHub + Travis CI + COVERALLS (+ Maven) でCI環境を2時間でつくる

  1. 1. 2013/12/14 A.Suzuki & H.Maeda
  2. 2. この研修を開催するまで せっかく 勉強してるんだし 何かつくりたい 作ろう ゼヨ 10 min
  3. 3. んじゃ なんか 作ろう! Javaで… おー! Java シラネー
  4. 4. よし。まずは 開発環境だ!
  5. 5. Github! GitHub!
  6. 6. Travis! Travis!
  7. 7. エロく?
  8. 8. どれも わからない
  9. 9. GitHub + Travis CI + CoverALLs (+ Maven) で CI開発環境を 2時間 で作る。
  10. 10. CI 継続的 インテグレーション Continuous Integration テストやビルドといった ソフトウェアの統合プロ セスを可能な限り自動化 し、継続的に行う仕組み
  11. 11. CI ツールの効果
  12. 12. メジャーな CI ツール
  13. 13. 本日利用する 開発環境 WEB で提供されている 開発環境の紹介 10 min
  14. 14. GitHub ソフトウェア開発 プロジェクトのため の 共有ウェブサービス https://github.com/
  15. 15. Travis CI オープンソース コミュニティの ための ホスティング型 CIサービス https://travis-ci.org/
  16. 16. COVERALLS テストのカバー率 を計測、表示して くれる サービス https://coveralls.io/
  17. 17. 通知 プロジェクト Pull リソースの バージョン管理 他 カバレッジ 蓄積、表示 ビルド, テスト カバレッジ計測
  18. 18. GitHub リポジトリ作成 GitHub の アカウントを取得し プロジェクトを格納する リポジトリを作成する 7 min
  19. 19. 2合目 GitHub リポジトリ作成 CoverAlls の設定 Travis CIの設定 First Push テストコード 追加・実行 Pom.xml 作成 ソースコード追加 Mavenプロジェクト の作成 ローカルのリポジトリ作成 GitHubリポジトリ作成
  20. 20. Site GitHub のアカウント登録 name name@mail.jp 後でも使うので 覚えておいてください GitHub
  21. 21. GitHub のプラン選択 無料のプランを 選択します [Finish sign up]
  22. 22. リモートリポジトリの作成 自分の PC ローカル リポジトリ リモート リポジトリ github
  23. 23. GitHub リポジトリ作成 その1 [New repository] で作成開始
  24. 24. GitHub リポジトリ作成 その2 username citest 英語小文字で “citest” Private はお金を払わない と利用できません! Readme.md を生成 [Java] を選択し、 Gitにアップロードしない ファイルを設定する
  25. 25. citest リポジトリの確認 username/ citest citest citest
  26. 26. GitHub リポジトリ の作成完了
  27. 27. コラボレータ を設定すると コードを共同編集 できます
  28. 28. ローカル リポジトリ作成 Eclipse の機能を利用し GitHub のリポジトリか らローカルリポジトリを 作成する 7 min
  29. 29. 3合目 ローカル リポジトリ作成 CoverAlls の設定 Travis CIの設定 First Push テストコード 追加・実行 Pom.xml 作成 ソースコード追加 Mavenプロジェクト の作成 ローカルの リポジトリ作成 GitHubリポジトリ作成
  30. 30. GitHub でのデータフロー 自分の PC ローカル リポジトリ リモート リポジトリ github
  31. 31. Clone によるローカルリポジトリの作成 自分の PC ローカル リポジトリ リモート リポジトリ github
  32. 32. Clone によるローカルリポジトリの作成 [ウィンドウ] – [パーペスペクティブ] – [その他] を選択 [Gitリポジトリエクスプローラ] を選択
  33. 33. Clone によるローカルリポジトリの作成 [Clone URI] を選択し [次へ] クリック [Git リポジトリーの複 製] をクリック
  34. 34. Site リポジトリのURL を取得 username/ citest citest ここをクリックして URL をコピーする citest GitHub
  35. 35. Clone によるローカルリポジトリの作成 GitHub(リモート)リポジトリ の httpsアドレスを入力
  36. 36. Clone によるローカルリポジトリの作成 “ワークスペースのフォルダパス” + “citest”
  37. 37. ローカル リポジトリ の作成完了
  38. 38. Maven (メイヴァン/メイヴィン) プロジェクト情報の一元管理 統一したビルドプロセスの提供 依存ライブラリの管理 上記の機能の助けを借り CIツールが機能します Antの 機能はすべて 網羅
  39. 39. しかも環境の作成手順書わかりにくい・・・
  40. 40. まー 気づくまで、時間のかかること
  41. 41. Maven が解決 CI ツールはビルドツールがないと動かない!
  42. 42. Eclipce + Maven Eclipce を使って Maven プロジェクト を作成 7min
  43. 43. 4合目 CoverAlls の設定 Maven プロジェクト作成 Travis CIの設定 First Push テストコード 追加・実行 Pom.xml 作成 ソースコード追加 Mavenプロジェクト の作成 ローカルの リポジトリ作成 GitHubリポジトリ作成
  44. 44. Mavenプロジェクトの作成 1 Gitリポジトリエクスプローラの [作業ディレクトリ] で右クリックし [プロジェクトのインポート] を選択 [新規ウィザードの使用]
  45. 45. Mavenプロジェクトの作成 2 リストから ・Mavenプロジェクト を選択し、[次へ]
  46. 46. Mavenプロジェクトの作成 3 ☑シンプルなプロジェクトの作成 ☑デフォルト・ワークスペース・ロケーションの使用 を選択して [次へ]
  47. 47. Mavenプロジェクトの作成 4 devmen.project グループ Id はアプ リケーションを登録 するグループ アーティファクト Id はアプリケーション そのものを表す識別 子 citest
  48. 48. Maven ディレクトリ構成の確認 Java パースペクティブ を選択して.. 展開する。 ← コードを格納します ← テストコードを格納します ← Maven の設定ファイル
  49. 49. Maven プロジェクト 完成 なんもソースがないけど・・・
  50. 50. これから ソースコード 作成 ビルド・テストを 行うための Profile クラス を作成します 5 min
  51. 51. 5合目 CoverAlls の設定 ソースコード追加 Travis CIの設定 First Push テストコード 追加・実行 Pom.xml 作成 ソースコード追加 Mavenプロジェクト の作成 ローカルの リポジトリ作成 GitHubリポジトリ作成
  52. 52. Profile クラスの作成
  53. 53. Profile クラスの作成 “Profile”
  54. 54. Profile クラスの追加 Gist package citest; Profile.java import java.util.ArrayList; import java.util.List; public class Profile { private String name ="じょん"; private List<String> tags = new ArrayList<>(); public String getName(){ return name; } public void addTag(String tag){ this.tags.add(tag); } }
  55. 55. はい ビルド とおりません
  56. 56. POM.XML 作成 MAVEN のビルドに必要 な POM ファイルを作成 10 min
  57. 57. 6合目 pom.xml 作成 CoverAlls の設定 Travis CIの設定 First Push テストコード 追加・実行 Pom.xml 作成 ソースコード追加 Mavenプロジェクト の作成 ローカルのリポジトリ作成 GitHubリポジトリ作成
  58. 58. POMファイルを開く
  59. 59. Gist FirstPom POM.XML にコンパイラの設定追加 <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> </properties> Maven が使用する <build> エンコーディング <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.0</version> <configuration> <source>1.7</source> コンパイル <target>1.7</target> を実行するプラグインに </configuration> Java バージョンを設定 </plugin> </plugins> </build>
  60. 60. Maven プロジェクトを更新 プロジェクトを選択し、 [Alt] + [F5] を入力
  61. 61. Maven でビルドを実行 “…” がついてる メニューを選ぶ
  62. 62. Maven でビルドを実行 “compile”
  63. 63. SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder". SLF4J: Defaulting to no-operation (NOP) logger implementation SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further [INFO] Scanning for projects... [INFO] [INFO] -----------------------------------------------------------------[INFO] Building citest 0.0.1-SNAPSHOT [INFO] -----------------------------------------------------------------[INFO] [INFO] --- maven-resources-plugin:2.5:resources (default-resources) @ cit [debug] execute contextualize [INFO] Using 'UTF-8' encoding to copy filtered resources. [INFO] Copying 0 resource [INFO] [INFO] --- maven-compiler-plugin:3.0:compile (default-compile) @ citest [INFO] Nothing to compile - all classes are up to date [INFO] -----------------------------------------------------------------[INFO] BUILD SUCCESS [INFO] -----------------------------------------------------------------[INFO] Total time: 1.471s [INFO] Finished at: Thu Nov 28 21:26:42 JST 2013 [INFO] Final Memory: 7M/191M [INFO] ------------------------------------------------------------------
  64. 64. Maven ビルド できた! たぶん
  65. 65. テストコード 作成 (Junit4) Profile クラス の テストコードを追加して Mavenに テストを実行させてみよう 7 min
  66. 66. CoverAlls の設定 Travis CIの設定 First Push 7合目 テストコード 追加・実行 Pom.xml 作成 テストコード追加 と Maven での実行 ソースコード追加 Mavenプロジェクト の作成 ローカルのリポジトリ作成 GitHubリポジトリ作成
  67. 67. テストコードの追加 その1 クラスの上で 右クリックする [新規] – [その他]
  68. 68. テストコードの追加 その2 -> test に変更する main “ju” と入力し、 [Junit テストケース]を選択
  69. 69. テストコードの追加 その3
  70. 70. テストコードの追加 その4 package citest; Gist ProfileTest.Java import static org.hamcrest.CoreMatchers.*; import static org.junit.Assert.*; import org.junit.Test; public class ProfileTest { @Test public void testGetName() { Profile profile = new Profile(); String expected = "じょん"; String actual = profile.getName(); assertThat(actual, is(expected)); } }
  71. 71. テストコード の追加完了 Junitの ライブラリ参照問題で ところどころ赤いですが・・
  72. 72. Maven ライブラリ 参照設定 Mavenに依存関係 を定義し、面倒な参照設 定を自動で行う 7 min
  73. 73. CoverAlls の設定 Travis CIの設定 First Push 8合目 テストコード 追加・実行 Pom.xml 作成 テストコード追加 と Maven での実行 ソースコード追加 Mavenプロジェクト の作成 ローカルのリポジトリ作成 GitHubリポジトリ作成
  74. 74. Mavenでライブラリ参照を解決 使用側 ライブラリのインストール ライブラリの参照設定 ライブリの更新作業 提供側 Libフォルダなどにライブラ リを入れて提供 設定手順書などの ドキュメント バージョン更新
  75. 75. Junit4 のライブラリを自動設定 プロジェクトを選択し、 右クリックし [Maven] – [依存関係の追加] を選択 “junit” を入力し [Enter]
  76. 76. Maven プロジェクトの更新 プロジェクトを 選択した状態で [Alt] + [F5]
  77. 77. Maven でテストを実行してみよう プロジェクトを 選択し右クリック [実行] + [Maven test]
  78. 78. テスト実行成功 ------------------------------------------------------T E S T S ------------------------------------------------------Running citest.ProfileTest Tests run: 1, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.097 sec Results : Tests run: 1, Failures: 0, Errors: 0, Skipped: 0 [INFO] [INFO] [INFO] [INFO] [INFO] [INFO] [INFO] -----------------------------------------------------------------------BUILD SUCCESS -----------------------------------------------------------------------Total time: 3.986s Finished at: Fri Nov 29 22:52:39 JST 2013 Final Memory: 8M/151M ------------------------------------------------------------------------
  79. 79. Maven ライブラリ参照 テスト実行環境 作成完了
  80. 80. Eclipse で GitHub の First Push 設定を行い プロジェクトをGitHubに プッシュする 5 min
  81. 81. Git のユーザ設定 メニューの [ウィンドウ] – [設定] を 選択し、設定ダイアログを表示 “git” と入力し ツリーから [チーム] – [Git] – [構成] を選択 [エントリーの追加] で以下の値を追加する キー 値 user.name GitHub のユーザ名 user.email GitHub の登録メールアドレス
  82. 82. Commit And Push 自分の PC ローカル リポジトリ リモート リポジトリ github
  83. 83. Commit And Push パッケージエクスプローラ の プロジェクトの上で右 クリックして [チーム] – [コミット]
  84. 84. Commit And Push コメントを書かな いとコミットでき ないよ [✓] をクリックして すべてのファイルを選択
  85. 85. リモート リポジトリ へPush完了
  86. 86. Mail のサービスフック を設定すると コミット時に メールを送信することが 出来る
  87. 87. CoverAlls の設定 Travis CIの設定 First Push 9合目 テストコード 追加・実行 Pom.xml 作成 Travis CI の設定 ソースコード追加 Mavenプロジェクト の作成 ローカルのリポジトリ作成 GitHubリポジトリ作成 15min
  88. 88. Travis CI オープンソース コミュニティの為の、 ホスティング型 CIサービス。 https://travis-ci.org/
  89. 89. CI を体験しよう! (継続的インテグレーション) 目的 Travis CIを使用して継続的インテグレーションを体験する 流れ Travis CI サインイン ビルド設定ファイル作成 ビルドの確認
  90. 90. Travis Travis サインインする
  91. 91. Site Travis CI Travis CI へサインイン [Sign in with GitHub] をクリックして GitHubのアカウントで サインインする
  92. 92. Site GitHub Travis CI のサービスフックの有効化 サービスフックの 設定画面に遷移する [Allow Access] をクリック TravisがGitHubに アクセスすることを許可 Read/Writeの 設定は変えられない
  93. 93. Travis CI の言語設定 [Profile] をクリック [日本語] を選択 Site Travis CI
  94. 94. リポジトリを有効にする [ON] をクリック 対象リポジトリで Travis CI を有効にする
  95. 95. Travis のビルドに必要な設 Travis 定ファイル .travis.yml ファイルを 作成する。 10 min
  96. 96. Site .travis.yml 作成 [+] マークをクリックし、 新規ファイルを追加 GitHub
  97. 97. .travis.yml 作成 Gist .travis.yml ファイル名 “.travis.yml” を入力 [Commit New File] をクリックして ファイルをコミット
  98. 98. Travis CI ビルド Site GitHubにPushするたびに 自動でビルドされる ※時間がかかる場合があるので注意 Travis CI
  99. 99. 通知 プロジェクト Pull リソースの バージョン管理 他 カバレッジ 蓄積、表示 ビルド, テスト カバレッジ計測
  100. 100. ビルドステータスバッジ GitHubにPushした時にビルドが成功しているか確認したい! GitHubだけで確認できたらいいね ビルドステータス バッジ
  101. 101. ビルドステータスバッジ Site ビルドステータス をクリック Travis CI
  102. 102. ビルドステータスバッジ . README.mdに貼りつけるため md(Mark Down) の記述を コピーする
  103. 103. ビルドステータスバッジ Site GitHub [README.md] クリックし、編集する
  104. 104. README.md 編集 [Edit] をクリック
  105. 105. ビルドステータスバッジ Travis-ciでコピーした.md用のビルドステータスバッジ を貼りつける 行末にスペース2 で改行になる
  106. 106. ビルドステータスバッジ [Commit Changes] をクリックして ファイルをコミット
  107. 107. ビルドステータスバッジ ビルドステータスバッジ が表示される
  108. 108. Travis でいつでも ビルドとテスト が走るよう になったよ
  109. 109. CoverAlls の設定 Travis CIの設定 First Push 10合目 テストコード 追加・実行 Pom.xml 作成 CoverAllsの設定 ソースコード追加 Mavenプロジェクト の作成 ローカルのリポジトリ作成 GitHubリポジトリ作成
  110. 110. COVERALLS テストのカバー率を 計測してくれる サービス。 https://coveralls.io/
  111. 111. ビルド時にカバレッジも確認しよう! 目的 ビルドとテストを自動で行ってカバレッジを計測する サービスを体験する 流れ COVERALLSにサインイン COVERALLSセットアップ Maven POMの編集 ローカルテスト実行 COVERALLSでカバレッジ確認
  112. 112. COVERALLS COVERALLS のセットアップを行い カバレッジデータを 表示してみよう 10 min
  113. 113. CoverAlls にサインイン Site CoverAlls [Sign in with GitHub] をクリックして GitHubのアカウントで サインインする
  114. 114. Site GitHub CoverAllsのサービスフックの有効化 サービスフックの 設定画面に遷移する [Allow Access] をクリック CoverallsがGitHubにアクセ スすることを許可
  115. 115. Githubリポジトリ追加 [ADD REPO] をクリック リポジトリを追加する
  116. 116. Coverallsを有効にする [ON] をクリック 対象リポジトリで CoverAlls を有効にする
  117. 117. 通知 プロジェクト Pull リソースの バージョン管理 他 カバレッジ 蓄積、表示 ビルド, テスト カバレッジ計測
  118. 118. GitHubからPullする 自分の PC ローカル リポジトリ リモート リポジトリ github
  119. 119. GitHubからPullする(Eclipse) [チーム] – [プル] GitHub上で編集したの でリモートリポジトリ とローカルリポジトリ を同じ状態にする
  120. 120. Maven POMの編集 Gist pom.xml 編集 Second pom.xml
  121. 121. JUnit Junit実践入門 テストコードの書き方 テストファースト Mavenの設定 カバレッジの計測 継続的インテグレーション
  122. 122. POMの更新 [Maven] –[プロジェクトの更新] pom.xml の編集内容を プロジェクトに反映する
  123. 123. POM plugin executionエラー回避 上から2番目のリンクを選択する
  124. 124. Maven build構成 [実行]->*Maven build(*)…+ “…” がついてる メニューを選ぶ
  125. 125. プラグインのゴール設定 Gist Maven goal clean jacoco:prepare-agent test jacoco:report [ゴール] を設定 [実行] をクリック
  126. 126. レポートを見てみよう! [リフレッシュ] を選択し、 [target] フォルダに [site] が作成されているこ とを確認する
  127. 127. Index.html パッケージエクスプローラーの Index.html 上で右クリック メニューの [次で開く] – [Webブラウザー] を選択する
  128. 128. Jacocoレポート
  129. 129. GitHubにPushする 自分の PC ローカル リポジトリ リモート リポジトリ github
  130. 130. GitHubにPushする(Eclipse) [チーム] – [コミット] 編集内容をコミットして GitHubへプッシュ!
  131. 131. GitHubにPushする(Eclipse) コミットメッセージ “Update pom.xml for Jacoco and Coveralls” を入力 [pom.xml]にチェックが 入っていることを確認 [Commit and push]
  132. 132. カバレッジステータスバッジ カバレッジのステータスをGitHub上でも常に見たい! カバレッジ ステータスバッジ
  133. 133. カバレッジステータスバッジ Site CoverAlls . README.mdに貼りつけるため md(Mark Down) の記述をコピーする
  134. 134. カバレッジステータスバッジ [README.md] を クリックし編集 Site GitHub
  135. 135. README.md編集 [Edit] を クリックし編集
  136. 136. カバレッジステータスバッジ COVERALLSでコピーした.md用の カバレッジステータスバッジを貼りつける
  137. 137. カバレッジステータスバッジ [Commit Changes] をクリックして ファイルをコミット
  138. 138. カバレッジステータスバッジ カバレッジステータス バッジが表示される
  139. 139. Site COVERALLSを覗いてみよう ビルドごとのカバレッジ が確認できる CoverAlls
  140. 140. ファイルごとのカバレッジ ビルドごとのカバレッジ が確認できる
  141. 141. カバレッジ テストしていないコードは赤 テストしたコードは緑
  142. 142. COVERALLS でいつでも カバレッジデータ を確認できるよ。
  143. 143. 最後に 本日学んだことの 振り返り
  144. 144. このタイトルのスライドを随所 に織り込み楽しいポイントを紹 介してあげる!! たとえば コミットメールとか!

×