[Zenhub - Slack 알리미] Issue 이동 알림 서비스

 

Zenhub 에서 제공해주는 api와 Aws Lambda를 활용해

칸반보드 이슈 파이프라인 이동 Slack 알림 서비스를 만들어보았던 것을 기록으로 남겨보았다. 

---

 

 

 

그게 무엇인가요?

 

Aws Lambda + Zenhub + Slack Webhook + Github Actions 를 연동한
젠허브 프로젝트 이슈 파이프라인 이동 Slack 알림 서비스

 

깃허브에서  Zenhub를 도입하여 칸반보드를 사용할 때 이슈의 이동에 대해 원하는 slack 채널에 알림을 줄 수 있는 기능을 만들었다.

 

 

 

왜 만들었나요?

 

 팀으로 깃헙과 깃플로우로 웹 프로젝트를 하게 되었는데 프론트/백엔드 저장소를 나누면서도 한번에 효과적으로 이슈 트래킹을 하기 위해 `Zenhub` 라는 툴을 사용하게 되었다.

 

 자체적으로 젠허브 칸반보드 활용에 대해 `Slack` 알림 서비스를 제공해주지만 불필요한 알림이 너무 많았고 커스터마이징도 불가능했다.

 

 

기본적으로 slack에도 Zenhub 앱이 있고 쉽게 저장소와 연동하여 메시지를 줄 수 있도록 해주지만 

 

모든 이슈 테마 이동. 심지어 단순한 이슈 순서 변경이나 작업 난이도 설정 기능인 estimate 변경 등 쓸데없는 부분까지 모두 알림이 가는데 이를 커스텀할 수 있는 기능이 없었다. 

 

Github Slack 앱은 명령어로 원하는 작업에 대해서만 알림을 줄 수 있게 기능을 제공했었는데.. 

 

우리 팀의 경우 PR에 대한 코드리뷰를 활용해야 했기 때문에 깃헙 관련 알림 뿐 아니라 이슈 이동 알림이 필요했으나

 

백로그나 새로운 이슈 하나하나 움직이는 것 까지에 대해서는 슬랙 채널이 지저분해지고 부담스럽기도 하여 알림이 필요없었으니 난처했다.

 

커스텀 통합 기능이 있고 해서 좀 찾아보니 운 좋게도 따로 이벤트 데이터를 제공해주는 기능이 있었고  

 

따라서 이를 활용해  Zenhub Api & Slack WebHooks과  Aws Lambda + Api Gateway 로  필요한 이슈 파이프라인의 이동에 대해서만 알림을 주는 기능을 만들어보았다.

 

 

 

 

개발과정 요약

 

(1) ZenHub Api 활용

 

앞서 언급하였듯 ZenHub 자체적으로 Slack에 직접 알림을 해주는 기능 뿐 아니라

 

WebHook으로 활용할 수 있게끔 개인의 ZenHub 사용 관련 이벤트 데이터를 제공해주는 API 가 있어 활용한다.

 

WEBHOOK이란? : 특정 이벤트 발생 시 타 서비스나 프로그램으로 알림을 보내는 기능을 말한다.

 

 

위의 이미지는 이슈 움직임에 대한 API이고 그 외에도 이슈 open/close 및 Estimate 관련 변경과 파이프라인 내부에서의 이슈 움직임에 대한 것도 API로 제공된다.

 

GitHub - ZenHubIO/API: Learn how to use ZenHub's API.

 

 

 

(2) WebHook 기능을 위한 Lambda API 소스코드 작성

 

 

자세한 코드는 아래의 깃허브 저장소 참조!

 

GitHub - pds0309/zen_slack_alert: Aws Lambda + Zenhub + Slack web hook 을 연동한 이슈 이동 알림 서비스

 

 

요약하면 여러 알림에 필요한 환경변수들을 커스터마이징 하여 원하는 이슈 파이프라인 이동에 대해서만 알림이 오게끔 사용할 수 있게 구성한 것이라고 할 수 있다.

 

