최근 게시판 만들기 프로젝트에서 사이드 프로젝트를 하면서 vercel 배포 자동화를 처음으로 시도해보았다. main branch로 머지될 때마다 배포된 url에 반영되는 경험을 한 번 해보니, 앞으로 다른 프로젝트를 할 때에도 초기 세팅 때부터 배포 자동화를 해놓으면 유용할 것 같다는 생각이 든다.

그래서 이번 포스팅에서는 다음 프로젝트부터 배포 자동화를 시도하게 될 미래의 나, 그리고 vercel로 배포 자동화를 처음 시도하려는 개발자들을 대상으로 배포 자동화 과정을 담아보려고 한다.

1. yml 파일 생성

작업 중인 레포지토리 actions 탭으로 이동 -> 좌측 New workflow 버튼 클릭

set up a workflow yourself -> 버튼 클릭

.github/workflows/main.yml 생성

with: 아래에 변수화해놓은 4개의 토큰과 아이디는 추후 생성할 것이다.

2. Vercel 배포 및 레포지토리 연결

vercel 설치

pnpm i -g vercel

vercel 로그인

vercel login

vercel 배포

vercel

yml 파일에 지정한 토큰과 ID 생성

1. PERSONAL_ACCESS_TOKEN

github 프로필 클릭 후 Setting 클릭

Developer Settings

Personal access Tokens -> Tokens (classic) 클릭

Generate new token (classic)

PERSONAL_ACCESS_TOKEN 기입 -> workflow 체크

하단의 Generate token을 생성하면 화면에 뜨는 토큰을 메모장에 복붙해놓는다.

2. VERCEL_TOKEN

Vercel에서 내 프로필을 클릭한 다음 -> Account Settings 클릭

좌측에 Tokens 클릭

TOKEN NAME, SCOPE, EXPIRATION을 아래와 같이 설정

Create했을 때 생성되는 토큰을 메모장에 복붙해놓는다.

3. VERCEL_ORG_ID

4. VERCEL_PROJECT_ID

• vercel 설치

pnpm i -g vercel

• vercel 로그인

vercel login

• vercel 배포

vercel

4. repository secret 추가

레포지토리 settings -> Secrets and variable -> Actions 클릭

New repository secret 클릭 후

4개의 토큰과 아이디를 각각 추가

5. 성공!

참고: https://velog.io/@jonghyun/Side-Project-Front-Vercel%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%EB%B0%B0%ED%8F%AC-%EC%9E%90%EB%8F%99%ED%99%94%EB%A5%BC-%ED%95%B4%EB%B3%B4%EC%9E%90