Skip to main content

Vercel 자가 배포 체험기


Intro

잘 되던 서비스가 갑자기 멈췄다​

개발 블로그나 깃허브 프로필을 꾸미기 위해 외부에서 제공하는 무료 오픈소스 API(예: GitHub Readme Stats)를 사용하는 경우가 많다.

그런데 어느 날 갑자기 이미지가 엑스박스로 뜨거나 깨져 보이기 시작했다.

깨진 스탯 이미지

▲ 갑자기 이미지가 로드되지 않는 현상


Error Message

503: SERVICE_UNAVAILABLE This Deployment is paused by the owner.

1. 원인 분석: 공용 리소스의 한계​

대부분의 인기 있는 오픈소스 도구들은 원작자가 Vercel이나 Heroku 같은 무료 티어 호스팅을 이용해 배포해 둔 공용 주소(Public Instance)를 제공한다.

문제는 사용자가 전 세계적으로 늘어나면 다음과 같은 한계에 부딪힌다는 점이다.

  1. API 호출 한도 초과: GitHub 등 데이터 제공처에서 과도한 요청을 차단함
  2. 서버 리소스 부족: 무료 호스팅의 트래픽 허용량을 넘어서 서비스가 일시 정지됨

즉, 남들이 다 같이 쓰는 공용 와이파이가 터진 것과 같은 상황이다.

2. 나만의 인스턴스 띄우기 (Self-hosting)​

오픈소스의 가장 큰 장점은 코드가 공개되어 있다는 것이다. 원작자의 서버에 의존하지 않고, 내 계정으로 똑같은 코드를 가져와 나만 쓰는 서버를 만들면 된다.

Self-hosting의 장점

이 방식은 트래픽을 독점할 수 있어 속도가 빠르고 외부 요인에 의해 서비스가 중단될 걱정이 없다.

3. Vercel 활용​

과정은 생각보다 간단하다. 서버 지식이 깊지 않아도 GitHub와 Vercel 계정만 있다면 5분 내에 구축 가능하다.

Step 1. 프로젝트 포크 (Fork)​

가장 먼저 원본 오픈소스 저장소를 내 GitHub 계정으로 Fork 한다.

Step 2. Vercel 배포​

  1. Vercel 대시보드에서 Add New Project를 클릭한다.
  2. 방금 Fork 한 저장소를 선택(Import)한다.
  3. 별다른 설정 없이 Deploy를 클릭한다.

Step 3. 환경 변수 설정​

단순히 배포만 하면 401 Unauthorized(권한) 에러가 뜰 수 있다. 대부분의 API 서비스는 데이터를 가져오기 위해 인증 토큰을 필요로 하기 때문이다.

401 에러 화면

▲ 인증 토큰이 없어서 발생하는 401 에러


체크 포인트
  • GitHub: Developer Settings에서 Personal Access Token을 발급받는다. (권한은 repo, user 필수)
  • Vercel: 프로젝트 설정의 Environment Variables 메뉴로 이동하여 토큰 값을 등록한다.

Tip: 프로젝트마다 요구하는 변수명이 다르다. 나의 경우 GH_TOKEN과 PAT_1을 모두 등록하여 해결했다.

Step 4. 재배포 (Redeploy)​

가장 중요한 단계다. 환경 변수를 등록했다고 해서 실행 중인 서버에 바로 적용되지 않는다. 반드시 Deployments 탭에서 Redeploy를 수행하여 서버를 재기동해야 한다.

성공적으로 재배포가 완료되면 아래와 같이 상태가 Ready로 바뀌며 나만의 서버가 준비된다.

Vercel 배포 성공 화면

4. 마치며​

기존 공용 URL 대신 내가 생성한 Vercel 도메인 주소로 교체했다.

README.md 수정 예시
[https://github-readme-stats.vercel.app/](https://github-readme-stats.vercel.app/)...

[https://내-프로젝트-이름.vercel.app/](https://내-프로젝트-이름.vercel.app/)...

성공 화면

▲ 해결 완료!