📌 시작하기 전에

지난시간에 Windows 환경에서 Gemini CLI를 활용해 Next.js 프로젝트를 개발하는 방법을 배웠습니다. 이제 개발한 프로젝트를 실제로 배포하여 전 세계 누구나 접속할 수 있는 웹사이트로 만들어보겠습니다.

서비스 소개

서비스 비용

개발과정

사용자 요청 흐름

서비스 아키텍처

이번 튜토리얼에서 배울 내용

  1. **GitHub **로 코드 버전 관리하기
  2. **Gabia **에서 도메인 구매하기
  3. **Cloudflare **로 도메인 DNS 관리하기
  4. **Vercel **에 프로젝트 배포하기
  5. 커스텀 도메인 연결하기

필요한 준비물

  • ✅ Next.js 프로젝트 (지난주 수업에서 만든 프로젝트)
  • ✅ GitHub 계정
  • ✅ Vercel 계정 (GitHub 계정으로 가입)
  • ✅ Gabia 계정 (도메인 구매용)
  • ✅ Cloudflare 계정 (무료)

1단계: GitHub로 코드 관리하기

1-1. Git 설치 확인

Windows PowerShell 또는 명령 프롬프트를 열고 Git이 설치되어 있는지 확인합니다.

git --version
Git이 설치되어 있지 않다면 git-scm.com에서 다운로드하여 설치하세요.

1-2. GitHub 저장소 생성

  1. GitHub에 로그인합니다
  2. 우측 상단의 + 버튼 클릭 → New repository 선택
  3. 저장소 정보 입력:
    • **Repository name **: my-nextjs-project (원하는 이름 입력)
    • **Description **: 프로젝트 설명 (선택사항)
    • **Public/Private **: Public 선택 (무료 배포 시)
    • Initialize 옵션들은 모두 체크하지 않음
  4. Create repository 클릭

1-3. 로컬 프로젝트를 GitHub에 업로드

Next.js 프로젝트 폴더로 이동한 후 다음 명령어를 실행합니다:

# Git 초기화
git init

# .gitignore 파일 확인 (Next.js는 자동으로 생성됨)
# 없다면 생성 필요

# 모든 파일 스테이징
git add .

# 첫 커밋 생성
git commit -m "Initial commit: Next.js project setup"

# GitHub 저장소를 원격 저장소로 추가
git remote add origin https://github.com/YOUR_USERNAME/my-nextjs-project.git

# main 브랜치로 푸시
git branch -M main
git push -u origin main
**💡 Tip **: YOUR_USERNAME을 본인의 GitHub 사용자명으로 변경하세요.

2단계: Gabia에서 도메인 구매하기

2-1. 도메인 검색 및 구매

  1. Gabia에 접속하여 로그인
  2. 상단 메뉴에서 도메인 → 도메인 등록 클릭
  3. 원하는 도메인 이름을 검색합니다
    • 예: myproject.com, myawesomesite.kr
  4. 사용 가능한 도메인 확인 후 장바구니에 추가
  5. 결제 진행 (1년 기준 약 15,000원~30,000원)

2-2. 도메인 소유 확인

구매 완료 후 나의 서비스 관리 → 도메인 메뉴에서 구매한 도메인을 확인할 수 있습니다.

3단계: Cloudflare로 도메인 DNS 관리하기

Cloudflare를 사용하면 무료 CDN, SSL 인증서, DDoS 방어 등의 혜택을 받을 수 있습니다.

3-1. Cloudflare에 도메인 추가

  1. Cloudflare에 로그인
  2. Add a Site 버튼 클릭
  3. Gabia에서 구매한 도메인 입력 (예: myproject.com)
  4. 무료 플랜 선택 (Free plan)
  5. Continue 클릭

3-2. DNS 레코드 가져오기

Cloudflare가 자동으로 기존 DNS 레코드를 스캔합니다.

  • 스캔 완료 후 Continue 클릭

