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

2013/12/14 A.Suzuki & H.Maeda

この研修を開催するまで

10 min

せっかく勉強してるんだし何かつくりたい

D d作ろう

ゼヨ

おー！Java

シラネー

んじゃ

なんか作ろう！

Java で…

よし。まずは

開発環境だ！

Github!

GitHub!

Travis!

Travis!

Maven!

Maven!

Heroku!

Heroku!エロく？

Heroku!Gist!

SSHJacoco

CoverAlls

Maven

TravisBootStrap

どれもわからない

GitHub + Travis CI + CoverALLs (+ Maven) で

CI開発環境を２時間で作る。

ビルドもテストもカバレッジ計測もコミット時に自動で実行

コミットがするのが楽しくなる CI 環境を作成

CI継続的インテグレーションContinuous Integration

テストやビルドといったソ

フトウェアの統合プロセス

を可能な限り自動化し、継

続的に行う仕組み

CI ツールの効果

1. 開発者の生産性や品質を向上

2. インテグレーション時の問題を早期発見し、防

止策の実施や、プロセス改善へとつなぐ

3. 複数の開発者や開発拠点にまたがる開発プロセ

スの統一化やノウハウを共有

メジャーな CI ツール

JenkinceTeam Faundertion Server (Microsoft)

Travis CI

開発環境本日利用する

WEB で提供されてい

る開発環境の紹介

10 min

GitHub

ソフトウェア開発プロジェクトのための共有ウェブサービス

https://github.com/

https://github.com/

Travis CI

オープンソースコミュニティのためのホスティング型CI サービス

https://travis-ci.org/


COVERALLS

テストのカバー率を計測、表示してくれるサービス

https://coveralls.io/


プロ

ジェ

クト

Ｐｕ

ｓｈ

通知

プロジェクトＰｕｌｌ

カバ

レッ

ジデ

ータ

ビルド , テストカバレッジ計測

カバレッジ蓄積、表示

リソースのバージョン管理他

GitHubリポジトリ作成

GitHub の

アカウントを取得し

プロジェクトを格納する

リポジトリを作成する

7 min

2 合目

ローカルのリポジトリ作成

Travis CI の設定

Maven プロジェクトの作成

ソースコード追加

Pom.xml 作成

テストコード追加・実行

First Push

CoverAlls の設定

GitHub リポジトリ作成


GitHub のアカウント登録

[email protected]

name

後でも使うので覚えておいてくださ

い

GitHubSite

GitHub のプラン選択

無料のプランを選択します

[Finish sign up]

リモートリポジトリの作成

リモートリポジトリ

自分の PC

github

ローカルリポジトリ

[New repository]で作成開始

GitHub リポジトリ作成その１

GitHub リポジトリ作成その２

citest

Readme.mdを生成

[Java] を選択し、Git にアップロードしない

ファイルを設定する

Private はお金を払わないと利用できませ

ん !

username

英語小文字で“ citest”

citest リポジトリの確認

citest

citest

username/ citest

GitHubリポジトリ

の作成完了

複数で開発するとき

コラボレータを設定すると

コードを共同編集できます

ローカルリポジトリ作成

Eclipse の機能を利用し

GitHub のリポジトリから

ローカルリポジトリを作成

する

7 min

３合目


Travis CI の設定



Pom.xml 作成


First Push

CoverAlls の設定

ローカルリポジトリ作成


GitHub でのデータフロー



com

mit

pushfetch

pullpull

自分の PC

github

Clone によるローカルリポジトリの作成



Clone

自分の PC

github

[Git リポジトリエクスプローラ ]

を選択


[ ウィンドウ ] – [ パーペスペクティブ ] – [ その他 ] を選択


[Git リポジトリーの複製 ] をクリック

[Clone URI] を選択し[ 次へ ] クリック

リポジトリの URL を取得

citest

citest

username/ citest

ここをクリックしてURL をコピーする

GitHubSite

GitHub( リモート ) リポジトリの https アドレスを入力


“ ワークスペースのフォルダパス”＋ “ citest”



の作成完了

Maven ( メイヴァン / メイヴィン )

プロジェクト情報の一元管理

統一したビルドプロセスの提供

依存ライブラリの管理

上記の機能の助けを借りＣＩツールが機能しますＡｎｔの

