깃허브 활동 알림 자동화: Slack + Github Actions

상황

총대마켓 서비스를 개발할 당시 깃허브 활동을 슬랙에 알리는 기능이 구현되어있지 않아, 매번 팀원들에게 리뷰를 부탁한다는 메시지를 전송하거나 다른 팀원의 PR을 리뷰한 후 일일이 완료했다는 댓글을 달아야 했습니다. 그래서 이번에 개발하는 서비스 편히타에서는 이러한 불편함을 개선해야겠다 생각했고 깃허브 활동 알림을 자동화하고자 하였습니다.

 

그러나 슬랙 알림봇에 대한 반대 의견도 존재했습니다. 불필요한 알림을 많이 수신할수록 알림에 무뎌진다는 의견입니다. 이 의견에도 크게 공감하여 단점을 보완하고자 알림이 필요한 활동을 기반으로 슬랙 봇을 커스텀하여 저만의 슬랙 알림봇을 만들었습니다!

 

 

구현

크게 세가지 과정을 거쳤습니다.

1. 알림을 전송하는 슬랙 앱 만들기
2. 깃허브와 슬랙 앱 연결하기
3. Github Actions로 알림 전송 스크립트 작성하기

 

1. 알림을 전송하는 슬랙 앱 만들기

슬랙에 알림을 보내려면 알림을 보낼 주체가 필요합니다. 그러기 위해서는 슬랙 내부의 앱이 필요한데 보통 Github 앱을 기본으로 사용합니다. 하지만 이 앱은 방대한 정보를 알려 사용자들은 결국 이 알림에 무뎌집니다. 따라서 저는 Github 앱이 아닌 커스텀 가능한 새로운 앱을 만들기로 하였고, 만드는 방법은 아래와 같습니다.

 

Slack API에 접속하여 앱을 생성합니다. 아래 화면이 뜨면 From scratch를 선택합니다.

 

그럼 아래와 같이 기본 정보가 자동으로 생성됩니다.

 

Settings > Basic Information 탭에서 Display Information을 설정하여 슬랙에서 표시될 프로필을 만들어줍니다.

Slack API 설정(왼쪽)을 통해 슬랙에서의 앱 프로필 생성(오른쪽)

 

Features > OAuth & Permissions 탭에서 Scopes를 설정하여 앱의 권한을 설정해줍니다. 저는 이 앱이 슬랙에서 메시지를 전송할 수 있도록 아래의 권한을 부여해주었어요.

 

그 후 슬랙에서 생성한 앱의 webhook을 생성해줍니다. Features > Incoming Webhooks 탭에서 아래 토글을 활성화한 후 Add New Webhook to Workspace 버튼을 클릭합니다.

 

그럼 아래와 같이 봇 사용자(bot user)를 생성하라는 메시지가 나오는데요.

 

이를 해결하기 위해 Features > App Home 탭에서 App Display Name을 설정해줍니다.

 

그 후 위 로직을 다시 시도하면 저희의 슬랙 앱에 webhook이 성공적으로 만들어집니다! 두둥

 

마지막으로 알림을 전송할 슬랙 채널에 앱을 추가해주면 슬랙에서의 설정은 끝입니다!

 

 

2. 깃허브와 슬랙 앱 연결하기

슬랙에서 앱을 만들었으니 이제 깃허브에 연결합시다. 이때 사용되는 것이 위에서 열심히 만든 webhook인데요.

 

본인의 깃허브 레포지토리 Settings > Webhooks 탭에서 Add Webhook 버튼을 클릭하여 webhook을 등록합니다. Payload URL란에는 1번 단계에서 만들어둔 슬랙 앱 webhook의 URL을 입력하고 나머지 칸은 아래와 같이 설정해주세요.

 

이제 깃허브에 webhook을 성공적으로 연결하였습니다!

 

3. Github Actions로 알림 전송 스크립트 작성하기

이제 스크립트를 작성하여 슬랙에 표시될 알림을 디자인하고 전송해봅시다. 슬랙에 표시될 알림은 Slack Block Kit Builder에서 직접 디자인하였습니다. (원하시면 가져다 사용하셔도 되지만 그닥 퀄리티가 높진 않음) 알림을 전송할 트리거는 (1) PR이 생성될 경우와 (2) PR에 리뷰가 작성될 경우로 기획하였고, 첫번째 트리거에 대한 스크립트는 아래와 같이 작성하였습니다.

name: 새로운 PR 생성 시 슬랙에 알림 보내기

