포트폴리오 배포 준비 ② ㅡ Vercel 배포 & 도메인 구조 이해하기

0. 목적

GitHub에 업로드한 포트폴리오 프로젝트를
Vercel에 배포해 실제 접속 가능한 웹사이트로 만들고,
배포 과정에서 겪은 문제와 도메인 관련 구조를 기록한다.

---

1. 개발 환경

• OS: Windows
• Editor: Cursor
• Framework: Next.js (App Router)
• 진행 상: GitHub 업로드 완료 (1편) https://bytesumcookies.tistory.com/9

---

2. Vercel 배포

2-1. Vercel 로그인 & GitHub 권한 승인

• Vercel 접속 → GitHub로 로그인
• Import 과정에서 GitHub 저장소 읽기 권한 필요 (Vercel 앱 설치)
• Only select repositories로 포트폴리오 repo만 허용

2-2. Import 후 Deploy

• Framework preset이 Next.js로 자동 인식
• 설정 거의 건드릴 것 없이 Deploy

2-3. Deployment/Domain 링크 차이

• Deployment: 특정 배포 스냅샷(기록용)
• Domain (~.vercel.app): 항상 최신 배포를 가리키는 대표 주소(공유용)

---

3. 도메인 구매 & Vercel 연결 (bytesumcookies.com)

3-1. 도메인 구매

• ~.vercel.app 주소는 도메인 구매 없이 사용 가능
• 도메인 구매는 필수가 아니라 선택
• 구매일 기준 1년 단위 갱신

3-2. Vercel에 도메인 추가

경로: Vercel Project → Settings → Domains

• bytesumcookies.com 추가
• www.bytesumcookies.com도 함께 잡힘(리디렉션 구조)

• 

3-3. DNS 설정 (Cloudflare에서 레코드 추가)

Vercel이 안내한 값대로 Cloudflare DNS에 레코드를 넣었다.

• 루트 도메인(@): A 레코드
• www: CNAME 레코드

3-4. 상태 변화

• 권장값 안내, 반영에 시간 소요됨
• DNS Change Recommended → Valid Configuration

3-5. 최종 확인

• 포트폴리오 접속과 정상화면 출력까지 확인 

---

4. 결과

• GitHub에 올린 포트폴리오를 Vercel로 배포
• 도메인(bytesumcookies.com)을 구매해 DNS를 연결
• 내 도메인으로 접속 가능한 포트폴리오 사이트를 완성