Gabia + Cloudflare + Vercel + GitHub로 나만의 웹사이트 런칭하기

📌 시작하기 전에

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

서비스 소개

graph LR
    subgraph "1️⃣ GitHub - 코드 저장소"
        GH1[📦 코드 버전 관리]
        GH2[🔄 협업 & 이력 추적]
        GH3[🤝 Vercel 연동]
    end

    subgraph "2️⃣ Gabia - 도메인 등록"
        GB1[🛒 도메인 구매]
        GB2[📝 도메인 소유권]
        GB3[🔧 네임서버 설정]
    end

    subgraph "3️⃣ Cloudflare - DNS & CDN"
        CF1[🗺️ DNS 관리<br/>IP 주소 연결]
        CF2[⚡ CDN<br/>전세계 빠른 속도]
        CF3[🔒 SSL 인증서<br/>HTTPS 보안]
        CF4[🛡️ DDoS 방어<br/>보안 강화]
    end

    subgraph "4️⃣ Vercel - 호스팅"
        VC1[🚀 자동 빌드 & 배포]
        VC2[💻 서버 호스팅]
        VC3[🌐 글로벌 CDN]
        VC4[📊 Analytics]
    end

    %% 역할 연결
    GH3 -.->|코드 푸시 시<br/>자동 트리거| VC1
    GB3 -.->|네임서버 위임| CF1
    CF1 -.->|DNS 해석| VC2
    CF2 -.->|캐싱 & 가속| VC3

    %% 스타일
    classDef githubStyle fill:#24292e,stroke:#ffffff,stroke-width:2px,color:#ffffff
    classDef gabiaStyle fill:#0066cc,stroke:#003d7a,stroke-width:2px,color:#ffffff
    classDef cloudflareStyle fill:#f6821f,stroke:#c65c0a,stroke-width:2px,color:#ffffff
    classDef vercelStyle fill:#000000,stroke:#ffffff,stroke-width:2px,color:#ffffff

    class GH1,GH2,GH3 githubStyle
    class GB1,GB2,GB3 gabiaStyle
    class CF1,CF2,CF3,CF4 cloudflareStyle
    class VC1,VC2,VC3,VC4 vercelStyle

서비스 비용

graph LR
    subgraph "💰 서비스별 비용 비교"
        direction TB

        GH["📦 GitHub<br/>━━━━━━━━━━<br/>💵 무료<br/>━━━━━━━━━━<br/>✅ Public 저장소<br/>✅ 무제한 배포<br/>✅ Actions (2,000분/월)"]

        GB["🌐 Gabia<br/>━━━━━━━━━━<br/>💵 연 15,000~30,000원<br/>━━━━━━━━━━<br/>📍 .com: ~20,000원<br/>📍 .kr: ~25,000원<br/>📍 .co.kr: ~30,000원"]

        CF["☁️ Cloudflare<br/>━━━━━━━━━━<br/>💵 무료<br/>━━━━━━━━━━<br/>✅ DNS 관리<br/>✅ 무제한 CDN<br/>✅ SSL 인증서<br/>✅ DDoS 방어"]

        VC["▲ Vercel<br/>━━━━━━━━━━<br/>💵 무료 (Hobby)<br/>━━━━━━━━━━<br/>✅ 무제한 배포<br/>✅ 100GB 대역폭/월<br/>✅ 자동 SSL<br/>⚠️ 상업용은 유료 필요"]

        Total["📊 총 비용<br/>━━━━━━━━━━<br/>💵 연 15,000~30,000원<br/>━━━━━━━━━━<br/>(도메인 비용만!)<br/>나머지는 모두 무료 ✨"]
    end

    GH -.-> Total
    GB --> Total
    CF -.-> Total
    VC -.-> Total

    classDef freeStyle fill:#4caf50,stroke:#2e7d32,stroke-width:2px,color:#fff
    classDef paidStyle fill:#ff9800,stroke:#e65100,stroke-width:2px,color:#fff
    classDef totalStyle fill:#2196f3,stroke:#1565c0,stroke-width:3px,color:#fff

    class GH,CF,VC freeStyle
    class GB paidStyle
    class Total totalStyle

개발과정