on:
  pull_request:
    types: [ opened, reopened ]

jobs:
  notify:
    runs-on: ubuntu-latest
    steps:
      - name: 슬랙에 알림 전송
        uses: slackapi/slack-github-action@v1.23.0
        with:
          channel-id: ${{ secrets.SLACK_CHANNEL_ID }}
          payload: |
            {
              "blocks": [
                {
                  "type": "section",
                  "text": {
                    "type": "mrkdwn",
                    "text": "🆕 *새로운 PR이 작성되었습니다* 🆕"
                  }
                },
                {
                  "type": "divider"
                },
                {
                  "type": "section",
                  "text": {
                    "type": "mrkdwn",
                    "text": "*PR 제목:* ${{ github.event.pull_request.title }}"
                  },
                  "accessory": {
                    "type": "button",
                    "text": {
                      "type": "plain_text",
                      "text": "PR 확인",
                      "emoji": true
                    },
                    "url": "${{ github.event.pull_request.html_url }}",
                    "action_id": "button_click"
                  }
                },
                {
                  "type": "divider"
                }
              ]
            }
        env:
          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}

 

두번째 트리거인 리뷰 작성 시 알림을 전송하는 스크립트는 아래와 같이 작성하였습니다.

name: 새로운 리뷰 생성 시 슬랙에 알림 보내기

on:
  pull_request_review:
    types: [ submitted ]

jobs:
  notify:
    runs-on: ubuntu-latest
    steps:
      - name: 환경변수 설정
        run: |
          BODY=$(echo "${{ github.event.review.body }}" | sed ':a;N;$!ba;s/\r//g;s/\n/\\n/g')
          echo "BODY=$BODY" >> $GITHUB_ENV
          echo "URL=${{ github.event.review.html_url }}" >> $GITHUB_ENV

      - name: 슬랙에 알림 전송
        uses: slackapi/slack-github-action@v1.23.0
        with:
          channel-id: ${{ secrets.SLACK_CHANNEL_ID }}
          payload: |
            {
              "blocks": [
                {
                  "type": "section",
                  "text": {
                    "type": "mrkdwn",
                    "text": "💬 *새로운 리뷰가 작성되었습니다* 💬"
                  }
                },
                {
                  "type": "divider"
                },
                {
                  "type": "section",
                  "text": {
                    "type": "mrkdwn",
                    "text": "*PR 제목:* ${{ github.event.pull_request.title }}"
                  },
                  "accessory": {
                    "type": "button",
                    "text": {
                      "type": "plain_text",
                      "text": "PR 확인",
                      "emoji": true
                    },
                    "url": "${{ env.URL }}",
                    "action_id": "button_click"
                  }
                },
                {
                  "type": "section",
                  "text": {
                    "type": "mrkdwn",
                    "text": "\n${{ env.BODY }}"
                  }
                },
                {
                  "type": "divider"
                }
              ]
            }
        env:
          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}

 

실제 코드는 아래 레포지토리에 있습니다.

chore: 슬랙 알림봇 Github Actions 스크립트 작성 (#3) · 2zride/easy-ride@204742f

 

 

> 시크릿 필드 설정 방법

위 스크립트에서는 두가지 시크릿 필드가 필요합니다. 시크릿 필드는 깃허브 레포지토리 Settings > Secrets and variables > Actions 탭에서 설정하며, 초록색 버튼을 클릭하여 시크릿 정보를 생성합니다.

1. SLACK_CHANNEL_ID

슬랙 채널 ID는 알림을 전송할 채널의 세부 정보 중 가장 아래 채널 ID를 복사합니다.

2. SLACK_BOT_TOKEN

슬랙 봇 토큰은 Slack API 페이지의 Settings > Install App 탭에서 확인하였습니다.

 

 

결론

총 두개의 트리거를 기반으로 깃허브 활동 알림을 입맛에 맞게 자동화하였습니다.

새로운 PR이 작성되었을 때 전송되는 알림

새로운 리뷰가 작성되었을 때 전송되는 알림

 

앞으로 팀원과 함께 슬랙 알리미 앱을 사용해보면서 불편한 점이 있으면 차차 개선해나갈 예정입니다. 슬랙 무료 버전에서만 30일간 사용할 수 있다는 소식을 방금 접해 슬프긴 하지만요. 그래도 앞으로 어떤 슬랙봇이든 만들 수 있다는 생각에 한층 더 성장한 기분이 듭니다 👊