PR 좀 봐달라고 독촉 하는 Slack app (Feat. Node.js, AWS Lambda)

들어가며

사이드 프로젝트를 하며 pr 을 올려보지만 팀원들이 안봐준다면 .. 슬프잖아요

그럴땐 빨리 Node.js 와 AWS Lambda 를 사용해 15분만에 pr 독촉 슬랙 앱을 만들어봅시다.

Github 슬랙 앱이 이미 있지만,, 이런 깨끗한 메시지로 경각심을 주지 못합니다.

 

https://github.com/jokj624/approve-my-pr

GitHub - jokj624/approve-my-pr

Slack webhook 생성

구글에 slack webhook 을 검색하면 제일 첫번째로 뜨는 링크를 클릭합시다.

들어가면 이렇게 create your slack app 버튼이 있습니다.

클릭하면 요런 모달이 뜰텐데

From scratch 를 누르면 오른쪽처럼 앱 이름과 워크스페이스를 선택할 수 있습니다.

적당한 이름과 사용하려는 워크 스페이스를 클릭합시다.

저는 approve my pr 이란 앱 이름을 지정했습니다.

 

경각심을 주는 앱 이름을 선택해봅시다.

Incoming Webhooks 를 눌러 webhook 설정을 해야합니다. 웹훅을 클릭하면 저렇게 Activate 할 수 있는 toggle 이 뜹니다. On 으로 바꿔주면 됩니다. 채널을 선택하라고 뜨면, 원하는 채널을 선택합니다.

그러면 하단에 webhook url 이 뜰 겁니다!

webhook url 은 비밀입니다.

잘 복사해둡시다.

AWS Lambda 세팅

AWS 홈페이지로 들어가 로그인 후 콘솔에 들어갑시다. AWS Lambda 서비스 콘솔로 들어가줍니다.

원하는 람다 함수 이름을 지정해주고, 저는 Node.js 런타임을 선택했습니다.

이대로 함수를 생성하면 됩니다.

 

lambda 란?
AWS 에서 제공하는 서버리스 컴퓨팅 서비스 입니다.
애플리케이션을 실행하기 위해 별도의 서버를 만들지 않고 바로 코드 만으로 실행해주는 서비스입니다.
사용한 시간과 요청수에 따라 요금이 계산됩니다.
AWS Lambda 프리 티어에는 월별 1백만 건의 무료 요청과 월별 400,000GB-초의 컴퓨팅 시간이 포함되어 있습니다. (월 별 프리티어 유저는 거의 공짜라고 합니다)

 

코드 작성

저는 axios 모듈을 사용할 거라 그냥 로컬 에서 작업하고, 작업한 파일 (node_modules 포함) 을 모두 zip 으로 압축해 람다에 업로드했습니다.

제가 생각한 플로우는 다음과 같습니다.

피그마 실력이 많이 늘었어요.

slack 앱에 slash commad 를 지정해놓고, 이 커맨드 입력 시 api gateway 로 요청이 가게끔 해둘 예정입니다.

lambda 에서는 git api 에서 현재 Open 된 PR 정보를 받아오고, 가공해서 slack 으로 메시지를 전송할 예정입니다.

const WEB_HOOK_URL = process.env.WEB_HOOK_URL;
const GITHUB_OWNER = process.env.GITHUB_OWNER;
const GITHUB_REPO = process.env.GITHUB_REPO;

const members = [process.env.MEMBER1, process.env.MEMBER2, process.env.MEMBER3];

이번 코드에서 사용할 환경 변수입니다.

요 변수들은 좀 이따 람다에 배포할 때 람다 환경 변수로 지정해주어야 undefined 가 안뜨니 까먹지 맙시다.

export const handler = async (event) => {
 // enter your code ...
}

lambda 함수를 생성하고 생긴 기본 틀 안에 우리가 하고 싶은 코드를 작성하면 됩니다.

const getPRList = async () => {
    const prUrl = `${GITHUB_API_URI}/repos/${GITHUB_OWNER}/${GITHUB_REPO}/pulls?state=open`;

    try {
        const response = await axios.get(prUrl);

        return response.data;
    } catch (error) {
        throw error;
    }
}

GITHUB API Docs

끌어오기 - GitHub Docs

Github API 에서 Repository 의 PR 리스트를 가져올 수 있도록 제공합니다.

해당 문서를 보고 Github PR 리스트를 가져오는 getPRList() 함수를 만들었습니다.

쿼리 문자열에 state=open 을 넣어, 현재 열려있는 PR 만 가져오게끔 요청했습니다.

const prList = await getPRList();

이렇게 handler 함수에서 getPRList 함수를 호출해주었습니다.

이제 slack 에 메시지롤 보내는 코드만 작성하면 됩니다. 그 전에 Message 를 원하는 형식으로 가공해봅시다.

slack block kit builder 를 사용해 레이아웃을 잡아봅시다.

저는 이런 형식으로 보내도록 하겠습니다.

옆에 친절하게 payload 도 알려줍니다. 이 형태로만 가공하면 됩니다.

members.forEach(member => {
    mentionMessage += `<@${member}> `;
});

