# Vercel 연결하기

Mocco는 **팀 웹훅**으로 Vercel 배포 이벤트를 받습니다. 그러면 Mocco가 성공한 프로덕션 배포, 실패한 배포, 취소된 배포를 Discord에 게시할 수 있습니다.

> **플랜 요건.** Vercel은 **Pro**와 **Enterprise** 플랜에서만 팀(계정) 웹훅을 제공합니다. Hobby 플랜에서는 Mocco를 가리킬 웹훅이 없습니다.

Mocco의 소유자나 관리자여야 하고, Vercel 팀의 웹훅을 관리할 권한이 있어야 합니다.

## 1. Vercel에서 웹훅 만들기

Vercel은 웹훅의 시크릿을 만든 직후에 한 번만 보여 줍니다. 그러니 웹훅을 먼저 만들고 시크릿을 가까이 두세요.

1. Mocco에서 **Notifications > Sources**를 열고 **Add source**를 클릭한 뒤, **Kind**에서 **Vercel**을 고르고 **Name**을 입력합니다. 양식은 열어 둡니다.
2. Vercel 대시보드에서 팀을 선택하고 **Settings > Webhooks**로 이동합니다.
3. 배포 이벤트를 선택합니다.
   - **Deployment Created**
   - **Deployment Succeeded**
   - **Deployment Error**
   - **Deployment Cancelled**
4. 웹훅이 다룰 프로젝트를 고릅니다(팀의 모든 프로젝트 또는 원하는 프로젝트).
5. 엔드포인트 URL로 이 소스의 Mocco ingest URL을 입력합니다(아래 참고 사항을 보세요).
6. **Create Webhook**을 클릭합니다. **Webhook Created** 대화상자에 시크릿이 표시됩니다. 지금 복사하세요. Vercel은 다시 보여 주지 않습니다.

**ingest URL.** Mocco는 소스를 만들 때 ingest URL도 함께 만들고, 소스에는 시크릿이 필요합니다. URL을 먼저 얻고 싶다면 임시 시크릿으로 소스를 만들고 **Ingest URL**을 복사한 뒤 Vercel에서 웹훅을 만드세요. 그런 다음 소스에서 **Rotate secret**을 클릭해 실제 시크릿을 붙여 넣습니다. 시크릿을 교체해도 ingest URL은 바뀌지 않습니다.

## 2. Mocco에서 마무리

1. Vercel 시크릿을 **Signing secret**에 붙여 넣습니다.
2. **Create source**를 클릭합니다(임시 시크릿을 썼다면 **Rotate secret**).

Vercel은 모든 전달에 이 시크릿으로 서명합니다(`x-vercel-signature` 헤더). Mocco는 전달마다 이를 확인하고, 일치하지 않는 요청은 모두 거부합니다. 시크릿을 잃어버렸다면 Vercel에서 새 웹훅을 만들고 Mocco에서 시크릿을 교체하세요.

## 받게 되는 이벤트

| Vercel 이벤트 | Mocco 이벤트 |
|---|---|
| `deployment.created` | `vercel.deployment.created` |
| `deployment.succeeded` | `vercel.deployment.succeeded` |
| `deployment.error` | `vercel.deployment.error` |
| `deployment.canceled` | `vercel.deployment.canceled` |
| 그 밖의 모든 이벤트(project, domain, firewall 이벤트 등) | `ignored`로 기록 |

필터 키:

| 키 | 예시 | 비고 |
|---|---|---|
| `project` | `web` | Vercel 프로젝트 이름. |
| `target` | `production` | `production`, 커스텀 환경 이름, 또는 `preview`. Vercel은 프리뷰 배포에 target을 보내지 않으며, Mocco가 `preview`로 기록합니다. |
| `branch` | `main` | 배포가 Git에서 시작된 경우의 Git 브랜치. |

**Vercel** 프리셋은 `target=production` 필터를 건 `vercel.deployment.succeeded`(프리뷰 배포는 조용히 넘어갑니다)와, 모든 target에 대한 `vercel.deployment.error`, `vercel.deployment.canceled`를 추가합니다. Vercel에서 **Deployment Created**를 선택하는 것은 선택 사항입니다. 이를 쓰는 프리셋은 없지만, `vercel.deployment.created` 규칙을 직접 추가할 수 있습니다.

## 동작 확인

웹훅이 다루는 프로젝트를 배포합니다. 배포가 Mocco의 **Activity** 탭에 나타납니다. 어떤 채널도 요청하지 않은 프리뷰 배포에는 그 이유가 표시됩니다. 예를 들면 다음과 같습니다.
``rule `vercel.deployment.succeeded` needs target = "production" (the event has "preview")``
아무것도 도착하지 않으면 [문제 해결](https://www.mocco.club/docs/ko/articles/pmzrkr-troubleshooting)을 참고하세요.