tech

Vercel Preview 빌드 비용 줄이기 — Ignored Build Step + CLI + Alias

배경

Vercel Pro를 구독하고 나서 빌드 시간이 눈에 띄게 빠르게 줄어들었다. 대시보드를 확인해보니 대부분이 Preview 빌드에서 소진되고 있었다.

브랜치에 push할 때마다 자동으로 Preview 배포가 돌아가는데, 솔직히 매번 확인할 필요가 없는 빌드들이었다. 특히 팀으로 작업하면 push 빈도가 높아지니까 빌드 시간이 금방 바닥났다.

문제 파악

Production vs Preview

  • Production — main 브랜치에 머지하면 실행되는 실제 배포
  • Preview — 그 외 브랜치에 push하면 자동으로 실행되는 미리보기 배포

왜 비용이 늘어나는가

브랜치에 커밋을 push할 때마다 Vercel이 자동으로 Preview 빌드를 돌린다. 기능 브랜치에서 작업하면서 자잘한 커밋을 여러 번 push하면, 그때마다 빌드가 돌아간다.

혼자 작업할 때도 꽤 많은데, 팀 단위로 작업하면 브랜치도 많고 push도 잦아서 빌드 시간이 순식간에 소진된다.

Ignored Build Step 설정

Vercel에는 Ignored Build Step이라는 설정이 있다. 빌드를 실행할지 말지를 스크립트로 제어할 수 있다.

Vercel 프로젝트 Settings → General → Ignored Build Step에서 아래 스크립트를 설정한다.

if [ "$VERCEL_GIT_COMMIT_REF" != "dev" ]; then exit 0; else exit 1; fi

exit 코드의 의미

Vercel에서 Ignored Build Step의 exit 코드는 일반적인 셸과 반대다.

  • exit 0 → 빌드를 건너뛴다 (무시)
  • exit 1 → 빌드를 실행한다 (진행)

위 스크립트는 dev 브랜치가 아니면 빌드를 건너뛰고, dev 브랜치일 때만 빌드를 실행한다. 필요에 따라 분기 조건은 바꾸면 된다.

이렇게 하면 불필요한 자동 Preview 빌드가 대부분 차단된다.

필요할 때만 Preview 배포하기

자동 빌드를 꺼두면, Preview가 필요할 때 직접 띄워야 한다. Vercel CLI를 사용하면 간단하다.

npx vercel

이 명령어를 실행하면 현재 코드 상태 그대로 Preview 배포가 생성된다.

이게 왜 더 나은가

  • 백엔드 개발자가 "API 연동 확인해달라"고 할 때만 Preview를 띄우면 된다
  • 작업 중간중간 push할 때마다 쓸데없이 빌드가 돌아가지 않는다
  • 실제로 확인이 필요한 시점에만 빌드 시간을 쓰게 된다

실제 워크플로우

  1. 기능 개발하면서 자유롭게 push (빌드 안 돌아감)
  2. 백엔드에서 확인 요청이 오면 npx vercel로 Preview 배포
  3. 나온 URL을 공유해서 확인
  4. 수정 사항 있으면 다시 npx vercel

Preview URL이 매번 바뀌는 문제

npx vercel로 배포할 때마다 URL이 달라진다. 매번 새 URL을 공유해야 하고, 백엔드에서도 CORS에 매번 새 origin을 등록해야 하는 번거로움이 생긴다.

# 배포할 때마다 URL이 다르다
https://my-project-abc123.vercel.app
https://my-project-def456.vercel.app
https://my-project-ghi789.vercel.app

Alias로 해결

Vercel CLI의 alias 기능을 쓰면 고정 도메인을 Preview 배포에 연결할 수 있다.

npx vercel alias set <배포-url> <원하는-도메인>

npx vercel로 배포한 뒤 나온 URL을 alias로 연결하면, 항상 같은 도메인으로 접속할 수 있다.

협업용 고정 도메인 만들기

이 방식을 활용해서 백엔드 확인용 고정 도메인을 하나 만들었다.

npx vercel alias set <배포-url> backend-check.app

이게 편한 이유

  • 백엔드 개발자는 backend-check.app 하나만 알면 된다
  • CORS origin도 이 도메인 하나만 등록하면 끝
  • Preview를 새로 배포해도 alias만 다시 걸어주면 같은 도메인으로 접속 가능

실제 흐름은 이렇다:

  1. npx vercel 실행 → 배포 URL 생성
  2. npx vercel alias set <배포-url> backend-check.app 실행

결과

  • 불필요한 빌드 대폭 감소 — 자동 Preview 빌드가 거의 사라졌다
  • 비용 최적화 — 빌드 시간을 필요한 곳에만 쓰게 됐다
  • 협업 흐름 개선 — 고정 도메인 하나로 백엔드와 소통이 깔끔해졌다

정리

이 전략이 유용한 경우

  • 팀 단위로 작업하면서 빌드 시간이 빠르게 소진되는 경우
  • Preview가 매번 필요하지 않은 프로젝트
  • 백엔드와 프론트가 특정 시점에만 연동 확인이 필요한 경우

자동 Preview가 더 나은 경우

  • 디자이너나 PM이 PR마다 실시간으로 결과물을 확인해야 하는 경우
  • CI/CD 파이프라인에서 Preview 배포를 테스트 단계로 사용하는 경우
  • 빌드 시간에 여유가 있는 경우

상황에 맞게 선택하면 된다. 나는 빌드 시간이 아까웠고, Preview가 항상 필요한 상황이 아니었기 때문에 이 방식이 잘 맞았다.

← 목록으로 돌아가기