機能はすべて網羅

途中からプロジェクトに参加して環境作成にやたらと時間がかか

る・・

しかも環境の作成手順書わかりにくい・・・

使用しているライブラリのバージョンが自分だけ違っ

て動作が違ったり

ビルドに失敗する。まー気づくまで、時間のかかること

ビルドと同時にテスト実行やJavaDoc 生成を実行したい

Mavenが解決

CI ツールはビルドツールがないと動かない！

Eclipce +Maven

Eclipce を使って

Maven プロジェクト

を作成

7min

４合目


Travis CI の設定



Pom.xml 作成


First Push

CoverAlls の設定

Maven プロジェクト作成


Maven プロジェクトの作成１

[新規ウィザードの使用 ]

Git リポジトリエクスプローラの [ 作業ディレクトリ ] で右クリック

し[ プロジェクトのインポート ] を選

択

Maven プロジェクトの作成２

リストから・ Maven プロジェクトを選択し、 [ 次へ ]

Maven プロジェクトの作成３

☑シンプルなプロジェクトの作成☑デフォルト・ワークスペース・ロケーションの使用を選択して [ 次へ ]

Maven プロジェクトの作成４

devmen.project

citest

グループ Id はアプリケーションを登録するグループ

アーティファクト Id はアプリケーションそのものを表す識別子

Maven ディレクトリ構成の確認

← コードを格納します

← テストコードを格納します

← Maven の設定ファイル

展開する。

Java パースペクティブを選択して．．

Mavenプロジェクト

完成なんもソースがないけど・・・

ソースコード作成

これから

ビルド・テストを

行うための

Profile クラスを作成します

5 min

５合目


Travis CI の設定



Pom.xml 作成


First Push

CoverAlls の設定



Profile クラスの作成

Profile クラスの作成

“Profile”

Profile クラスの追加

package citest;

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);

}}

Profile.javaGist

はいビルド

とおりません

POM.XML作成

MAVEN のビルドに必要

な POM ファイルを作

成

10 min

６合目


Travis CI の設定



Pom.xml 作成


First Push

CoverAlls の設定

pom.xml 作成


POM ファイルを開く

POM.XML にコンパイラの設定追加

<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><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> </plugin> </plugins></build>

コンパイルを実行するプラグインに

Java バージョンを設定

Maven が使用するエンコーディング

FirstPomGist

Maven プロジェクトを更新

プロジェクトを選択し、[Alt] + [F5] を入力

Maven でビルドを実行

“…” がついてる

メニューを選ぶ

Maven でビルドを実行

“compile”

SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".SLF4J: Defaulting to no-operation (NOP) logger implementationSLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.[INFO] Scanning for projects...[INFO] [INFO] ------------------------------------------------------------------------[INFO] Building citest 0.0.1-SNAPSHOT[INFO] ------------------------------------------------------------------------[INFO] [INFO] --- maven-resources-plugin:2.5:resources (default-resources) @ citest ---[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] ------------------------------------------------------------------------

Mavenビルド

できた！たぶん

テストコード作成

(Junit4)

Profile クラスの

テストコードを追加して

Maven に

テストを実行させてみよう

7 min

７合目


Travis CI の設定



Pom.xml 作成


First Push

CoverAlls の設定

テストコード追加とMaven での実行


テストコードの追加その１クラスの上で右クリックする

[新規 ] – [ その他 ]

テストコードの追加その２main -> test に変更する

“ju” と入力し、[Junit テストケース ] を選

択

テストコードの追加その３

テストコードの追加その４package citest;

import static org.hamcrest.CoreMatchers.*;import static org.junit.Assert.*;

import org.junit.Test;

public class ProfileTest {

@Testpublic void testGetName() {

Profile profile = new Profile();String expected = " じょん "; String actual = profile.getName();

assertThat(actual, is(expected)); }}

ProfileTest.JavaGist

テストコードの追加完了

Junit のライブラリ参照問題で

ところどころ赤いですが・・

Mavenライブラリ参照設定

Maven に依存関係

を定義し、面倒な参照設

定を自動で行う

7 min

８合目


Travis CI の設定



Pom.xml 作成


First Push

CoverAlls の設定

テストコード追加とMaven での実行


Maven でライブラリ参照を解決

使用側

