Ch.21 배포 — Vercel로 세상에 공개하기
환경변수와 도메인
API 키를 코드에 직접 넣었나요?
OpenAI API 키를 코드에 하드코딩하면 GitHub에 올리는 순간 전 세계에 공개됩니다.
비밀 정보를 안전하게 관리하는 방법은?
환경변수(.env) — 코드에 노출하지 않고 비밀 값을 주입하는 표준 방법입니다.
핵심 내용
API 키는 코드가 아니라 환경변수에 넣습니다
# .env.local (루트 디렉토리에 생성)
# .gitignore에 자동 포함 → GitHub에 안 올라감
# 서버에서만 사용 (API 키 등)
OPENAI_API_KEY=sk-abc123...
DATABASE_URL=postgresql://...
# 브라우저에서도 사용 (NEXT_PUBLIC_ 접두사)
NEXT_PUBLIC_SITE_URL=https://myapp.com
NEXT_PUBLIC_GA_ID=G-XXXXXX핵심 규칙 API 키에는 절대 NEXT_PUBLIC_을 붙이지 마세요. 붙이면 브라우저에서 누구나 볼 수 있습니다.
.env.local은 로컬 전용 배포 서버에는 따로 설정해야 합니다
Settings: Vercel 대시보드 → 프로젝트 → Settings
Environment Variables: Key-Value 쌍으로 입력
환경 선택: Production / Preview / Development 구분
# Vercel CLI로 환경변수 동기화
# 대시보드에서 설정한 값을 로컬로 가져오기
npx vercel env pull .env.local
# 결과: .env.local 파일이 생성/업데이트됨
# OPENAI_API_KEY=sk-abc123...
# DATABASE_URL=postgresql://...myapp.vercel.app 대신 나만의 도메인을 사용하세요
도메인 구매: Namecheap, 가비아 등에서 구매 (연 $10~15)
DNS 설정: A 레코드 또는 CNAME을 Vercel로 지정
HTTPS 자동: Vercel이 SSL 인증서를 자동 발급 & 갱신
# Vercel 대시보드 → Settings → Domains
# 도메인 입력: myapp.com
# DNS 설정 (도메인 업체에서)
# Type: A
# Name: @
# Value: 76.76.21.21
# 또는 CNAME
# Type: CNAME
# Name: www
# Value: cname.vercel-dns.com바이브 코더 팁 처음에는 무료 .vercel.app 도메인으로 충분합니다. 프로젝트가 커지면 그때 커스텀 도메인을 연결하세요.
브라우저에서 접근 가능한 환경변수의 접두사는?
API 키에 NEXT_PUBLIC_ 접두사를 붙여야 API를 호출할 수 있다
Vercel에 커스텀 도메인을 연결할 때 HTTPS는?
핵심 용어
NEXT_PUBLIC_ 있음
브라우저 + 서버 모두 접근 가능. 노출돼도 괜찮은 값만!
NEXT_PUBLIC_ 없음
서버에서만 접근 가능. API 키, DB 비밀번호 등 비밀 값
Production
실제 사용자가 접속하는 환경. 진짜 API 키 사용
Preview
PR 프리뷰용. 테스트 API 키 사용 가능
Development
로컬 개발용. vercel env pull로 .env.local 동기화
정리 노트
환경변수 & 도메인 핵심 정리
환경변수
- .env.local
- API 키 등 비밀 값을 저장하는 파일, Git에 올리면 안 됨
- NEXT_PUBLIC_
- 브라우저에서 접근 가능한 환경변수 접두사
- Vercel 환경변수
- Settings → Environment Variables에서 서버 측 비밀 값 설정
커스텀 도메인
- 도메인 연결
- Vercel에서 커스텀 도메인을 추가하고 DNS 레코드 설정
- HTTPS
- Vercel이 SSL 인증서를 자동 발급 & 갱신
환경변수는 반드시 .gitignore에 추가하고, Vercel 대시보드에서 별도로 설정하세요.
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작