📌 시작하기 전에

지난시간에 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에서](https://git-scm.com/)에서) 다운로드하여 설치하세요.

1-2. GitHub 저장소 생성

  1. GitHub에](https://github.com)에) 로그인합니다
  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](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에](https://www.gabia.com/)에) 접속하여 로그인
  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에](https://www.cloudflare.com/)에) 로그인
  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에](https://vercel.com/)에) 접속
  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](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](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://`) 연결을 지원합니다.

이제 [https://myproject.com으로](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에서](https://www.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 전파 시간 제외)