ライブラリのインストール

ライブラリの参照設定

ライブリの更新作業

提供側Lib フォルダなどにライブ

ラリを入れて提供

設定手順書などのドキュメント

バージョン更新

Junit4 のライブラリを自動設定

“junit” を入力し[Enter]

プロジェクトを選択し、右クリックし

[Maven] – [ 依存関係の追加 ] を選択

Maven プロジェクトの更新

プロジェクトを選択した状態で

[Alt] + [F5]

Maven でテストを実行してみよう

プロジェクトを選択し右クリック

[ 実行 ] + [Maven test]

テスト実行成功------------------------------------------------------- T E S T S-------------------------------------------------------Running citest.ProfileTestTests 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] BUILD SUCCESS[INFO] ------------------------------------------------------------------------[INFO] Total time: 3.986s[INFO] Finished at: Fri Nov 29 22:52:39 JST 2013[INFO] Final Memory: 8M/151M[INFO] ------------------------------------------------------------------------

Mavenライブラリ参照テスト実行環境

作成完了

First Push

Eclipse で GitHub の

設定を行い

プロジェクトを GitHub に

プッシュする

5 min

Git のユーザ設定メニューの [ ウィンドウ ] – [ 設定 ] を選択し、設定ダイアログを表示

“git” と入力しツリーから

[チーム ] – [Git] – [構成 ] を選択

[ エントリーの追加 ] で以下の値を追加する

キー値user.name GitHub のユーザ名user.email GitHub の登録メールアドレ

ス

Commit And Push



com

mit

pushfetch

pullpull

自分の PC

github

Commit And Push

パッケージエクスプローラ

のプロジェクトの上で右クリックして

[チーム ] – [ コミット ]

Commit And Push

[ ] ✓ をクリックしてすべてのファイルを選択

コメントを書かないとコミットでき

ないよ


へ Push 完了

複数で開発するとき

Mail のサービスフックを設定するとコミット時に

メールを送信することが出来る

９合目


Travis CI の設定



Pom.xml 作成


First Push

CoverAlls の設定

Travis CI の設定 15min


Travis CI

オープンソースコミュニティの為の、ホスティング型CI サービス。



CI を体験しよう！( 継続的インテグレーション )

目的 Travis CI を使用して継続的インテグレーションを体験する

流れ Travis CI サインインビルド設定ファイル作成ビルドの確認

Travis Travis

サインインする

Travis CI へサインインTravis CISite

[Sign in with GitHub]をクリックして

GitHub のアカウントでサインインする

Travis CI のサービスフックの有効化

サービスフックの設定画面に遷移する

Read/Write の設定は変えられない

[Allow Access] をクリック

Travis が GitHub にアクセスすることを許

可

GitHub Site

Travis CI の言語設定

[Profile] をクリック

Travis CISite

[ 日本語 ] を選択

リポジトリを有効にする

[ON] をクリック対象リポジトリで

Travis CI を有効にする

Travis

Travis のビルドに必要な設

定ファイル

.travis.yml ファイルを

作成する。

10 min

.travis.yml 作成GitHub Site

[+] マークをクリックし、新規ファイルを追加

.travis.yml 作成ファイル名 “.travis.yml”

を入力

[Commit New File]をクリックして

ファイルをコミット

.travis.ymlGist

Travis CI ビルド Travis CISite

GitHub に Push するたびに自動でビルドされる

※時間がかかる場合があるので注意

プロ

ジェ

クト

Ｐｕ

ｓｈ

通知


カバ

レッ

ジデ

ータ




ビルドステータスバッジ

GitHub に Push した時にビルドが成功しているか確認したい！

GitHub だけで確認できたらいいね



ビルドステータスをクリック

Travis CISite


. README.md に貼りつけるためmd(Mark Down) の記述を

コピーする

ビルドステータスバッジGitHubSite

[README.md] クリックし、編集する

README.md 編集

[Edit] をクリック


Travis-ci でコピーした .md 用のビルドステータスバッジを貼りつける

行末にスペース 2　で改行になる


[Commit Changes]をクリックして



ビルドステータスバッジが表示される

Travisでいつでも

ビルドとテストが走るようになったよ

１０合目


Travis CI の設定



Pom.xml 作成


First Push

CoverAlls の設定

