tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>＼(＾o＾)／

【CircleCI】CircleCI 2.0からはじめる個人での簡単なCI導入方法 - Build結果をSlack通知

CircleCI CI slack github

はじめに

仕事でcircleciをなんとなーく使っていますが 使いこなしたくなったので改めて個人でもいろいろ試してみるメモです。

githubとの基本的な連携は以下に記載してますのでご参考ください 【CircleCI】CircleCI 2.0からはじめる個人での簡単なCI導入方法 - githubとの連携まで

アジェンダ

  1. Githubと連携する
  2. Slackへ通知する方法の簡単な説明
  3. SLackへ通知する - Incoming WebHooks
  4. Slackへ通知する - CircleCI

1. Githubと連携する

まず、githubにpush(pull request)して、
build結果をSlack通知する流れをものすごくはしょって説明します。

f:id:tweeeety:20180502182937p:plain

  1. 人が、ローカルにてgithubにpushする（pull request）
  2. githubが、pushをトリガーにCircleCIにbuild requestを送る
  3. CircleCIが、コンテナを立ちあげてyamlファイルに従ってbuildを実行する
  4. CircleCIが、結果をgithubに通知する
  5. CircleCIが、結果をslackに通知する
  6. Slackが、人のPCにNotificationする（そういう設定してればですが）
  7. 人が、通知を受けてgithubを見に行く（と、結果が出てる）

1〜4については、github<->CircleCIの基本的なci設定のため今回の通知そのものとは関係ありません。

という事で、今回は 5. CircleCIが結果をslackに通知 の部分についてになります。

補足

基本的なci設定

冒頭にも記載しましたが、基本的な連携については以下をご参考ください 【CircleCI】CircleCI 2.0からはじめる個人での簡単なCI導入方法 - githubとの連携まで

サンプルリポジトリ

今回は、pushするリポジトリとして以下を用意しました。
https://github.com/tweeeety/go-test-circleci-slack-sample

前準備

また、github<->circleCIでciを回すための基本的な連携は終わっている状態です
f:id:tweeeety:20180502183314p:plain

2. Slackへ通知する方法の簡単な説明

CircleCIからSlackへ通知する方法は以下の2通りあります（201804現在）

  1. Incoming WebHooksを使う
  2. CircleCIアプリを使う

どうやって通知するの？

両者、基本的に通知方法はほとんど変わりません。
基本的には以下のような仕組みです。

  • Slackアプリ設定画面でWeb Webhook URLが発行される
    • このとき通知先チャンネルも指定する
  • CircleCIにWeb Webhook URLを登録する
  • CircleCIがbuild後にWeb Webhook URLに対して通知を送る

どうちがうの？

Slackに通知するという点においては、使ってみた感じほとんど違いはありません。
CircleCIアプリの方が、デフォルトでCircleCIからの通知だよというアイコンやらが設定されているのでめんどくさがり屋さんには良いと思います。

3. SLackへ通知する - Incoming WebHooks

簡単ではありますが、Incoming WebHooks での通知設定を参考程度に載せておきます。

Slack側での設定

https://<チーム名>.slack.com/apps を開きます
f:id:tweeeety:20180502183416p:plain

アプリの検索フォームにWebHooksなどをいれるとIncoming WebHooksが表示されるので選択します。
f:id:tweeeety:20180502183427p:plain

Incoming WebHooks画面にてAdd Configurationを選択します。
f:id:tweeeety:20180502183437p:plain

Incoming WebHooksの設定画面が開くので、
通知するチャンネルを選択してAdd Incoming WebHooks integrationを押します
f:id:tweeeety:20180502183450p:plain

設定画面にて、Webhook URL が発行されます。
これを後で使うのでコピるなり画面を開いておくなりします。
f:id:tweeeety:20180502183501p:plain

そのまま画面下にいってSave Settingで完了です。 f:id:tweeeety:20180502183518p:plain

CircleCI側での設定

project（リポジトリ）のbuildページで設定的なアイコンをクリックして設定画面を開きます。
f:id:tweeeety:20180502183532p:plain

NOTIFICATIONS > Chat Notificationsを開きます f:id:tweeeety:20180502183559p:plain

Slackの枠があるのでWebhook URLに
先ほど発行したsitaWebhook URLを入力してSaveします。
f:id:tweeeety:20180502183613p:plain

ためしに＆Test Hookを押すと、Slack側にこんな感じで通知されると成功です。
f:id:tweeeety:20180502183625p:plain

pull requestを送ってみる

ローカル

ローカルで適当に修正してpush します

# 適当にブランチ切っておく
$ git checkout -b notify-sample

# 適当に修正してpush
$ vi なにかしら適当に修正
$ git add .
$ git commit -m 'notify sample pull request'
$ git push origin notify-sample
circleci

#2としてbuildが走ります f:id:tweeeety:20180502183909p:plain

slack

buildが終わると通知されます f:id:tweeeety:20180502183918p:plain

4. Slackへ通知する - CircleCI

全体的に基本的な流れはIncoming WebHooksと変わりありませんが、
Slack側のみ説明しておきます。

Slack側での設定

探すアプリをIncoming WebHooksではなくCircleCIで検索します。
f:id:tweeeety:20180502183933p:plain

CircleCIアプリが開くのでInstallを押します f:id:tweeeety:20180502183947p:plain

チャンネルを選択してAddCircleCI Integrationを押します f:id:tweeeety:20180502183959p:plain

Incoming WebHooksと同様に
Webhook URLが発行されるのでSave Integrationを押して設定完了です。

CircleCI側での設定

CircleCI側については、Incoming WebHooksとまったく同じ手順です。

pull requestを送ってみる

これもIncoming WebHooksとまったく同様です。

おわり

SlackもCircleCIもWebから操作できるので楽チンです！
enjoy！＼(＾o＾)／