LEVEL 52 QUEST

실전 배포와 도메인 연결

실전 배포와 도메인 연결 — DevFoil 바이브코딩 Stage 11, Lv.52

배포(Deploy)란?

내 컴퓨터에서 전 세계로

배포는 로컬에서 개발한 웹사이트를 인터넷에 공개하는 과정입니다. 지금까지는 localhost:3000에서만 보이던 사이트를 누구나 접속 가능한 URL로 만드는 것입니다.

과거에는 서버 구매, OS 설치, 보안 설정 등 복잡한 과정이 필요했지만, 지금은 git push 한 번으로 배포할 수 있습니다.

Vercel로 배포하기

Next.js 프로젝트 최적의 배포 플랫폼

Vercel은 Next.js를 만든 회사에서 운영하는 배포 플랫폼입니다. GitHub 리포와 연결하면, push할 때마다 자동으로 배포됩니다.

# Vercel 배포 3단계

# 1단계: Vercel CLI 설치 & 로그인
npm install -g vercel
vercel login

# 2단계: 프로젝트 배포 (첫 배포)
cd my-landing-page
vercel

# 질문에 답하기:
# ? Set up and deploy? → Y
# ? Which scope? → 내 계정 선택
# ? Link to existing project? → N
# ? Project name? → my-landing-page
# ? Directory? → ./

# 3단계: 프로덕션 배포
vercel --prod

# 결과:
# ✅ Production: https://my-landing-page.vercel.app

GitHub 연동 자동 배포

# GitHub 연동 후 자동 배포 흐름

1. Vercel 대시보드 → "New Project"
2. GitHub 리포지토리 선택
3. 자동 감지: Framework(Next.js), Build Command, Output Dir
4. "Deploy" 클릭

# 이후 workflow:
git add .
git commit -m "새 기능 추가"
git push origin main
# → Vercel이 자동으로 감지 → 빌드 → 배포
# → 1~2분 후 라이브 반영

# PR을 만들면 Preview 배포도 자동 생성
# → 리뷰어가 PR 미리보기 URL로 확인 가능

🔒

여기까지는 미리보기입니다

실전 배포와 도메인 연결
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)