배포까지 한 번에! — Vercel로 CI/CD 구성하기

코드를 GitHub에 올리기만 했는데 블로그가 자동으로 배포된다면?
이건 마법이 아니고, 바로 Vercel + GitHub의 조합 덕분입니다.

이번 글에서는 Next.js의 공식 배포 플랫폼인 Vercel을 통해
자동 빌드 + 자동 배포가 포함된 완전한 CI/CD 환경을 만드는 과정을 안내할게요.

---

🧾 1. Vercel이란?

Vercel은 Next.js 개발사에서 만든 정적 & 서버리스 웹사이트를 위한 클라우드 플랫폼입니다.

• Next.js와 최적의 호환성
• GitHub 연동 → 커밋만 해도 자동 배포
• 커스텀 도메인, 환경변수, 프리뷰 빌드 지원

즉, 블로그 운영에 딱 맞는 플랫폼이죠!

---

🛠️ 2. Vercel 배포 준비

먼저 코드를 GitHub에 푸시합니다:

git init
git remote add origin https://github.com/yourname/my-blog.git
git add .
git commit -m "init blog"
git push -u origin main

이제 https://vercel.com 에 접속해 로그인하세요 (GitHub 연동 필요).

---

⚡ 3. GitHub 저장소 연동 및 배포

1. "Add New Project" 클릭
2. GitHub 저장소 선택
3. 프레임워크: Next.js 자동 인식됨
4. 설정 그대로 → Deploy 클릭!

배포가 완료되면 https://your-project.vercel.app 도메인으로 바로 접속할 수 있어요.

이제 이후부터는 커밋만 해도 자동 빌드 + 배포까지 완료됩니다.

---

🔧 4. 환경변수 설정 (옵션)

API 키 등 민감한 정보는 환경변수로 관리합니다.

1. Vercel 프로젝트 → Settings → Environment Variables
2. MY_API_KEY와 같은 Key/Value 등록
3. process.env.MY_API_KEY 로 코드에서 사용

주의: 환경변수 변경 후에는 재배포가 필요합니다.

---

🌿 5. 커스텀 도메인 연결 (옵션)

원하는 도메인을 연결해 멋진 주소를 만들 수 있어요.

1. Settings → Domains → “Add” 클릭
2. blog.yourdomain.com 같은 주소 등록
3. 도메인 DNS 설정에서 Vercel에서 안내하는 A/CNAME 레코드 적용

SSL도 자동 적용되어 https도 바로 작동됩니다.

---

✅ 마무리하며

코드를 푸시하면 배포가 완료되는 블로그.
이제 진짜 개발자의 블로그다운 자동화된 환경이 완성됐습니다.

직접 만든 블로그를 다른 사람과 공유할 수 있다는 건,
큰 성취감이자 성장의 순간이기도 하죠.

“한 줄의 커밋이 세상에 닿는 순간.”