블로그 만들기 03 – Vercel을 통해 배포하기
2025-08-27
개요
로컬에서 잘 작동하는 블로그도, 배포 없이는 세상과 공유할 수 없다. 이번 글에서는 Next.js 기반 정적 블로그를 Vercel을 통해 쉽게 배포하는 방법을 정리한다.
GitHub 저장소와 Vercel을 연동해 자동 배포까지 구현하는 것이 목표이다.
1. Vercel 계정 생성 및 GitHub 연동
-
Vercel 공식 사이트에서 회원가입 또는 로그인한다.
-
대시보드에서 “Add New → Project” 를 클릭한다.
-
GitHub 계정과 연동하고, 배포할 저장소를 선택한다.
❗️GitHub 저장소가 비공개(private)일 경우에도 연동 가능하다. 단, 무료 요금제에서는 일부 제한이 존재할 수 있다.
2. 프로젝트 설정
-
프레임워크는 자동으로 Next.js로 감지된다.
-
Root Directory는 apps/blog 등 실제 Next.js 프로젝트 폴더로 지정한다. (예: Turborepo 사용 시)
-
Environment Variables (환경 변수) 항목에서 .env.local의 내용을 등록한다.
🔍 .env 파일에 민감한 값이 있다면 꼭 Vercel 대시보드에서 직접 등록해야 한다. GitHub에 절대 커밋하지 않는다.
3. 정적 파일 경로 확인
정적 파일을 public/ 하위에 둔 경우, 브라우저에서는 / 루트로 접근 가능하다.
예:
- /public/_assets/image.png → https://yourblog.vercel.app/_assets/image.png
Vercel은 public 폴더를 자동으로 정적 경로로 인식하므로 별도 설정 없이 접근 가능하다.
4. 배포
-
프로젝트 설정 완료 후, “Deploy” 버튼 클릭
-
약 1~2분 이내에 초기 배포 완료
-
project-name.vercel.app으로 접속 가능
5. 커스텀 도메인 연결 (선택)
Vercel에서는 도메인 연결도 매우 간단하다.
-
대시보드 > Settings > Domains에서 원하는 도메인 추가
-
구매한 도메인의 DNS 설정에서 A레코드 혹은 CNAME을 Vercel 가이드에 따라 추가
-
SSL 인증서는 자동 발급된다
🛡 porkbun, cloudflare, 카페24, 가비아 등 다양한 DNS 업체와 호환된다.
마무리
-
Vercel을 통해 배포 과정을 자동화하고, 별도 서버 관리 없이 운영할 수 있는 환경이 갖춰졌다.
-
GitHub에 Push만 해도 자동으로 최신 블로그가 배포되는 CI/CD 구조를 구축한 셈이다.
-
앞으로는 블로그 컨텐츠 작성에만 집중하면 된다.
✅ 요약
-
Vercel은 Next.js와 궁합이 가장 좋은 호스팅 서비스 중 하나이다. (Next.js 대신 Astro 사용도 추천한다.)
-
GitHub 저장소를 연동해 자동 배포 파이프라인을 구성할 수 있다.
-
정적 파일은 public/ 경로에 두면 그대로 노출된다.
-
커스텀 도메인 연결 및 SSL 발급도 매우 간단하다.