sequenceDiagram
    participant Dev as 👨‍💻 개발자
    participant Local as 💻 로컬 PC
    participant GH as 📦 GitHub
    participant VC as ▲ Vercel
    participant User as 🌍 사용자

    Note over Dev,User: 🔄 코드 업데이트 & 자동 배포 과정

    Dev->>Local: 1. 코드 수정 및 테스트
    Local->>Local: npm run dev로 로컬 확인

    Dev->>Local: 2. Git 커밋 생성
    Note right of Local: git add .<br/>git commit -m "update"

    Local->>GH: 3. GitHub에 푸시
    Note right of GH: git push origin main

    GH->>VC: 4. Webhook 트리거
    Note right of VC: 자동으로 배포 시작

    VC->>VC: 5. 코드 다운로드 & 빌드
    Note right of VC: npm install<br/>npm run build

    VC->>VC: 6. 프로덕션 배포
    Note right of VC: 전세계 서버에 배포

    VC-->>Dev: 7. 배포 완료 알림
    Note right of Dev: 이메일 & 대시보드

    User->>VC: 8. 웹사이트 접속
    VC->>User: 9. 최신 버전 제공

    Note over Dev,User: ✅ 전체 과정 소요 시간: 약 1~3분

사용자 요청 흐름

sequenceDiagram
    participant User as 🌍 사용자
    participant Browser as 🌐 브라우저
    participant CF as ☁️ Cloudflare DNS
    participant CDN as ⚡ Cloudflare CDN
    participant VC as ▲ Vercel Server

    Note over User,VC: 🌐 사용자 웹사이트 접속 과정

    User->>Browser: 1. myproject.com 입력

    Browser->>CF: 2. DNS 조회 요청
    Note right of CF: "myproject.com의<br/>IP 주소는?"

    CF->>Browser: 3. Vercel 서버 IP 반환
    Note right of CF: "76.76.21.21로<br/>접속하세요"

    Browser->>CDN: 4. HTTPS 요청
    Note right of Browser: myproject.com 페이지 요청

    alt 캐시에 있는 경우
        CDN->>Browser: 5a. 캐시된 페이지 반환 ⚡
        Note right of CDN: 초고속 응답<br/>(가장 가까운 서버)
    else 캐시에 없는 경우
        CDN->>VC: 5b. Vercel에 요청 전달
        Note right of VC: 최신 페이지 생성
        VC->>CDN: 6. 페이지 반환
        CDN->>CDN: 7. 캐시 저장
        CDN->>Browser: 8. 페이지 전달
    end

    Browser->>User: 9. 웹페이지 렌더링 ✅

    Note over User,VC: ⏱️ 전체 소요 시간: 100~500ms<br/>🔒 HTTPS 자동 암호화<br/>🌏 전세계 어디서나 빠른 속도

서비스 아키텍처

graph TB
    subgraph "개발 환경 (Local)"
        Dev[👨‍💻 개발자<br/>Windows PC]
        Code[📝 Next.js 코드<br/>로컬 프로젝트]
    end

    subgraph "코드 저장소"
        GitHub[<img src='https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png' width='20'/> GitHub<br/>코드 버전 관리]
    end

    subgraph "도메인 & DNS"
        Gabia[🌐 Gabia<br/>도메인 구매<br/>myproject.com]
        Cloudflare[☁️ Cloudflare<br/>DNS 관리<br/>CDN & 보안]
    end

    subgraph "호스팅 & 배포"
        Vercel[▲ Vercel<br/>Next.js 배포<br/>서버 호스팅]
    end

    subgraph "사용자"
        User[🌍 전세계 방문자<br/>웹 브라우저]
    end

    %% 개발 흐름
    Dev -->|1. 코드 작성| Code
    Code -->|2. git push| GitHub
    GitHub -->|3. 자동 배포| Vercel

    %% 도메인 설정 흐름
    Gabia -->|4. 네임서버 변경| Cloudflare
    Cloudflare -->|5. DNS 레코드<br/>A/CNAME| Vercel

    %% 사용자 접속 흐름
    User -->|6. myproject.com 접속| Cloudflare
    Cloudflare -->|7. 요청 전달<br/>CDN 캐싱| Vercel
    Vercel -->|8. 웹페이지 응답| User

    %% 스타일링
    classDef devStyle fill:#e1f5ff,stroke:#01579b,stroke-width:2px
    classDef codeStyle fill:#fff3e0,stroke:#e65100,stroke-width:2px
    classDef domainStyle fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
    classDef hostingStyle fill:#e8f5e9,stroke:#1b5e20,stroke-width:2px
    classDef userStyle fill:#fce4ec,stroke:#880e4f,stroke-width:2px

    class Dev,Code devStyle
    class GitHub codeStyle
    class Gabia,Cloudflare domainStyle
    class Vercel hostingStyle
    class User userStyle

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

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

4. 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 공식 문서
• Vercel 배포 가이드
• Cloudflare DNS 설정 가이드
• GitHub 기초 사용법

---

마무리

축하합니다! 🎊

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

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

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

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