circle ciで結果をslackに通知してみる
TRANSCRIPT
![Page 1: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/1.jpg)
CircleCIで結果をSlackに通知してみる
2017.2.9 CI/CD Night
![Page 2: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/2.jpg)
自己紹介
中平 祐介
株式会社チームスピリット
サーバサイドの開発が中心
CI関係はほとんど触ったことがないです
https://github.com/yNakahira
![Page 3: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/3.jpg)
弊社の開発
![Page 4: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/4.jpg)
開発者 レビュアー
• チケットベースで開発• レビュアーにPRでレビュー依頼
レビューお願いします
![Page 5: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/5.jpg)
開発者 レビュアー
(lintエラー出てるじゃん・・))
レビューお願いします
![Page 6: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/6.jpg)
最近の悩み
• レビュー時にLintエラーが見つかる
• 差し戻しが発生し時間がかかる
• そういったやり取りはなくしたい
![Page 7: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/7.jpg)
レビュアーが確認するときに
Lintエラーが発生していないか
一目でわかる方法はないか?
![Page 8: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/8.jpg)
CircleCIを使ってみる
• Github・bitbucket連携ができ、CIを実行できるサービス
• 1コンテナ無料(月1500分までが無料枠)
• Slack連携もある
![Page 10: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/10.jpg)
セットアップ• 「Add Project」から対象のリポジトリを選択
![Page 11: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/11.jpg)
これでリポジトリとの連携設定は完了
![Page 12: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/12.jpg)
セットアップ• circle.ymlの準備
• circle.ymlとは?• CircleCIでどんなテスト・環境を準備するかを記述
するファイル(YAML形式)
• テスト以外にもデプロイとかも記述できる
• リポジトリのルート直下に配置する必要がある
![Page 13: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/13.jpg)
circle.yml
![Page 14: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/14.jpg)
circle.yml
起動時のコマンドを記載
テスト時のコマンドを記載
テスト後のコマンドを記載
![Page 15: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/15.jpg)
package.json
• 今回はESLintの結果をHTMLで出力するために、eslint-html-reporterをインストール
![Page 16: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/16.jpg)
Pushしてみる
• 成功時
• 失敗時結果がレポート出力
![Page 17: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/17.jpg)
レポート出力結果
![Page 18: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/18.jpg)
PRにも通知される
![Page 19: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/19.jpg)
Slackとの連携
参考http://qiita.com/su-
kun1899/items/640f6fa8b48749396c16
• 10分もあれば設定可能です• Slackへの通知はFailed/Fixedのときのみを設定しました
![Page 20: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/20.jpg)
まとめ
• レビュアーもlintエラーが発生しているか一目で分かるようになった
• Slackにも通知されるため、レビューイも修正に早く着手できる
• circle.ymlのジョブ設定に慣れるまではTry&Error
でやっていたが、CircleCIのProject Settings >
Test Commandsからジョブ実行できる(らしいが試していない)
参考:http://in.fablic.co.jp/entry/circleci-tips
![Page 21: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/21.jpg)
これで当初の目的は達成できたが・・
![Page 22: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/22.jpg)
もう少しやってみる
• Lintエラーを直接PRにコメントしてくれる便利なパッケージ(saddler)があったので使ってみる
参考:https://github.com/packsaddle/ruby-saddler
http://qiita.com/noboru_i/items/2f30296db1c8a6dfbd9b
※今回はEslintに対応する形式で.shを書き換えました。完全に手柄の横取りです。
![Page 23: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/23.jpg)
run-eslint.sh
![Page 24: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/24.jpg)
run-eslint.sh
必要となるモジュールをインストール
Masterブランチとの差分を取得し、差分に対してeslintを実行する。SaddlerがGithubのPRにlint結果を自動でコメント
![Page 25: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/25.jpg)
circle.yml
shを実行する権限を付与し、shを実行
![Page 26: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/26.jpg)
CircleCIに環境設定を行う
• GitHubの“Personal Access Tokens”でCircleCIからコメントするために必要となるトークンを作成
• 対象プロジェクトの設定画面より、"Environment
variables"を選択、下記を設定する。• Name: GITHUB_ACCESS_TOKEN
• Value: 上で作成したトークン
![Page 27: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/27.jpg)
Pushしてみる
Lintエラーを直接コメントしてくれる
![Page 28: Circle ciで結果をslackに通知してみる](https://reader031.vdocuments.site/reader031/viewer/2022021813/58cf35e91a28ab00168b641d/html5/thumbnails/28.jpg)
今度こそまとめ
• PRに直接コメントされるので、CI環境をいちいち確認しなくてもよくなった
• レビュアーが本質的なレビューに専念できる(たぶん)
• PRにコメントされるし、Slack連携いらないかも・・
• CIってやっぱり大事!!