3-3. 네임서버 변경

Cloudflare가 제공하는 네임서버 정보를 확인합니다:

예시:
alexa.ns.cloudflare.com
todd.ns.cloudflare.com
Gabia에서 네임서버 변경하기:
  1. Gabia 사이트 접속 → 나의 서비스 관리 → 도메인
  2. 해당 도메인의 관리 버튼 클릭
  3. 네임서버 메뉴 선택
  4. 네임서버 변경 클릭
  5. 다른 네임서버 사용 선택
  6. Cloudflare에서 제공한 2개의 네임서버 입력
  7. 저장

**⏰ 주의 **: DNS 전파에는 최대 24시간이 소요될 수 있지만, 보통 10분~1시간 이내에 완료됩니다.

3-4. Cloudflare에서 확인

Cloudflare로 돌아가서 Done, check nameservers 클릭
  • 네임서버 변경이 확인되면 이메일로 알림이 옵니다

4단계: Vercel에 Next.js 프로젝트 배포하기

Vercel은 Next.js를 개발한 회사에서 제공하는 배포 플랫폼으로, Next.js와 완벽하게 호환됩니다.

4-1. Vercel 계정 생성 및 연결

  1. Vercel에 접속
  2. Sign Up 클릭
  3. GitHub 계정으로 로그인 (권장)
  4. Vercel이 GitHub 저장소에 접근할 수 있도록 권한 부여

4-2. 프로젝트 가져오기

  1. Vercel 대시보드에서 Add New... → Project 클릭
  2. GitHub 저장소 목록에서 배포할 프로젝트 선택
  3. Import 클릭

4-3. 프로젝트 설정

Vercel이 자동으로 Next.js 프로젝트를 감지합니다:

  • **Framework Preset **: Next.js (자동 선택됨)
  • **Root Directory **: ./ (기본값)
  • **Build Command **: npm run build (자동 설정)
  • **Output Directory **: .next (자동 설정)
환경 변수가 필요한 경우 Environment Variables 섹션에서 추가:
예시:
NEXT_PUBLIC_API_URL = https://api.example.com
DATABASE_URL = your-database-url

4-4. 배포 시작

Deploy 버튼을 클릭합니다.

배포 진행 상황을 실시간으로 확인할 수 있으며, 보통 1~3분 내에 완료됩니다.

4-5. 배포 완료 확인

배포가 완료되면 Vercel이 자동으로 생성한 URL을 확인할 수 있습니다:

https://my-nextjs-project-username.vercel.app

이 URL로 접속하여 웹사이트가 정상적으로 작동하는지 확인하세요!

5단계: 커스텀 도메인 연결하기

이제 Gabia에서 구매한 도메인을 Vercel 프로젝트에 연결해보겠습니다.

5-1. Vercel에서 도메인 추가

  1. Vercel 프로젝트 대시보드에서 Settings 탭 클릭
  2. 왼쪽 메뉴에서 Domains 선택
  3. 구매한 도메인 입력 (예: myproject.com)
  4. Add 클릭

5-2. DNS 레코드 설정

Vercel이 DNS 설정 방법을 안내합니다.

Cloudflare에서 DNS 레코드 추가:
  1. Cloudflare 대시보드에서 해당 도메인 선택
  2. DNS → Records 메뉴로 이동
  3. 다음 레코드들을 추가합니다:
A 레코드 (루트 도메인용):
Type: A
Name: @
IPv4 address: 76.76.21.21
Proxy status: Proxied (오렌지 구름 아이콘)
CNAME 레코드 (www 서브도메인용):
Type: CNAME
Name: www
Target: cname.vercel-dns.com
Proxy status: Proxied
  1. Save 클릭

5-3. 도메인 확인

Vercel로 돌아가면 자동으로 도메인 설정을 확인합니다.

  • ✅ 녹색 체크 표시가 나타나면 성공!
  • 보통 수 분 내에 활성화되지만, 최대 48시간이 걸릴 수 있습니다.

