CircleCIでRailsのテスト結果をSlackに通知してみた

# 概要
この度、仲間内でチームで自分たちのしているサークルのホームページを共同開発することになったのでcircleciのテスト結果をslackで表示させたいなと思い執筆することにしました。

# 流れ

1. slackにプロジェクト用のワークスペースとチャンネルを開設
2. slack api で通知用のAppを作成する
3. CircleCI の環境変数を設定する
4. CircleCI の設定ファイルを作成する

## 1. slackのワークスペース&チャンネル開設
まずは赤丸で囲まれている + ボタンより通知用のチャンネルを作成して下さい。
私の場合はカフェサークル用のプロジェクトなのでcafe-projectというチャンネル名にしてあります。
さらにciecleciのテスト結果を表示て着る用のチャンネルを作成しておきましょう。
公式だと`ciecleci-<name>`とするのがよいみたいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/900bb2ae-519f-16ab-8858-d24241008d14.png)

## 2. slack api で 通知用のAppの作成
[slack api](https://api.slack.com/apps)より通知用appを作成していきます。

まずは`Create New App`を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/b0f09779-b85a-14ac-9f21-7d5a390a9877.png)

すると、app名とどのworkspaceに通知を送るか選択する画面が出てくるので名前を自分で適当に設定し、workspaceには1で作成したworkspace名を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/83592949-fbb1-fa0c-bf28-c5e0079a79b3.png)

次にappに権限を与える画面に移ります。左のサイドバーから`OAuth & Permissions`という項目があるので選択してその中のScopusを以下の画面のように設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/5883ad50-e58a-df30-4c83-0bab5e2e7cb8.png)

その後`OAuth & Permissions`の選択画面のまま移動せずに`OAuth Tokens & Redirect URLs`という項目の中の`Install to Workspace`をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/f0a20b47-222b-865f-156b-d8779af1a149.png)

そうすると以下の画面のようにアクセストークンを取得することができるのでCopyをクリックして値を控えておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/def97a3c-1b9f-6169-a247-1126777a0c8a.png)

# 3. CircleCI の環境変数を設定する
次にCircleCIの環境変数を設定していきます。
[circleciホームページ](https://circleci.com/)のリンクに飛びGo to Appより自分のプロジェクトを選択します。
その後、

Project Settings → Environment Variable → Add Environment Variable

と選択していき`SLACK_ACCESS_TOKEN`と`SLACK_DEFAULT_CHANNEL`を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/1a5bc9fd-d0ea-cc5c-88d6-c40c60d3e372.png)

| 環境変数 | キー |
|:-:|:-:|
|  SLACK_ACCESS_TOKEN | 取得したアクセストークン  |
|  SLACK_DEFAULT_CHANNEL |  通知したいslackのチャンネルID |

slackのチャンネルIDを取得するにはslackのチャンネルを左クリックして`Copy link`を選択します。
コピーされたリンクの最後の大文字の英単語と数字の組み合わせの部分がチャンネルIDです。

```
https://{ワークスペース}.slack.com/archives/{チャンネルID}
```

# 4. CircleCI の設定ファイルを作成する

