현재 프로젝트의 @app 경로를 Vercel 서비스를 통해 배포하기 위해 통합적으로 준비상태를 검토해줘
| 항목 | 상태 | 비고 |
|---|---|---|
| 프레임워크 | OK | Vite 8 + React 19, framework: "vite" 명시 |
| 빌드 스크립트 | OK | tsc -b && vite build — 타입체크까지 게이트 |
| Node 버전 | OK | engines.node: ">=22.0.0", .nvmrc 24 (Vercel 기본 Node 24 LTS와 호환) |
outputDirectory |
OK | dist 명시 |
| 심볼릭 링크 자산 | OK | public/assets, public/pages → 상위 워크스페이스. Vite 빌드 시 실제 파일로 복사됨을 확인 |
dist/index.html, JS·CSS, 이미지 |
OK | 빌드 후 vite preview 로 200 응답 검증 |
| Lint | OK | npm run lint 클린 |
Vercel: Build and deploy the best web experiences with the AI Cloud
Vercel 프로젝트 생성:
Build Settings:
환경변수 등록 (프로젝트에 따라 필요한 경우):
.env 또는 프로젝트 실행을 위해 로컬 환경변수에 설정된 키 입력
GEMINI_API_KEY=**{YOUR-KEY-HERE}**
OPENAI_API_KEY=**{YOUR-KEY-HERE}**
ANTHROPIC_API_KEY=**{YOUR-KEY-HERE}**
PERPLEXITY_API_KEY=**{YOUR-KEY-HERE}**
<aside> ☝🏻
[ADVANCED] 백엔드가 별도 서버로 구성되어 있는 경우 프론트엔드 프레임워크가 백엔드 서버를 찾을 수 있도록 주소 등록하기.
**프론트엔드 개발 현황 점검:**
백엔드 API 호출 기준 URL 이 배포에 적합하도록 환경변수 처리가 되어있는지 확인해주고, 안되어 있다면 지금 적용해줘.
VITE_API_URLNEXT_PUBLIC_API_URL/ 제외 주의).
</aside>배포 하기: Deploy 클릭
나만의 도메인(
my-service-name.com)을 통해서 프로젝트를 소개해 봅시다!
바이브 프로젝트용 “저렴한” 도메인 구매 추천 사이트 (Namecheap, gabia 등):
Vercel에 도메인 추가:
Vercel 대시보드 -> Settings -> [Domains]
구매한 도메인 입력 (예: vibecoding-test.com) -> Add
오류 화면 확인: "Invalid Configuration"이 뜨면서 Vercel이 2개의 네임서버 주소를 알려줌
ns1.vercel-dns.com
ns2.vercel-dns.com
⇒ 이 두 주소를 복사! Vercel이 관리하는 컴퓨터 주소록!
Namecheap(또는 도메인을 구매한 다른 호스팅 사이트)에서 네임서버 변경 (The Switch):
Namecheap BasicDNS를 Custom DNS*로 변경연결 확인:
Vercel 화면으로 돌아오면 자동으로 새로고침 되며 파란색 체크 표시(Valid)가 뜸
*네임서버 변경은 전파되는 데 시간이 조금 더 걸릴 수 있습니다 (빠르면 5분, 늦으면 수 시간)
DNS Propagation Checker - Global DNS Checker Tool
DNS Propagation Checker - Check DNS Propagation Worldwide
→ DNS 전파 체커 서비스 2개 이상으로 지역 커버리지 확인!