[Web] Discord 채팅채널에 Github Action을 이용해서 Vercel 배포 알림 보내기 (Vercel Hobby Plan)

 

문제 발생

사이드 프로젝트를 진행하고 있는데, 팀 메신저로 Discord를 사용하고 있습니다.

Vercel에 Next.js 웹 애플리케이션을 배포하면, 배포 완료되었다는 알림을 Discord 채널에 보내고 싶은데요.

마땅한 방법을 찾지 못해, 삽질을 많이 했습니다.

 

Vercel에서 다른 앱과 통합할 수 있는 기능을 제공하는데, Slack과의 연동은 제공해주는 것 같으나 Discord는 없는 것 같더라고요.

 

 

 

Integrations에서 -> Browse Market 버튼을 클릭하면, Vercel과 통합할 수 있는 앱들을 보여줍니다.

 

 

 

 

 

Slack은 있지만 Discord는 없습니다...

 

 

 

계속 구글 검색 + 챗GPT로 정보를 찾다가, Discord Pro Plan의 경우 웹훅을 Account 에서 설정할 수 있다고 합니다.

 

 

Setting Up Webhooks

위의 Vercel의 문서에 들어가보면 설명이 잘 되어 있는데요.

 

 

 

 

 

제가 원했던 것이 위에 있었습니다.

배포 이벤트를 감지하면, 특정 URL로 HTTP POST 요청을 보낼 수 있다는 것인데요. (웹훅)

아쉽게도 위에서 얘기하고 있는 Account Webhook은 Pro 이상의 Plan 부터 사용이 가능하다고 합니다.

 

제가 알아본 바에 따르면, Pro Plan 비용은 개인당 1달에 $20이 발생하는 것으로 알고 있습니다.

Hobby Plan에서는 Account Webhook을 사용할 수 없어서, 다른 방법을 알아봐야 했습니다.

 

 

 

 

 

Vercel for Github 사용하기

저는 Github Action을 사용해서 Vercel에 배포하지 않고, Vercel for Github을 사용하고 있었는데요.

Github에서도 다른 앱과 통합할 수 있는 기능을 제공해주고 있는데, 여기에서 Vercel을 설치해서 연동한 것입니다.

 

 

 

 

 

프로젝트 -> Settings 탭 -> 왼쪽 메뉴에서 Integrations / Github Apps 메뉴를 클릭하면,

다른 앱과 연동할 수 있는 화면이 나옵니다.

 

 

 

 

Vercel -> Configure 버튼을 누르면, 위와 같이 앱에 대한 상세 내용을 보여줍니다.

위의 Vercel for Github이 연동되어 있으면, Github 저장소에 코드가 배포될 때마다 알아서 Vercel에 배포를 해줍니다.

(물론 Vercel에서 어떤 계정, 어떤 프로젝트, 어떤 브랜치를 어떻게 배포할지는 설정해주셔야 합니다.)

 

 

 

 

 

 

 

그럼, Github 프로젝트 페이지에서 Deployments 섹션이 보여지고, Vercel에서 가져온 배포 정보들도 볼 수 있습니다.

Preview, Production 버전에 대한 URL도 보여지고 있군요.

 

 

Github에서 위의 정보를 보여주고 있다는 것은, Github Action에서도 위의 정보를 꺼내서 사용할 수 있지 않을까요?

구글을 서치해보니, 배포가 실패했을 때, curl로 HTTP 요청을 보내는 워크플로우 파일도 찾을 수 있었습니다. 👇

 

 

Vercel-GitHub-Actions/.github/workflows/deploy-failed.yml at main · jst-cyr/Vercel-GitHub-Actions

 

 

 

 

 

Github Action 으로 Discord 채널에 Vercel 배포 알림 보내기

위의 워크플로우 파일에서 힌트를 얻었습니다.

아래와 같은 순서대로 배포 정보를 보내면 됩니다.

 

1. Github Action에서 배포 상태를 감지

2. Discord 웹훅 URL로 curl 을 이용해 배포 정보를 전송

 

 

name: Deployment Notification to Discord

on:
  deployment_status:

jobs:
  notify-discord:
    name: Notify Discord on Deployment Status
    runs-on: ubuntu-latest
    if: github.event.deployment_status.state == 'success' || github.event.deployment_status.state == 'failure'

    steps:
      - name: Notify Discord
        env:
          DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
        run: |
          STATUS="${{ github.event.deployment_status.state }}"
          ENVIRONMENT="${{ github.event.deployment.environment }}"
          URL="${{ github.event.deployment_status.target_url }}"
          MESSAGE="🚀 Deployment $STATUS 🚀\nENVIRONMENT: $ENVIRONMENT\nURL: $URL\n"
          curl -H "Content-Type: application/json" \
               -d "{\"content\": \"$MESSAGE\"}" \
               $DISCORD_WEBHOOK_URL

 

위와 같이 워크플로우 파일을 작성해볼 수 있는데요.

deployment_status 이벤트가 발생할 때, 워크플로우가 실행이 되는데요.

타사 (여기서는 Vercel) 에서 배포 상태를 제공할 때, 이벤트가 발생한다고 볼 수 있습니다.

 

 

아래 3가지 정보가 중요하다고 판단해서, 이것을 DIscord 채널로 보낼 예정입니다.

 

deployment_status.state : 배포 상태 (pending, success, failure, error)

deployment.enviroment : 배포 환경 (string 타입, Vercel에서는 preview와 production)

deployment_status.target_url : 타겟 URL (Vercel에서는 preview 또는 production 환경의 URL을 보여줍니다.)

 

 

 

github.event.deployment, github.event.deployment_status 페이로드 참고 👇

 

https://docs.github.com/ko/webhooks/webhook-events-and-payloads#deployment

https://docs.github.com/ko/webhooks/webhook-events-and-payloads#deployment_status

 

 

 

 

 

Discord에서 웹훅 URL 만들기

 

Discord에서 웹훅 URL을 만들어서 Github Secret에 등록하면 됩니다.

 

 

 

 

서버 설정 -> 왼쪽 메뉴에서 연동 클릭 -> 웹후크를 클릭합니다.

 

 

 

 

새 웹후크 버튼을 클릭하면, 웹훅 항목이 하나 생길 텐데요.

이름을 변경하실 수 있고, 어떤 채널에서 웹훅 URL을 받을 것인지 선택합니다.

웹후크 URL을 복사한 후, 이것을 다른 앱에 적용하시면 됩니다.

 

 

 

위의 워크플로우 파일에서는 Github Secret에 등록했기 때문에,

Github에서 워크플로우를 사용할 프로젝트에서 적절한 Secret 이름을 등록하시고, 값으로 Discord 웹훅 URL을 넣어주시면 되겠습니다.

 

 

 

 

 

 

결과

 

이제 Github을 통해 Vercel 배포가 완료될 때마다, Discord 채널에 배포 알림을 보내줍니다!!