Ch.21 배포 — Vercel로 세상에 공개하기
배포란? — 내 컴퓨터에서 세계로
localhost:3000은 나만 볼 수 있다
열심히 만든 앱을 친구에게 보여주고 싶은데, "localhost:3000 들어와봐"라고 하면 안 됩니다.
내 컴퓨터의 앱을 전 세계가 보게 하려면?
배포(Deploy) — 로컬 코드를 서버에 올려 누구나 접속할 수 있게 만드는 과정입니다.
핵심 내용
코드를 서버에 올리면 전 세계 누구나 접속할 수 있습니다
로컬 개발: localhost:3000에서 코드 작성 & 테스트
서버 업로드: 코드를 클라우드 서버에 올림
도메인 연결: myapp.vercel.app 같은 주소로 접속 가능
바이브 코더 팁 Next.js 앱이라면 서버리스(Vercel)가 최적입니다. 서버 설정 없이 git push만으로 배포됩니다.
Next.js를 만든 회사가 배포 플랫폼도 만들었습니다
GitHub에 코드가 있으면 3분 만에 배포됩니다
1. GitHub 연결: vercel.com 가입 → GitHub 계정 연동
2. Import: 배포할 레포지토리 선택 → Import 클릭
3. Deploy: Framework를 자동 감지 → Deploy 클릭 → 완료!
# 로컬에서 준비할 것
# 1. GitHub에 레포 생성 & 푸시
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/username/my-app.git
git push -u origin main
# 2. vercel.com에서 Import
# → 자동으로 Next.js 감지
# → Deploy 버튼 클릭
# 3. 완료! 접속 주소:
# https://my-app.vercel.app배포 후 확인할 것 배포된 URL을 브라우저에서 열어보세요. 모바일에서도 확인하면 반응형 문제를 잡을 수 있습니다.
Vercel에 배포하려면 Docker를 설치해야 한다
Vercel의 배포 방식은 다음 중 어디에 해당하나요?
Vercel 배포의 올바른 순서는?
핵심 용어
정적 호스팅
HTML/CSS/JS 파일만 서빙. GitHub Pages, Netlify
서버 호스팅
Node.js/Python 서버 실행. AWS EC2, Railway
서버리스
함수 단위 실행, 서버 관리 불필요. Vercel, AWS Lambda
GitHub 자동 연동
push하면 자동으로 빌드 & 배포
무료 티어
개인 프로젝트는 무료. 월 100GB 대역폭
글로벌 CDN
전 세계 엣지 서버에서 빠르게 서빙
HTTPS 자동
SSL 인증서 자동 발급. 보안 걱정 없음
비교 정리
| 항목 | 전통적 배포 | Vercel 배포 |
|---|---|---|
| 서버 설정 | Nginx, PM2, Docker 직접 설정 | 설정 불필요 — 자동 감지 |
| 배포 방법 | SSH 접속 → git pull → 빌드 → 재시작 | git push만 하면 끝 |
| 비용 | 월 $5~50 서버 비용 | 개인 프로젝트 무료 |
정리 노트
배포(Deploy) 핵심 정리
배포 기본 개념
- 배포(Deploy)
- 로컬 코드를 서버에 올려 누구나 접속할 수 있게 만드는 과정
- 호스팅
- 서버 공간을 빌려 웹사이트를 24시간 운영하는 것
- Vercel
- Next.js에 최적화된 무료 배포 플랫폼, GitHub 연동으로 자동 배포
배포 3단계
- 1. GitHub 연결
- Vercel에 GitHub 계정을 연동
- 2. Import
- 배포할 레포지토리를 선택
- 3. Deploy
- 클릭 한 번으로 자동 빌드 & 배포
localhost는 나만 보는 주소, Vercel 배포 후엔 전 세계가 접속 가능합니다.
시각 자료
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작