통합 요약노트

Ch.21 배포 — Vercel로 세상에 공개하기

Vercel 배포, 환경변수, 도메인, CI/CD

이 챕터의 내용

1

배포란? — 내 컴퓨터에서 세계로

배포(Deploy) — 로컬 코드를 서버에 올려 누구나 접속할 수 있게 만드는 과정입니다.

코드를 서버에 올리면 전 세계 누구나 접속할 수 있습니다

Next.js를 만든 회사가 배포 플랫폼도 만들었습니다

GitHub에 코드가 있으면 3분 만에 배포됩니다

상세 노트 보기arrow_forward
2

환경변수와 도메인

환경변수(.env) — 코드에 노출하지 않고 비밀 값을 주입하는 표준 방법입니다.

API 키는 코드가 아니라 환경변수에 넣습니다

.env.local은 로컬 전용 배포 서버에는 따로 설정해야 합니다

myapp.vercel.app 대신 나만의 도메인을 사용하세요

상세 노트 보기arrow_forward
3

CI/CD와 프리뷰 배포

CI/CD — 코드 변경을 감지해 자동으로 빌드·테스트·배포하는 파이프라인입니다.

코드를 push하면 자동으로 빌드·테스트·배포됩니다

PR을 만들면 전용 URL이 자동 생성됩니다

배포가 실패하면? 빌드 로그를 확인하세요

상세 노트 보기arrow_forward

key

핵심 용어 모음

📄

정적 호스팅

HTML/CSS/JS 파일만 서빙. GitHub Pages, Netlify

🖥️

서버 호스팅

Node.js/Python 서버 실행. AWS EC2, Railway

서버리스

함수 단위 실행, 서버 관리 불필요. Vercel, AWS Lambda

🔗

GitHub 자동 연동

push하면 자동으로 빌드 & 배포

🆓

무료 티어

개인 프로젝트는 무료. 월 100GB 대역폭

🌍

글로벌 CDN

전 세계 엣지 서버에서 빠르게 서빙

🔒

HTTPS 자동

SSL 인증서 자동 발급. 보안 걱정 없음

🌐

NEXT_PUBLIC_ 있음

브라우저 + 서버 모두 접근 가능. 노출돼도 괜찮은 값만!

🔒

NEXT_PUBLIC_ 없음

서버에서만 접근 가능. API 키, DB 비밀번호 등 비밀 값

🚀

Production

실제 사용자가 접속하는 환경. 진짜 API 키 사용

👀

Preview

PR 프리뷰용. 테스트 API 키 사용 가능

💻

Development

로컬 개발용. vercel env pull로 .env.local 동기화

compare_arrows

비교 정리

항목전통적 배포Vercel 배포
서버 설정Nginx, PM2, Docker 직접 설정설정 불필요 — 자동 감지
배포 방법SSH 접속 → git pull → 빌드 → 재시작git push만 하면 끝
비용월 $5~50 서버 비용개인 프로젝트 무료

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 코스 시작하기