초간단하게 Javascript로 코드리뷰 봇 만들기⛑️

[JUDONGHYEOK]

초간단 코드리뷰 봇 만들기

요약

• 스터디를 진행함에 있어서 코드리뷰할 때마다 리뷰이가 직접 슬랙 채널을 통해 리뷰어를 태그하면서 메시지를 보내는 불편함이 존재하였습니다.

• 리뷰어도 리뷰가 마치면 리뷰이가 전송해둔 메시지의 쓰레드로 이를 알리는 것에 불편함을 느꼈습니다.
• 이런 번거로움을 코드리뷰 봇을 통해 자동화하여 해결하고 추가로 Github과 Slack API에 대한 학습을 목적으로 코드리뷰 봇을 개발하게 되었습니다.

기능

현재 기능

• 리뷰이가 PR을 올릴 때 리뷰이와 리뷰어를 맨션하고 PR 링크가 포함된 메세지를 #0-리뷰요청 채널에 올린다. (MVP)

구조

Github에서 yml에 등록된 이벤트가 발생하면 Github API를 통하여 Slack의 Incoming Webhook으로 Post 요청을 전송합니다. 이를 받은 Slack이 리뷰요청 채널에 커스텀 된 메시지를 채널에 올립니다.

구현 과정

슬랙 채널에 Incoming Webhook 추가

우선 Incoming Webhook을 슬랙 채널에 추가해줍니다.

채널에 표시될 웹훅을 알맞게 꾸며줍니다. 메세지를 보낼 때도 이를 커스텀할 수 있습니다.
이 때 생성된 웹훅 URL을 github 시크릿키로 추가해줍니다.

Github Action 추가하기

우선 이벤트를 감지할 yml 코드를 먼저 작성해줍니다.

// 풀리퀘스트시 동작
on:
  pull_request:

jobs:
  request_review:
    runs-on: ubuntu-latest
    steps:
    // js 기반으로 동작하므로 node 설치 
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
    // Node 모듈에 대한 캐시 설정
      - name: Cache node modules
        uses: actions/cache@v4
        id: cache
        with:
          path: node_modules
          key: npm-packages-${{ hashFiles('**/package-lock.json') }}
    // 캐시 값을 확인하고 이에 따라 install
      - name: Install Dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: npm ci
    // 지정된 action 시작
      - name: Start PR actions
        id: extract
        uses: ./.github/actions/request_review
    // 시크릿키에 저장된 웹훅 URL 활용
        with:
          slack_url: ${{ secrets.SLACK_WEBHOOK_URL }}

.github/actions/request_review/action.yml(유지보수를 위해 모듈화)

name: "request-review"
description: "Request a review from a specific user on a pull request"

inputs:
  slack_url:
    required: true
// node20으로 해당 스크립트를 돌린다.
runs:
  using: "node20"
  main: "request_review.js"

.github/actions/request_review/request_review.js

import core from "@actions/core" ;
import { IncomingWebhook } from "@slack/webhook";
import github from "@actions/github";

// user 정보 관리 닉네임은 변경의 우려가 있어 고유 ID값 사용
const USERS = [
  {name:'김동완', slackID:"U06MGJUV5T6", githubID:77495584},
  {name:'박건규', slackID:"U06MXJEGBQ8", githubID:67491015},
 ...
];

try {
  const url = core.getInput("slack_url");
  const webhook = new IncomingWebhook(url);

  const send = async () => {
    webhook.send(
      {
        text: "PR이 도착했습니다.🫡",
        blocks: [
          {
            type: "header",
            text: {
              type: "plain_text",
              text: "PR이 도착했습니다.🫡",
              emoji: true
            }
          },
        ... 메세지
        ]
      },
      function (err, response) {
        console.log(response);
      }
    );
  };
  send();
} catch (error) {
  core.setFailed(error.message);
}

정상동작을 확인합니다.

추가 구현 기능 목록

• 유지보수를 위해 타입스크립트로 전환한다.
• 리뷰이와 리뷰어가 해당 메세지를 명확하게 알아차릴 수 있도록 메세지를 꾸민다.
• 리뷰어가 PR에 대해 리뷰를 완료하고 Request Changes 요청을 하면 이를 쓰레드나 메시지를 통해 리뷰이에게 알린다.
• PR을 올릴 때 스프레드 시트와 연동하여 해당 시트에 기입된 리뷰어를 자동 배정하고 이를 슬랙을 통해 알린다.
• 스케줄러를 활용하여 특정 날짜나 시간 주기로 시트의 리뷰어를 업데이트하고 이를 슬랙을 통해 알린다.
• 자동으로 githubID와 slackID를 매핑한 객체를 생성한다.

관련 문서

• https://docs.github.com/ko/actions/creating-actions/creating-a-javascript-action?learn=create_actions&learnProduct=actions
• https://docs.github.com/en/actions/learn-github-actions/contexts
• https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request
• https://api.slack.com/messaging/webhooks

[JUDONGHYEOK]

이슈정리

fork한 저장소에서 원본 저장소로 pull request를 전달할 경우 github secret을 사용할 수 없는 문제

• 현재 github 정책상 보안상의 이슈로 fork한 저장소에서는 원본 저장소의 github secret을 사용할 수가 없다.(관련링크)
• 해결방법
  1. 정책적으로 pr을 원본저장소에서만 보내도록 구성한다.
     • 보안적으로 가장 안전하지만 github을 처음 다뤄보는 구성원들의 특성상 코드 제출의 흐름이 바뀌면 미션 수행에
  2. pull_request_target 이벤트를 사용한다.(관련링크)
     • 보안적인 문제?(정확히 어떤 문제가 있을지 더 탐구 필요)가 있을 수도 있지만 해당 레포는 완전하게 public한 저장소가 아니라고 판단 되었고 사용되는 secret이 slack webhook url정도이기 때문에 큰 문제가 없을 것 같다.