<@${slack_id}> 를 메시지 페이로드에 사용하면, 해당 slack_id 에 맞는 유저가 언급됩니다.

이를 활용해 제 PR 을 봐줄 서버 팀원들을 호출했습니다.

요 id 는 슬랙에서 해당 팀원을 누르고, Copy member ID 를 클릭하면 됩니다.

let blocks = [
    {
        "type": "header",
        "text": {
            "type": "plain_text",
            "text": "PR을 확인할 시간입니다.",
            "emoji": true
        }
    },
    {
        "type": "section",
        "text": {
            "type": "mrkdwn",
            "text": mentionMessage,
        }
    },
];

이렇게 레이아웃에서 변동되지 않는 header, mentionMessage 를 가지고 기본 블록을 만들어주었습니다.

prList.forEach(obj => {
    const section = {
        type: "section",
        text: {
            type: "mrkdwn",
            text: `:ghost: <${obj.html_url}|check this pr> #${obj.number} ${obj.title}`
        }
    };

    const divider = { type: "divider" };

    blocks.push(section);
    blocks.push(divider);
});

아까 받아온 prList 를 돌면서, pr 주소, pr 번호, pr 제목을 가져왔습니다.

요거는 github api 문서 보시면 어떻게 오는지 알 수 있으니 다른 것도 추가하셔도 됩니다.

아까 만든 기본 블록에 section 과 divider 를 추가해줍니다.

이렇게만 해도 pr 리스트를 보내주지만, 더 강렬한 경각심을 주기 위해 구글에 PR 짤을 검색해봅니다.

상당히 맘에 드는게 바로 뜹니다.

친절하게 들어가보니 이미지 url 도 주네요. 바로 가져다 씁니다.

blocks.push({
    "type": "image",
    "image_url": "https://cdn.jjalbot.com/2020/11/-QO1JWITkd/1nDFWXBzF.jpeg",
    "alt_text": "inspiration"
});

image 타입과 주소를 블록에 넣어줍니다.

await axios.post(WEB_HOOK_URL, { blocks });

이제 axios 로 우리 앱의 webhook url 에 post 요청을 해주면 끝납니다!

Lambda 환경변수 세팅

다시 람다로 돌아와서 하단 구성 탭을 누르시면 환경변수 탭이 있습니다. 여기서 람다 함수에서 쓸 환경 변수를 세팅해줍니다.

여러분이 쓰실 환경변수를 .env 만들듯이 그대로 해주시면 됩니다.

이렇게 세팅하면 lambda 에서 바로 process.env.KEY 로 사용하실 수 있습니다.

Lambda 테스트

요렇게 생긴 테스트 버튼을 클릭하면 테스트 이벤트를 생성할 수 있습니다.

이렇게 이벤트 이름을 클릭하시고, 저는 만들어뒀어서 템플릿이 저렇게 뜨지만 여러분은 그냥 hello world 기본 템플릿으로 하셔도 됩니다.

이렇게 하고 테스트를 해봅시다. 슬랙에 제대로 메시지가 온다면 성공입니다!

Lambda 배포

테스트에서 제대로 메시지가 수신 되었다면 이제 배포를 할 차례입니다.

배포는 간단합니다.

테스트 옆에 있는 Deploy 버튼을 눌러줍시다.

API Gateway

배포는 했으나 아직 람다 함수에 연결된 트리거가 없기에 작동하지 않습니다.

API Gateway 를 통해 트리거를 만들어줍시다.

구성 -> 트리거 -> 트리거 추가

소스는 API Gateway 로 선택해줍니다.

이런식으로 구성하시면 REST API 를 요청할 수 있는 API 엔드포인트가 생깁니다.

Security 는 원하시는대로 구성하시면 됩니다.

트리거가 생겼습니다.

트리거 생성 후 나오는 엔드포인트를 가지고 Slash command 에 연결해봅시다.

Slash Command

슬랙에서 명령어 를 입력하면 어떤 기능들이 동작합니다.

이를 Slash Command 라고 부르는데 우리가 만든 앱에 이 Slash Command 를 만들 수 있습니다.

깜찍한 페페

슬랙 앱 화면에서 Slash Commands 탭으로 가줍니다. Create New Command 를 눌러 새 명령어를 만들어봅시다.

Command 에는 /명령어 -> 명령어 에 들어갈 단어를 만들어줍니다. 저는 간절함을 담아 /plz 로 했습니다.

Request URL 에 아까 API Gateway 를 만들고 생성된 엔드포인트를 넣어줍니다.

 

이외에 것들은 취향대로 입력하시고 생성해줍니다!

이제 앱을 reinstall 하면 완성입니다.

완성

간절한 이모티콘과 그렇지 못한 페페

/plz 를 입력하니...

깜찍하게 독촉 메시지가 날라옵니다.

여러분의 팀원을 꼭 언급하세요!

참고 링크

https://blog.mathpresso.com/aws-lambda%EB%A1%9C-slack-message-bot-%EB%A7%8C%EB%93%A4%EA%B8%B0-69e1a069c19b

AWS Lambda로 Slack message bot 만들기