Discord + AWS Lambda | 커밋 메시지 / 시간 알림 웹 훅 만들기

dayannne·2024년 10월 4일

6월부터 시작해 어느덧 3개월 넘게 부트캠프부터 함께 프론트엔드를 공부해 온 멤버들과 캠스터디를 하고 있다.
나를 포함해 다들 조금씩 사기가 떨어지고 있는 시기...동기부여가 필요했다!
디스코드를 좀더 활용하고, 스스로도 동기부여가 되었으면 해서 커밋 메시지(+ 멤버의 아이디어✨)와 시간 알림을 웹 훅으로 구현해 디스코드에 알림으로 띄워보기로 했다.

🌱 커밋 메시지 띄우기

1일 1커밋 실천을 위해 커밋을 push할 때마다 커밋 메시지를 채팅 채널에 띄워보기로 했다.

1. Webhook 생성

1) 커밋을 띄우고자 하는 채팅 채널의 채널 편집으로 들어간다.
2) 연동 메뉴를 클릭하고 웹후크로 들어간다.
3) 새 Webhook 생성 후 Webhook 이름을 자유롭게 정한다.
Webhook 생성 후 웹후크 URL 복사로 URL을 복사한 후 나의 깃허브 레포지토리로 이동!

2. 깃허브 레포지토리 내 Webhook 생성

1) Algorithm이라는 레포지토리로 들어가 Settings-Webhooks로 이동

2) Add webhook클릭 후 내용을 다음과 같이 채워준다.

Payload URL : 디스코드에서 복사한 Webhook URL + /github를 붙여 입력한다.
Content type - application/json
SSL verification - Enabla SSL verigication
just the push event

그리고 Update webhook으로 저장하면 세팅 완료!

결과

push할 때마다 디스코드에 커밋 알림이 잘 뜨는 것을 확인할 수 있다.
여러 커밋을 한번에 푸시하면 맨 아래 커밋 알림과 같이 한번에 알림이 표시된다.

한 채널에 여러 Webhook를 등록 가능

하나의 Webhook URL을 여러 레포지토리에 등록 가능

이기 때문에 스터디 뿐만 아니라 협업 시에도 활용하기에 좋을 것 같다.

⏰ 시간 알림 띄우기

그동안 스스로 시간을 지켜서 스터디에 참여해왔다보니 헤이해지는 때가 많아서 시간마다 알림 메시지를 띄워서 좀더 다같이 습관화해보면 어떨까 싶었다.
아래와 같이 정한 캠스터디의 시간표에 따라 시간 알림을 띄워보기로 했다.

오전 9시 - 스터디 시작
오후 12시 - 점심 시작
오후 1시 반 - 점심 끝
오후 6시 - 스터디 종료

그런데 깃허브 커밋 알림과 달리 내가 직접 코드를 만들어 디스코드에 알림을 띄우려면 본래는 서버를 만들고 이를 관리해야 할 터,
찾아보니 AWS에서 제공하는 Lambda(람다)라는 서버리스 서비스가 있어 이를 활용해보기로 했다.

AWS Lambda

AWS 에서 제공하는 서버리스 컴퓨팅 플랫폼이다.
여기서의 '서버리스'란,서버가 없다는 뜻이 아니고 개발자가 서버의 존재를 신경쓸 필요가 없다, 즉 직접 서버를 관리할 필요 없이 코드를 실행할 수 있다는 것이다.
Lambda 함수에 코드를 구성하면 되는데, 필요할 때만 함수를 실행하고 자동으로 확장된다는 특징이 있어 특정한 시기에만 실행시키는 경우에 사용하기 유용하다.

서버 띄우지 않고 간단한 코드를 실행시키고 싶은 경우

특정 기간 또는 특정 주기로 코드를 실행시켜야 하는 경우

트리거가 실행될때만 코드를 실행시키고 싶은 경우

특정 시간에 알림 메시지를 띄우는 함수를 실행하는 것이 목적이라 아주 적합!

1. Webhook 생성

