Vercel에 블로그 배포하기 — 10분 만에 내 사이트 만들기

배포란 뭘까?

지금까지 우리가 만든 블로그는 내 컴퓨터에서만 볼 수 있었습니다. 배포(Deploy)란 이 블로그를 인터넷에 올려서 전 세계 누구나 접속할 수 있게 하는 것을 말합니다.

쉽게 말하면, 내 컴퓨터에 있는 요리를 식당에 내놓는 것과 같습니다.

Vercel을 선택한 이유

배포 플랫폼은 여러 가지가 있지만, Next.js 프로젝트라면 Vercel이 최선의 선택입니다.

• Next.js를 만든 회사가 운영하는 플랫폼입니다. 궁합이 완벽합니다.
• 개인 프로젝트는 완전 무료입니다.
• GitHub에 코드를 올리면 자동으로 배포됩니다.
• 글로벌 CDN으로 전 세계 어디서나 빠르게 접속됩니다.
• HTTPS(SSL)가 자동으로 적용됩니다.

배포 과정 (진짜 10분이면 됩니다)

Step 1: GitHub에 코드 올리기

먼저 프로젝트 코드를 GitHub 저장소에 올려야 합니다. GitHub 계정이 없다면 먼저 가입하세요. VS Code의 터미널에서 git 명령어로 코드를 올리거나, GitHub Desktop 앱을 사용하면 됩니다.

Step 2: Vercel 가입 및 GitHub 연동

vercel.com에 접속해서 GitHub 계정으로 로그인합니다. 그러면 자동으로 GitHub 저장소 목록이 나타납니다.

Step 3: 프로젝트 가져오기

블로그 저장소를 선택하고 "Import" 버튼을 클릭합니다. 환경 변수(Supabase URL, API Key 등)를 입력하는 화면이 나오면, .env.local 파일의 내용을 하나씩 추가합니다.

Step 4: 배포!

"Deploy" 버튼을 클릭하면 Vercel이 자동으로 빌드하고 배포합니다. 약 1~2분 후에 프로젝트명.vercel.app 주소로 내 블로그에 접속할 수 있습니다.

커스텀 도메인 연결하기

vercel.app 도메인도 좋지만, 자체 도메인을 쓰면 더 전문적으로 보입니다. 도메인 구매 사이트(가비아, Namecheap 등)에서 도메인을 구매한 후, Vercel 프로젝트 설정에서 도메인을 추가하면 됩니다.

DNS 설정에서 Vercel이 안내하는 CNAME 또는 A 레코드를 추가하면 보통 5~30분 내에 연결됩니다.

자동 배포의 마법

Vercel의 가장 좋은 점 중 하나는 자동 배포입니다. GitHub에 코드를 push하면 Vercel이 자동으로 감지하고 새 버전을 배포합니다. 별도의 작업이 필요 없습니다.

심지어 브랜치별로 미리보기 배포(Preview Deployment)도 자동으로 만들어줍니다. 새 기능을 테스트할 때 매우 유용합니다.

마치며

배포까지 완료하면 진짜 내 블로그가 인터넷에 살아 있는 것을 확인하는 순간이 옵니다. 그 순간의 기쁨은 직접 경험해보지 않으면 모릅니다. 내가 만든 것이 전 세계에 공개되는 경험, 정말 특별합니다.

다음 글에서는 블로그에 다국어 지원(한국어/영어)을 추가하는 방법을 공유할게요!