함수는 Node.js 16.x 버전으로 작성하였고 젠허브 Api 데이터 fetch를 위해 Axios 라이브러리를 사용했다.

 

 

[필수 환경변수]
WEBHOOK_URL: 슬랙 WebHook URL 등록
ALERT_PIPELINES: 알림을 줄 이슈 파이프라인의 명칭

[선택 환경변수]

ALERT_PIPELINES_ALIAS: 파이프라인에 대한 별칭으로 ALERT_PIPELINES의 순서에 맞춰서 입력
REPO: 한 워크스페이스에 여러 리포지토리를 사용해서 구분을 주고 싶을 경우 입력
REPO_ALIAS: 각 저장소의 별칭

 

 

 

 

 

작성 후 Http 방식의 Api GateWay 를 만들어 이후 ZenHub API 데이터를 받을 엔드포인트의 역할을 하게끔 구성했다.

 

 

 

(3) Lambda API 와 Zenhub 저장소 연동

 

Lambda 함수로 ZenHub 이벤트 api 데이터를 얻어 올 수 있도록 api gateway 엔드포인트를 연결해준다.

 

Zenhub 콘솔에서 Slack이 아닌 Custom 방식으로 Integrations 설정을 해준다.

 

 

 

 

 

(4) Slack 채널과 연동

 

Slack에 Incoming WebHook(수신 웹 훅) 이라는 애플리케이션이 있다.

 

Sending messages using Incoming Webhooks

 

Incoming Webhook은 앱에서 Slack으로 메시지를 게시하는 간단한 방법입니다.

Incoming Webhook을 생성하면 메시지 텍스트 및 일부 옵션이 포함된 JSON 페이로드를 보낼 고유 URL이 제공됩니다.

Incoming Webhook과 함께 모든 일반적인 형식 및 레이아웃 블록을 사용하여 메시지를 눈에 띄게 만들 수 있습니다.

 

이를 활용하며 느꼈는데 어떠한 이벤트에 대해서도 커스텀해서 슬랙 채널에 알림을 줄 수 있을 것 같다는 생각이 들었다.

 

다양한 메시지 커스터마이징 기능을 제공해주는데 람다 함수에서도 알림 메시지 커스터마이징을 위해 일부 참고하여 사용하였다.  

 

위 링크의 문서를 보며 활용하면 된다!

 

 

채널에 Incoming WebHooks 를 추가해줍니다

 

 

webhook 등록으로 생성된 url을 잘 기억해줍시다!

 

 

 

 

(5) 구현해둔 람다 함수에 Slack WebHook URL 을 연결해준다!

 

람다 함수 콘솔 => 구성 => 환경변수  에 적절한 환경변수들을 적용해준다.

 

Node.js 기준 process.env 를 통해 여기에 작성된 환경변수들을 소스코드에서 읽어올 수 있다.

 

 

 

 

 

 

(6) 이슈 이동해보고 알림 메시지 오나 확인하기

 

 

 

 

어떻게 보면 리뷰 관련 식별만을 위해 알림을 구성했었는데 저런 형태의 메시지가 오면 확인하면 되기 때문에 개인적으로는 편하게 사용했던 것 같다.

 

 

 

 

(7) CI/CD 파이프라인 설정하기

 

깃과 깃헙을 활용해 IDE로 소스코드를 순차적으로 만들어갔고

 

당연히 처음부터 테스트 없이 메시지 포맷형태나 undefined 처리 같은 부분들 등을 잘 처리했을 것이라 생각 하지 않아 발생하는 자잘한 오류에 바로바로 대처해야할 것이라고 생각했으며

 

실제 사용 시 팀원들의 추가 및 개선 요구사항이 생길 것이라고 생각하여 사실 개발을 시작하면서 동시에 CI/CD 부터 구현하였다.

 

vscode 로 작성해서 푸쉬만 하면 바로 서비스에 반영되기 때문에 개인의 편의를 위한 것도 있었다.

 