커밋 알림 설정 때와 동일하게 원하는 채팅 채널에 Webhook를 생성한다.

2. AWS Lambda 함수 생성

1) AWS Lambda로 들어간 다음,
2) 함수 생성을 클릭한다.
스터디 시작 / 점심 시작 / 점심 종료 / 스터디 종료 이렇게 4개의 알림 메시지를 주어야 하니 4개의 함수를 만들 것이다.

(본래는 하나의 함수에 여러개의 트리거를 줘보려 했으나 잘 실행되지 않았고, 각각 함수를 만들어야 한다.)

먼저 스터디 시작 함수를 만들어 보자.
함수 이름 입력 후 다른 설정 변경 없이 함수를 생성한다.

3. 함수 코드 작성 (in VS Code)

함수로 들어가보면 아래에 코드 - 코드 소스 부분에서 코드를 수정할 수 있는데, 여기서 코드 소스를 수정하지 않고 VS Code를 열자. (axios 설치가 필요하기 때문!)
1) 컴퓨터 내 편한 곳에 임의의 폴더를 생성 후 npm init을 통해 node_modules & package.json을 생성한다.
2) 그 다음 axios를 설치한다.
3) 그 다음 디스코드에서 Webhook URL을 복사해 가져온 후, index.mjs파일을 생성해 아래와 같이 작성한다.

import axios from 'axios';

export const handler = async (event) => {
  try {
    const payload = {
      // content: '',
      embeds: [
        {
          title: '⏰ 스터디 시작 📔',
          description: '타이머 켜고⏲️ 스터디룸으로🚶️\n오늘 하루도 화이팅! 🔥',
          color: 0xd3d3d3,
        },
      ],
    };
    await axios.post(
      '{복사한 Webhook URL}',
      payload,
    );
    console.info('웹훅 성공');
  } catch (error) {
    console.error('웹훅 실패', error);
  }

  // 기본 응답
  const response = {
    statusCode: 200,
    body: JSON.stringify('Hello from Lambda!'),
  };
  return response;
};

import axios from 'axios';로 axios를 불러온 후 Webhook URL을 통해 POST 요청을 보낸다.

payload를 잠깐 살펴보면

content - 기본 채팅 문구로 표시
embeds - 박스 인용구로 표시
- title - 인용구 제목
- description - 인용구 설명
- color - 글씨 색상

이렇게 구성되어 있고, content와 embeds 둘 다 보여주거나 코드처럼 하나를 생략해 payload를 작성해도 된다.

4) node_modules, index.mjs, package.json, package-lock.json을 zip파일로 압축한다.
| (.Zip X .zip O)
index.mjs에서 payload 내 문구만 변경하여 4가지 버전으로 압축 파일을 만들었다.

5) 이제 다시 AWS lambda로 돌아와, 코드 소스 우측의 .zip파일 업로드를 통해 압축파일을 올려 준다.

.Zip파일 업로드 시 '잘못된 입력'으로 처리되기 때문에 .zip 파일을 업로드해야 한다.

업로드 후 코드 소스에 내가 작성한 코드가 잘 들어간 것 확인!

4. 일정 시간마다 알림 메시지를 띄우기 위한 트리거 생성

이제 마지막으로, 트리거 추가를 통해 원하는 시간에 함수가 실행(알림 메시지 띄우기)될 수 있도록 세팅하자.

1) 트리거 추가를 클릭한다.
2) 소스 선택에서 EventBridge를 선택한다.

그러면 규칙을 작성하는 폼이 띄워지는데,
새 규칙 생성 후 규칙 이름, 규칙 설명(선택), 예약 표현식을 입력한다.

여기서 예약 표현식을 cron으로 작성 시 UTC 시간을 기준으로 한다.
내가 한국 시간(UTC+9) 기준 오전 09시 00분에 트리거를 설정하려면 UTC 시간으로는 00시 00분이 된다. 그러므로 cron(0 0 ? * MON-FRI *)와 같이 작성하면 끝!

트리거가 추가되었다.