Github Actionsを使ってSlackにいい感じにSuccess, Failを送る

はじめに

Github Actionsを使ってPRのタイミングでテストが通ったか落ちたかの判定をしたい。
Github ActionsのSlack連携が日本語であまり見つからなかったので、後に続く人のためにこの記事を残そうと思う。
※Deployは含まれておりません。

---

対象となる読者

Github Actions でCI/CDにライトにトライしたい方。

---

大まかな手順

• 対象のGithubリポジトリ作成
• .github/workflows/pullrequest.ymlを準備 (ymlのファイル名は何でも良い)
• Slack Appsの作成
• pullrequest.ymlと作成したSlack APP(Github Actions)の連携

ymlにはMarketplaceから以下の2つを導入しました。
GitHub Action for Yarn
Post Slack messages

---

ymlの設定(Slack連携前)

図のようにリポジトリのActionタブから直接作成可能ですが、今回はローカルで作成しました。

.github/workflows/pullrequest.yml を作成

pullrequest.yml

# This is a basic workflow to help you get started with Actions

name: Pull request CI

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  pull_request:
    branches:
      - master
      - develop

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  build:
    name: Build & Test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: borales/actions-yarn@v2.0.0
        name: yarn install
        with:
          cmd: install # will run `yarn install` command
      - uses: borales/actions-yarn@v2.0.0
        name: yarn build
        with:
          cmd: build # will run `yarn build` command
      - uses: borales/actions-yarn@v2.0.0
        name: yarn run check
        with:
          cmd: run check # will run `yarn run check` command
      - uses: borales/actions-yarn@v2.0.0
        name: yarn run lint
        with:
          cmd: run lint # will run `yarn run lint` command

確認したいのは Build と Prettier でのフォーマッティングと ESLint でのLint。
ちなみに、コマンドのscriptは以下の通りです(一部抜粋)

package.json

  "scripts": {
    "build": "yarn build",
    "check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "lint": "eslint 'src/**/*.js*'",
  }

実際にPRを出してみて、Github Actionsが正常に動いているか確認を行います。

Slack Apps の作成

Slack api から Create New App を選択する。

App Name と Workspace を選択して Create App する。(App Nameは何でもokですがここではGithub Actionsとしています）

Iconは適宜入れてあげましょう。

Iconは slack-action のリポジトリから取得出来ます。

Install App to Workspace から作成した Github Action を接続します。
※APPをはじめて作成した場合は、 OAuth & Permissions > Scopes が記入されていないので、AppのInstallが出来ません。Scopeを追加しましょう。
ちなみに、ここの Bot Scope Token は色々選択出来ますが、 chat:write がないとGithub ActionsでSlackに通知が送れないので入れ忘れに注意。

対象のSlackチャンネルに Slack Appをinviteする

#app_nameはあなたが付けたAppの名称
/invite @app_name

Slack Apps と Github Actions の連携

pullrequest.yml に以下の記述を追加します。

pullrequest.yml

      # When test fail
      - name: Notify slack
        if: failure()
        env:
          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
        uses: pullreminders/slack-action@master
        with:
          args: '{\"channel\":\"SLACK_CANNEL_ID\",\"attachments\":[{\"color\":\"#F32013\",\"blocks\":[{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"*PR Fail:* ${{ github.event.pull_request.title }}\"}},{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"*Who?:* ${{ github.event.pull_request.user.login }}\n*Request State:* ${{ github.event.pull_request.state }}\"}},{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"<${{ github.event.pull_request.html_url }}|View Pull Request>\"}}]}]}'

      # When test pass
      - name: Notify slack
        if: success()
        env:
          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
        uses: pullreminders/slack-action@master
        with:
          args: '{\"channel\":\"SLACK_CANNEL_ID\",\"attachments\":[{\"color\":\"#2eb886\",\"blocks\":[{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"*PR Success:* ${{ github.event.pull_request.title }}\"}},{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"*Who?:* ${{ github.event.pull_request.user.login }}\n*Request State:* ${{ github.event.pull_request.state }}\"}},{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"<${{ github.event.pull_request.html_url }}|View Pull Request>\"}}]}]}'

SLACK_CANNEL_ID: ブラウザでSlackのチャンネルにアクセスした時の最後の/以下の文字
SLACK_BOT_TOKEN: Slack Appの Bot User OAuth Access Token > Bot User OAuth Access Token の値

argsでSlackにどのようなフォーマットで送るか詳しく編集出来ます。

参照:
1. Block Kit
2. Github Actionsコンテキストの構文

SLACK_BOT_TOKENをGithubで設定

Setting > Secret から SLACK_BOT_TOKENを登録します。

Slackの通知結果

テストが通った場合と落ちた場合が色分けして出力されます。

最終コード↓

pullrequest.yml

# This is a basic workflow to help you get started with Actions

name: Pull request CI

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  pull_request:
    branches:
      - master
      - develop

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  build:
    name: Build & Test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: borales/actions-yarn@v2.0.0
        name: yarn install
        with:
          cmd: install # will run `yarn install` command
      - uses: borales/actions-yarn@v2.0.0
        name: yarn build
        with:
          cmd: build # will run `yarn build` command
      - uses: borales/actions-yarn@v2.0.0
        name: yarn run check
        with:
          cmd: run check # will run `yarn run check` command
      - uses: borales/actions-yarn@v2.0.0
        name: yarn run lint
        with:
          cmd: run lint # will run `yarn run lint` command

      # When test fail
      - name: Notify slack
        if: failure()
        env:
          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
        uses: pullreminders/slack-action@master
        with:
          args: '{\"channel\":\"SLACK_CANNEL_ID\",\"attachments\":[{\"color\":\"#F32013\",\"blocks\":[{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"*PR Fail:* ${{ github.event.pull_request.title }}\"}},{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"*Who?:* ${{ github.event.pull_request.user.login }}\n*Request State:* ${{ github.event.pull_request.state }}\"}},{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"<${{ github.event.pull_request.html_url }}|View Pull Request>\"}}]}]}'

      # When test pass
      - name: Notify slack
        if: success()
        env:
          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
        uses: pullreminders/slack-action@master
        with:
          args: '{\"channel\":\"SLACK_CANNEL_ID\",\"attachments\":[{\"color\":\"#2eb886\",\"blocks\":[{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"*PR Success:* ${{ github.event.pull_request.title }}\"}},{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"*Who?:* ${{ github.event.pull_request.user.login }}\n*Request State:* ${{ github.event.pull_request.state }}\"}},{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"<${{ github.event.pull_request.html_url }}|View Pull Request>\"}}]}]}'

やったね！