CircleCI の Job の結果を Slack に通知する 

# やりたいこと
CircleCI のJob の結果を Slack に通知することです。

こちらの記事を参考にさせていただきました。
[CircleCI Orbsで、jobの結果をslackに通知する]
(https://qiita.com/k_bobchin/items/11f0d778de09502de1f3#3-circleciconfigyml%E3%82%92%E8%A8%AD%E5%AE%9A)

記事の流れどおりで作成してみた備忘録のようなものになります。

# Webhook URL の発行

CircleCI の対象のリポジトリから右上の「Project Settings」をクリックします。
<img width="1920" alt="qwerr.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/5565f83b-f2f2-3bcd-f5f7-4a5c60466928.png">

「Slack Integrations」を選択して、「Slack's CircleCI Integration page」のリンクをクリックします。
<img width="1458" alt="a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/7b73cbb4-b331-feca-e309-5ee1de954cfd.png">

通知したいルームを選択して（下の画像の右上）、「Add to Slack」をクリックする。
<img width="1454" alt="b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/6b8e026c-2a95-ab82-d237-bd0c2d8bd831.png">

通知するチャンネルを選択して、「Add CircleCI Integration」をクリックする。
<img width="1455" alt="c.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/9a72f4b3-2492-5b54-cbf8-2d6b75da6520.png">

URLが発行されるので確認して、一番下までスクロールして「Save Integration」をクリックする。
<img width="1453" alt="d.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/1ef91253-fd7f-d243-ad1f-7fe505d3ebda.png">
<img width="1456" alt="e.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/3c315b89-aa45-f9f7-75d8-67445c09c264.png">

これでURLが発行されました。

# Webhook URL の登録

先ほど表示したCircleCIの設定ページの「Add Webhook URL」をクリックします。
<img width="1458" alt="aa.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/2c647609-e136-1789-8693-46a4c796914e.png">

発行されたWebhook URLをコピーして貼り付けます。ここでは自動的に「SLACK_WEBHOOK」という環境変数名で登録されます。
<img width="552" alt="aaaa.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/ed4fd7ee-194e-43d5-7da3-b8550dbfa01e.png">

# Slack Ords の確認

「Add Slack Ord」をクリックします。
<img width="1064" alt="qwww.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/387c030c-f84b-04ec-d193-5074fd189dca.png">

以下のような画面に遷移します。
<img width="1255" alt="12334.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/ccb28e02-34ee-75bb-ff27-81f697342e36.png">

Slack Orb の使用の仕方が記述されているので、ここをみながら `.circleci/config.yml` の設定を行っていきます。

ちなみに Ords を使用すると `.circleci/config.yml` の記述量が減り、簡単に実装できるということなので、CircleCI 2.1 以上であれば積極的に使用した方がいいものらしいです。

# .circleci/config.yml の設定

今回は以下のように設定ました。

```yml
version: 2.1

executors:
  default:
    working_directory: ~/workspace
    docker:
      - image: node:12

orbs:
  slack: circleci/slack@3.4.2

commands:
  restore_npm:
    steps:
      - restore_cache:
          name: Restore npm dependencies
          key: npm-{{ checksum "package.json" }}

  save_npm:
    steps:
      - save_cache:
          name: Cache npm dependencies
          key: npm-{{ checksum "package.json" }}
          paths:
            - ~/workspace/node_modules

jobs:
  build:
    executor: default
    steps:
      - checkout
      - restore_npm
      - run:
          name: Install dependencies
          command: npm install
      - run:
          name: Lint
          command: npm run lint
      - run:
          name: Build
          command: npm run build
      - run:
          name: Test
          command: npm run test:unit
      - save_npm

  deploy:
    executor: default
    steps:
      - checkout
      - restore_npm
      - run:
          name: Build
          command: npm run build
      - run:
          name: Check dist
          command: ls -la dist
      - run:
          name: Deploy to Firebase Hosting
          command: ./node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN
      - slack/status:
          success_message: ':ok:\nRepository: $CIRCLE_PROJECT_REPONAME\nBranch: $CIRCLE_BRANCH\nPull Requests: $CIRCLE_PULL_REQUESTS\nDeploy Success!'
          failure_message: ':ng:\nRepository: $CIRCLE_PROJECT_REPONAME\nBranch: $CIRCLE_BRANCH\nPull Requests: $CIRCLE_PULL_REQUESTS\nDeploy Failure!'
          webhook: "${SLACK_WEBHOOK}"

workflows:
  push-build:
    jobs:
      - build
      - deploy:
          requires:
            - build
          filters:
            branches:
              only: master
```

Orb の使い方は `orbs:` で `Orb名`: `使用するOrb@タグ名` と記述して、 Job で `Orb名/xxx` と記述すれば Orb 側で定義してある `xxx` コマンドが実行できます。

また circleci/slack@3.4.2v で使えるコマンドは以下の通りです。

- approval: Notify Slack about an awaiting approval job.
- notify: Notify a Slack channel with a custom message.
- status: Send a status alert at the end of a job based on success or failure. Must be the last step in a job.

今回は `status` を使用します。 
`status` は Job が `成功` or `失敗` に応じてアラートを通知するコマンドです。

Slack の通知についての設定を抜粋すると以下のようになります。

```yml
# 省略

orbs:
  slack: circleci/slack@3.4.2

# 省略

jobs:
# 省略
  deploy:
    executor: default
    steps:
      - checkout
      - restore_npm
      - run:
          name: Build
          command: npm run build
      - run:
          name: Check dist
          command: ls -la dist
      - run:
          name: Deploy to Firebase Hosting
          command: ./node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN
      - slack/status:
          success_message: ':ok:\nRepository: $CIRCLE_PROJECT_REPONAME\nBranch: $CIRCLE_BRANCH\nPull Requests: $CIRCLE_PULL_REQUESTS\nDeploy Success!'
          failure_message: ':ng:\nRepository: $CIRCLE_PROJECT_REPONAME\nBranch: $CIRCLE_BRANCH\nPull Requests: $CIRCLE_PULL_REQUESTS\nDeploy Failure!'
          webhook: "${SLACK_WEBHOOK}"

# 省略
```

今回の場合は `deploy` の Job が `成功` or `失敗` に応じて `- slack/status:` 以下の `success_message` or `failure_message` で定義したメッセージが Slack に通知されます。

ちなみに、いろいろ実験した結果、`- slack/status:` の直前の Step でなくても、Job で定義された Step のどこか一箇所でも失敗していると `failure_message` が飛ぶようになっているみたいです。

実際に通知した例は以下のようになります。
<img width="637" alt="1233444.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/1d850841-88ea-20db-25da-e6afc9dc8f55.png">
出力する内容はプロジェクトの運用に合わせて設定してください。

以上になります。