5-4. SSL 인증서 자동 발급

Vercel과 Cloudflare가 자동으로 SSL 인증서를 발급하여 https:// 연결을 지원합니다.
이제 https://myproject.com으로 접속하면 여러분의 웹사이트를 볼 수 있습니다! 🎉

6단계: 자동 배포 설정

GitHub와 Vercel 연동의 장점

Vercel은 GitHub 저장소와 자동으로 연동되어 있어서:

  1. **main 브랜치 **에 코드를 푸시하면 → 자동으로 프로덕션 배포
  2. **다른 브랜치 **에 푸시하면 → 미리보기 배포 생성

코드 업데이트 및 자동 배포

# 코드 수정 후
git add .
git commit -m "Update homepage design"
git push origin main

푸시 즉시 Vercel이 자동으로 새 버전을 빌드하고 배포합니다!

배포 상태 확인

  • Vercel 대시보드에서 실시간 빌드 로그 확인 가능
  • GitHub 커밋 옆에 Vercel 배포 상태가 표시됨

🎯 최종 체크리스트

배포가 완료되었다면 다음 사항들을 확인하세요:

  • GitHub 저장소에 코드가 업로드되어 있다
  • Gabia에서 도메인을 구매했다
  • Cloudflare 네임서버로 변경이 완료되었다
  • Vercel에 프로젝트가 배포되었다
  • 커스텀 도메인이 연결되었다
  • SSL 인증서가 활성화되었다 (https://)
  • 웹사이트가 정상적으로 작동한다

🚀 다음 단계

성능 최적화

  1. **이미지 최적화 **: Next.js의 Image 컴포넌트 활용
  2. **번들 크기 분석 **: npm run build 후 번들 크기 확인
  3. **캐싱 전략 **: Cloudflare의 캐싱 규칙 설정

모니터링 및 분석

  1. **Vercel Analytics **: 실시간 방문자 통계
  2. **Google Analytics **: 상세한 사용자 행동 분석
  3. **Google Search Console **: SEO 및 검색 성능 모니터링

보안 강화

  1. **환경 변수 **: 민감한 정보는 반드시 환경 변수로 관리
  2. **Cloudflare 방화벽 **: DDoS 방어 규칙 설정
  3. **정기 업데이트 **: 종속성 패키지 정기 업데이트

💡 문제 해결 (Troubleshooting)

배포 실패 시

에러 메시지를 확인하세요:
  • Vercel 대시보드의 Deployment 로그 확인
  • package.json의 빌드 스크립트 확인
  • 환경 변수가 제대로 설정되었는지 확인
# 로컬에서 빌드 테스트
npm run build

도메인이 연결되지 않을 때

  1. DNS 전파 확인: whatsmydns.net에서 확인
  2. Cloudflare DNS 레코드가 올바른지 확인
  3. Vercel 도메인 설정에서 상태 확인

SSL 인증서 오류

  • Cloudflare의 SSL/TLS 설정을 Full 또는 Full (strict)로 변경
  • 최대 24시간 대기 후 재확인

📚 참고 자료

마무리

축하합니다! 🎊

이제 여러분은 Next.js 프로젝트를 개발하고, GitHub로 코드를 관리하며, Vercel을 통해 전 세계에 배포하는 전체 프로세스를 완료했습니다.

앞으로 코드를 수정할 때마다 GitHub에 푸시만 하면 자동으로 배포되기 때문에 개발에만 집중할 수 있습니다.

이 과정이 어렵게 느껴졌다면 처음에는 정상입니다. 몇 번 반복하다 보면 자연스럽게 익숙해질 것입니다.

여러분의 웹 개발 여정에 행운을 빕니다! 🚀

**작성일 **: 2025년 11월
**대상 **: Next.js 초급

중급 개발자
**소요 시간 **: 약 1

2시간 (DNS 전파 시간 제외)