🐳 Golden Whale
웹 개발

Vercel과 Next.js App Router를 활용한 1분 만에 끝내는 글로벌 웹 서비스 배포

작성일: 2026-07-14•글쓴이: goldenwhale
Advertisement

Vercel Nextjs 글로벌 배포

로컬의 결과물을 세상 밖으로

Next.js와 React를 사용해 멋진 개인 블로그나 사이드 프로젝트 MVP를 완성하고 나면, 이를 실제 사용자들이 접근할 수 있도록 인터넷 공간에 올려야 합니다. 옛날처럼 가상 서버(VPS)를 대여해 리눅스 패키지를 설치하고 Nginx 설정을 꼬박 밤새우며 하던 배포 방식은 지났습니다.

Next.js의 모회사인 **Vercel(버셀)**은 프론트엔드 개발자들을 위한 최상의 배포 생태계를 제공합니다. 깃허브(GitHub) 저장소와 클릭 몇 번만으로 자동으로 연동되어 코드를 커밋/푸시할 때마다 글로벌 에지 서버(CDN)에 1분 만에 빌드 및 글로벌 배포가 이루어지는 마법 같은 일이 가능합니다.

이번 글에서는 Next.js App Router 기반의 프로젝트를 Vercel을 통해 글로벌 배포하고 커스텀 도메인과 환경변수를 연동하는 가장 확실하고 빠른 단계를 정리해 드립니다.

1. 깃허브에 프로젝트 업로드

Vercel의 배포 파이프라인은 깃(Git) 저장소의 트리거를 바탕으로 작동합니다. 따라서 배포를 진행하기 전, 배포하고자 하는 Next.js 소스코드가 깃허브(GitHub), 깃랩(GitLab) 등의 원격 저장소에 완벽히 푸시되어 있어야 합니다.

git add .
git commit -m "feat: 배포 준비 완료"
git push origin main

2. Vercel 계정 연동 및 프로젝트 임포트

  1. Vercel 가입: Vercel 공식 홈페이지에 접속하여 가입을 진행합니다. 깃허브 계정으로 연동(Log in with GitHub)하여 가입하는 것이 협업 및 연결 면에서 가장 간편합니다.
  2. 새 프로젝트 추가: 로그인 후 대시보드 우측 상단의 'Add New...' -> 'Project' 버튼을 클릭합니다.
  3. 저장소 임포트: 깃허브 계정이 성공적으로 연동되어 있다면 내 저장소 목록이 노출됩니다. 배포할 Next.js 레포지토리를 찾아 'Import' 버튼을 누릅니다.

3. 프로젝트 빌드 설정 및 환경 변수 등록

임포트를 진행하면 상세 설정 창이 나타납니다. Next.js 프로젝트의 경우 프레임워크 프리셋이 자동으로 Next.js로 지정되므로 기본 설정(Build and Output Settings)을 건드릴 필요가 없습니다.

여기서 가장 주의 깊게 확인해야 하는 부분이 바로 Environment Variables(환경 변수) 영역입니다.

  • 로컬 개발 환경의 .env.local 파일에 존재하던 API 키값이나 데이터베이스 URL 주소(예: Supabase Key, Firebase Config 등)들을 그대로 복사하여 이름(Name)과 값(Value) 란에 하나씩 입력해 줍니다.
  • 이를 누락하게 되면 빌드 도중 에러가 나거나, 배포가 성공하더라도 백엔드 API와의 연동이 작동하지 않는 참사가 일어납니다.

4. 배포(Deploy) 완료 및 커스텀 도메인 설정

설정을 모두 채웠다면 하단의 'Deploy' 버튼을 클릭합니다. 화면에서 빌드가 진행되며, 1분 내외로 축하하는 의미의 종이 폭죽 애니메이션과 함께 라이브 배포 완료 화면을 보여줍니다.

Vercel이 기본으로 제공하는 무료 서브도메인(프로젝트명.vercel.app)을 사용해도 되지만, 고유 브랜드의 완성도를 위해서는 커스텀 도메인 연동이 필요합니다.

  1. Vercel 프로젝트 대시보드의 Settings -> Domains 메뉴로 이동합니다.
  2. 내가 소유한 도메인 주소(예: myproject.com)를 입력하고 'Add'를 누릅니다.
  3. Vercel이 안내하는 네임서버 주소 혹은 CNAME/A 레코드 값을 도메인 구입처(가비아, 호스팅kr 등)의 DNS 설정 창에 기입해 줍니다.
  4. 적용이 완료되면 Vercel이 무료로 SSL 인증서(HTTPS 보안 연결)를 즉시 발급하고 도메인 연결을 최종 승인합니다.

마치며: Git-Ops를 통한 무중단 자동 업데이트

이제 배포는 끝났습니다. 앞으로는 소스코드를 수정하고 깃허브의 main 브랜치에 푸시(git push)하기만 하면, Vercel이 즉시 코드를 감지해 새로운 빌드를 올린 뒤 무중단으로 프로덕션 버전을 자동 교체해 줍니다.

이 혁신적인 생산성 배포 시스템을 통해 아낀 인프라 구축 시간을 오직 핵심 비즈니스 로직과 디자인 개선에만 쏟아부으시기 바랍니다!