CoverAlls の設定


COVERALLS

テストのカバー率を計測してくれるサービス。



ビルド時にカバレッジも確認しよう！

流れ COVERALLS にサインイン COVERALLS セットアップ Maven POM の編集ローカルテスト実行 COVERALLS でカバレッジ確認

目的ビルドとテストを自動で行ってカバレッジを計測するサービスを体験する

COVERALLS

COVERALLS

のセットアップを行い

カバレッジデータを

表示してみよう

10 min

CoverAlls にサインイン CoverAllsSite

[Sign in with GitHub]をクリックして

GitHub のアカウントでサインインする

CoverAlls のサービスフックの有効化

[Allow Access] をクリック

Coveralls が GitHub にアクセスすることを許可

サービスフックの設定画面に遷移する

GitHub Site

Github リポジトリ追加

[ADD REPO] をクリック

リポジトリを追加する

Coveralls を有効にする

[ON] をクリック対象リポジトリで

CoverAlls を有効にする

プロ

ジェ

クト

Ｐｕ

ｓｈ

通知


カバ

レッ

ジデ

ータ




GitHub から Pull する



com

mit

pushfetch

pullpull

自分の PC

github

GitHub から Pull する（ Eclipse）

[チーム ] – [ プル ]

GitHub 上で編集したのでリモートリポジトリとローカルリポジトリを同じ状態にする

Maven POM の編集

Second pom.xmlGist

pom.xml 編集

JUnit

Junit 実践入門テストコードの書き方

テストファーストMaven の設定

カバレッジの計測継続的インテグレーション

POM の更新

[Maven] –[ プロジェクトの更新 ]

pom.xml の編集内容をプロジェクトに反映する

POM　 plugin execution エラー回避

上から 2番目のリンクを選択する

Maven build構成

[ 実行 ]->[Maven build(*)…]“…” がついてるメニューを選ぶ

プラグインのゴール設定

clean jacoco:prepare-agent test jacoco:report

Maven goalGist

[ゴール ] を設定

[ 実行 ] をクリック

レポートを見てみよう！

[ リフレッシュ ] を選択し、 [target] フォルダに[site] が作成されている

ことを確認する

Index.html

パッケージエクスプローラーのIndex.html 上で右クリック

メニューの [ 次で開く ] – [Web ブラウザー ]

を選択する

Jacoco レポート

GitHub に Push する



com

mit

pushfetch

pullpull

自分の PC

github

GitHub に Push する（ Eclipse）

[チーム ] – [ コミット ]

編集内容をコミットしてGitHub へプッシュ！

GitHub に Push する（ Eclipse）

コミットメッセージ“Update pom.xml for Jacoco

and Coveralls”を入力

[Commit and push]

[pom.xml] にチェックが入っていることを確

認

カバレッジステータスバッジ

カバレッジのステータスを GitHub 上でも常に見たい！

カバレッジステータスバッ

ジ


. README.md に貼りつけるためmd(Mark Down) の記述をコピーする

CoverAllsSite

カバレッジステータスバッジ GitHubSite

[README.md] をクリックし編集

README.md 編集

[Edit] をクリックし編集


COVERALLS でコピーした .md 用のカバレッジステータスバッジを貼りつけ

る


[Commit Changes]をクリックして



カバレッジステータスバッジが表示される

COVERALLS を覗いてみよう

ビルドごとのカバレッジが確認できる

CoverAllsSite

ファイルごとのカバレッジ

ビルドごとのカバレッジが確認できる

カバレッジ

テストしていないコードは赤

テストしたコードは緑

COVERALLSでいつでも

カバレッジデータを確認できるよ。

最後に本日学んだことの

振り返り

世の中には便利な

サービス , ソフトが

たくさん

今日もGitHub, Travis CI,

Coveralls, Gist, GitHubPages,

サイボウズ live, Maven, BootStrap

僕みたいな年よりが試す

より

中堅もっとトライ！

研修もやってね

N1 にもつかえる。（環境は先輩が整えよう）

コミットしたらメールがきて。作業状況も確認できる

CI は生産性上げて利益につなげる一つの手段

ここが楽しい！

このタイトルのスライドを随所

に織り込み楽しいポイントを紹

介してあげる！！

たとえばコミットメールとか！

Documents

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