[[Rails] Rails6 × PostgresSQL × heroku × CircleCI の環境を0から作る方法の徹底解説！！](https://qiita.com/maru401/items/2f5815c40fcf6d2d80d6)の`7.CircleCIの設定`で設定したciecleciのファイルをベースに編集していきます。
最終的には以下のようになりました。

イメージとしてはorbsにslackのイメージを加えて、rspecの最後にpassしたときとfailしたときに通知が行くように設定を書いているという形になります。

```diff_javascript:.circleci/config.yml
version: 2.1

orbs:
  heroku: circleci/heroku@1.2.5
+  slack: circleci/slack@4.1

jobs:
  test_backend:
    docker:
    # dockerイメージで使っているrubyバージョンと一致させる
      - image: circleci/ruby:2.6.5-stretch-node
        environment:
          RAILS_ENV: test
          DB_USER: root
          DB_HOST: 127.0.0.1
          DB_PASSWORD: ''
      - image: circleci/postgres:9.6.2-alpine
        environment:
          POSTGRES_USER: root
          POSTGRES_DB: circleci_testdb
          POSTGRES_HOST_AUTH_METHOD: trust # パスワードなし

    working_directory: ~/repo

    steps:
      - checkout

      # restore gem from cache
      - restore_cache:
          keys:
            - gem-cache-v1-{{ checksum "~/repo/Gemfile.lock" }}
            - gem-cache-v1-
          working_directory: ~/repo

      # gem install
      - run:
          command: |
            gem install bundler
            bundle config set path 'vendor/bundle'
            bundle install --jobs=4 --retry=3
          working_directory: ~/repo

      - save_cache:
          key: gem-cache-v1-{{ checksum "~/repo/Gemfile.lock" }}
          paths:
            - ~/repo/backend/vendor/bundle
          working_directory: ~/repo

      # Database setup
      - run:
          command: bundle exec rails db:create
          working_directory: ~/repo
      - run:
          command: bundle exec rails db:migrate
          working_directory: ~/repo
      - run:
          command: bundle exec rails db:seed
          working_directory: ~/repo

      - run:
          name: yarn Install
          command: yarn install

      - run:
          command: bundle exec bin/webpack
          working_directory: ~/repo

      - run:
          name: create directory to store test results
          command: mkdir /tmp/test-results
          working_directory: ~/repo

      # run tests
      - run:
          name: RSpec
          command: |
            bundle exec rspec --profile 10 \
                              --format RspecJunitFormatter \
                              --out test_results/rspec.xml \
                              --format progress \
                              $(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)
          working_directory: ~/repo

      # collect reports
      - store_test_results:
          path: /tmp/test-results
      - store_artifacts:
          path: /tmp/test-results
          destination: test-results
      - store_artifacts:
          path: /home/circleci/repo/tmp/screenshots

      # slack notify
+      - slack/notify:
+          event: fail
+          template: basic_fail_1
+      - slack/notify:
+          event: pass
+          template: success_tagged_deploy_1

  deploy:
    executor: heroku/default
    steps:
      - checkout
      - heroku/install
      - run:
          name: Storing previous commit
          command: |
            git rev-parse HEAD > ./commit.txt
      - heroku/install
      - setup_remote_docker:
          version: 18.06.0-ce
      - run:
          name: Pushing to heroku registry
          command: |
            heroku container:login
            heroku container:push web -a $HEROKU_APP_NAME
            heroku container:release web -a $HEROKU_APP_NAME
      - run:
          name: db  migration
          command: |
            heroku run rails db:migrate --app ${HEROKU_APP_NAME}

+      # slack notify
+      - slack/notify:
+          event: fail
+          template: basic_fail_1
+      - slack/notify:
+          event: pass
+          template: success_tagged_deploy_1



workflows:
  version: 2
  test:
    jobs:
      - test_backend:
          filters:
            branches:
              ignore: master
  deploy:
    jobs:
      - deploy:
          # masterブランチへのpushでのみ反応
          filters:
              branches:
                  only:
                  - master

```

テストが通っていることを確認したことを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/ba8a9c02-0624-465f-6f35-3bc4ec552d7e.png)

その後、slackを確認しに行くと無事にslackにメッセージが送られてきているを確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/c799477a-c15a-9d0d-b728-e77b056da230.png)

ここまでお疲れさまでした！

自分のプロジェクトにslackの通知を取り入れて見ては如何でしょうか？

# 参考文献
1. slackの設定方法
[slack-orb SETUP](https://github.com/CircleCI-Public/slack-orb/wiki/Setup)

2. slack orbsのコードの書き方
[circleci/slack@4.3.1](https://circleci.com/developer/orbs/orb/circleci/slack)