Zenn
⚙️

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

2021/12/25に公開
CircleCI
Slack
tech

やりたいこと

CircleCI のJob の結果を Slack に通知することです。

こちらの記事を参考にさせていただきました。
[CircleCI Orbsで、jobの結果をslackに通知する]
(https://qiita.com/k_bobchin/items/11f0d778de09502de1f3#3-circleciconfigymlを設定)

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

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 の設定

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

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 の通知についての設定を抜粋すると以下のようになります。

# 省略

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">
出力する内容はプロジェクトの運用に合わせて設定してください。

以上になります。

GitHubで編集を提案

Discussion