name: zenhub-slack-no
on:
  push:
    branches:
      - master
jobs:
  deploy_source:
    name: build and deploy lambda
    strategy:
      matrix:
        node-version: [16]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
      - name: Install dependencies, Build application, Zip dist folder contents
        run: |
          npm ci
          npm run build --if-present
        env:
          CI: true
      - name: zip
        uses: montudor/action-zip@v0.1.0
        with:
          args: zip -qq -r ./bundle.zip ./
      - name: deploy
        uses: appleboy/lambda-action@master
        with:
          aws_access_key_id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws_region: ap-northeast-2
          function_name: zenslack
          zip_file: bundle.zip

 

이 github actions 파이프라인 코드는 어디서든 매우 쉽게 구할 수 있으니 참고하면 될 것 같고

 

하단에 본인 aws 계정의 id , access_key, region, 람다함수 이름 등만 잘 설정해주면 된다.

 

원할 경우 리전이나 함수 이름도 깃헙 시크릿 변수로 설정해주면 보안 뿐 아니라 변경에 열려있어 좋을 것 같다.

 

 

 

AWS 접근 아이디, 시크릿은 외부에서 aws를 사용할 경우 항상 활용을 위한 기능만 있는 권한을 설정한 계정을 사용하도록 습관을 들이자!

 

간단하게 요약해서 설명하면 람다 함수 실행 역할(role)만 가지는 IAM사용자를 활용한 것이다.

 

 

 

 

서비스 효능 요약

 

필요한 이슈의 파이프라인 이동에 대해서 Slack 채널에 알림 메시지를 전송해줄 수 있다.

예를 들어 우리팀의 경우 리뷰요청/리뷰완료 파이프라인에만 알림을 주어

 

이슈에 대한 리뷰 관련 상태를 팀원들이 빠르게 캐치하고 리뷰를 진행 하거나 완료된 PR을 merge 시킬 수 있게끔 하였다.

 

Lambda 의 환경 변수 활용으로 코드 변경없이도 알림 메시지를 줄 저장소 및 이슈 파이프라인을 추가/수정 할 수 있다.

 

Github Actions 로 CI/CD 를 구현해두어 코드의 변경을 즉시 알림 기능에 반영할 수 있어 팀원들의 가벼운 변경, 요청 사항에도 빠르고 쉽게 대처 가능하다.

 

후기

 

뭐 직접 뭘 다 한 것도 아니고 본인은 코드 몇 줄 치고 설정 몇 개 한 정도인 대단할 것 없는 사소한 것이지만

 

겪었던 불편을 바탕으로 필요성을 느끼고 무언가를 만들어 적용해볼 수 있게 되어 정말 재미있었고 뿌듯했다.

 

요구가 있기에 "제가 만들어 올게요 걱정마세요" 라고 선보고해버리고 짧은 시간안에 이게 될까? 있을까?  하며 조사하고 개발했는데 진짜 있고 진짜 되는 그 느낌이 너무 좋았다.

 

 

어쩌다 보니 본인을 제외하고 3명이나 사용해본 기능을 만들어 보는 경험을 하게 되었는데 본인이 처한 상황에 맞게 구현하다보니 적절하게 사용할 수 있었지만

 

만약 다른 사람들이 사용할 수 있어야 한다면 환경 변수 구조라던가, 한 파일에 함수가 다 있다던가 하는 어느정도 코드의 구조적인 문제들을 수정/확장 이 용이하게 개선해야 하지 않나 라는 등의 아쉬움도 좀 남았던 것 같다.   

 

 

 

 

깃헙 저장소

 

GitHub - pds0309/zen_slack_alert: Aws Lambda + Zenhub + Slack web hook 을 연동한 이슈 이동 알림 서비스

 

 

 

Ref

 

Zenhub - Productivity Management for Software Teams

 

ZenHub's Slack integration - Manage GitHub issues from any device

 

GitHub - ZenHubIO/API: Learn how to use ZenHub's API.