CircleCIで結果をSlackに通知してみる

2017.2.9 CI/CD Night

自己紹介

中平 祐介

株式会社チームスピリット

サーバサイドの開発が中心

CI関係はほとんど触ったことがないです

https://github.com/yNakahira

弊社の開発

開発者 レビュアー

• チケットベースで開発• レビュアーにPRでレビュー依頼

レビューお願いします

開発者 レビュアー

（lintエラー出てるじゃん・・）)

レビューお願いします

最近の悩み

• レビュー時にLintエラーが見つかる

• 差し戻しが発生し時間がかかる

• そういったやり取りはなくしたい

レビュアーが確認するときに

Lintエラーが発生していないか

一目でわかる方法はないか？

CircleCIを使ってみる

• Github・bitbucket連携ができ、CIを実行できるサービス

• 1コンテナ無料(月1500分までが無料枠)

• Slack連携もある

セットアップ• https://circleci.comを開く

セットアップ• 「Add Project」から対象のリポジトリを選択

これでリポジトリとの連携設定は完了

セットアップ• circle.ymlの準備

• circle.ymlとは？• CircleCIでどんなテスト・環境を準備するかを記述

するファイル(YAML形式)

• テスト以外にもデプロイとかも記述できる

• リポジトリのルート直下に配置する必要がある

circle.yml

circle.yml

起動時のコマンドを記載

テスト時のコマンドを記載

テスト後のコマンドを記載

package.json

• 今回はESLintの結果をHTMLで出力するために、eslint-html-reporterをインストール

Pushしてみる

• 成功時

• 失敗時結果がレポート出力

レポート出力結果

PRにも通知される

Slackとの連携

参考http://qiita.com/su-

kun1899/items/640f6fa8b48749396c16

• 10分もあれば設定可能です• Slackへの通知はFailed/Fixedのときのみを設定しました

まとめ

• レビュアーもlintエラーが発生しているか一目で分かるようになった

• Slackにも通知されるため、レビューイも修正に早く着手できる

• circle.ymlのジョブ設定に慣れるまではTry＆Error

でやっていたが、CircleCIのProject Settings >

Test Commandsからジョブ実行できる(らしいが試していない)

参考：http://in.fablic.co.jp/entry/circleci-tips

これで当初の目的は達成できたが・・

もう少しやってみる

• Lintエラーを直接PRにコメントしてくれる便利なパッケージ(saddler)があったので使ってみる

参考：https://github.com/packsaddle/ruby-saddler

http://qiita.com/noboru_i/items/2f30296db1c8a6dfbd9b

※今回はEslintに対応する形式で.shを書き換えました。完全に手柄の横取りです。

run-eslint.sh

run-eslint.sh

必要となるモジュールをインストール

Masterブランチとの差分を取得し、差分に対してeslintを実行する。SaddlerがGithubのPRにlint結果を自動でコメント

circle.yml

shを実行する権限を付与し、shを実行

CircleCIに環境設定を行う

• GitHubの“Personal Access Tokens”でCircleCIからコメントするために必要となるトークンを作成

• 対象プロジェクトの設定画面より、"Environment

variables"を選択、下記を設定する。• Name: GITHUB_ACCESS_TOKEN

• Value: 上で作成したトークン

Pushしてみる

Lintエラーを直接コメントしてくれる

今度こそまとめ

• PRに直接コメントされるので、CI環境をいちいち確認しなくてもよくなった

• レビュアーが本質的なレビューに専念できる（たぶん）

• PRにコメントされるし、Slack連携いらないかも・・

• CIってやっぱり大事！！