Part 5.2 배포하기: Vercel로 자동배포하기

이제 전 세계 누구나 접속할 수 있는 URL을 만들어 보겠습니다. 지금까지 localhost...에서만 하셨을텐데요. 이 글을 읽고나면 지인한테도 쉽게 배포할 수 있을거에요

제가 개발을 처음 배울 때, '배포'는 굉장히 무서운 것이었습니다.

1. 내가 만든 걸 남이 본다고?...

2. 배포하고 나서 문제 생기면 어쩌지?

3. 배포는 대체 어떻게 하는거야???

걱정 마세요. Vercel이나 Netlify 같은 플랫폼 덕분에, GitHub에 코드를 올리면 자동으로 배포됩니다. 클릭 몇 번이면 끝입니다.

이번 챕터에서는 가장 많이 쓰이는 Vercel을 중심으로, 배포의 전 과정을 단계별로 안내합니다. 어렵지 않아요!!

---

다음 내용은 깃헙을 필요로 합니다. 꼭 깃헙 없어도 올릴 수 있기는 한데, '자동'을 위해서 깃헙 사용은 필수입니다. 꼭 연동해봐주세요.

1. GitHub 연동

배포의 첫 단계는 코드를 GitHub에 올리는 것입니다.

GitHub 저장소 만들기

1. github.com 접속 → 로그인

2. 우측 상단 "+" → "New repository"

3. 저장소 이름 입력

4. "Create repository" 클릭

5. 안내에 따라 로컬 코드 연결: (그대로 하나씩 타이핑해주세요)

git remote add origin https://github.com/내아이디/my-todo-app.git
git branch -M main
git push -u origin main

코드 업데이트하기

이후 코드를 수정하면: (더 자세한 커맨드는 LLM한테 물어가면서 해 보시기 바랍니다)

git add .
git commit -m "기능 추가: 할 일 삭제"
git push

또는 Cursor의 Source Control에서 클릭으로 처리 가능합니다.

---

2. Vercel 연결: 클릭 몇 번으로 배포

Vercel 가입 및 프로젝트 연결

1. vercel.com 접속

2. "Sign Up" → "Continue with GitHub" 선택 (GitHub 계정으로 가입)

3. "Add New Project" 클릭

4. GitHub 저장소 목록에서 배포할 프로젝트 선택

5. "Import" 클릭

프로젝트 설정

Import 후 설정 화면이 나옵니다:

Project Name: my-todo-app (자동 입력됨)
Framework Preset: Next.js / React / Other (자동 감지됨)
Root Directory: ./ (보통 그대로)
Build Command: npm run build (보통 그대로)
Output Directory: (프레임워크에 따라 자동)

Root Directory는 높은 확률로 다를 가능성이 있습니다. LLM한테 꼭 물어보고, 지정해주시면 실수를 줄일 수 있습니다.

• "Deploy" 클릭

• 첫 배포 완료

• 1-2분 후 배포가 완료되면:

✅ Congratulations! Your project has been deployed.
🔗 https://my-todo-app.vercel.app

이 URL로 전 세계 누구나 앱에 접속할 수 있습니다!

---

3. 자동 배포: Push하면 자동으로 업데이트

Vercel의 가장 편한 점은 자동 배포입니다.

코드 수정 → git push → Vercel이 감지 → 자동 빌드 → 자동 배포

한 번 연결해두면, git push만 하면 알아서 배포됩니다.

배포 상태 확인

Vercel 대시보드에서:

• Production: 현재 라이브 버전

• Preview: PR(Pull Request)마다 생성되는 미리보기 URL

• Building: 배포 진행 중

• Error: 빌드 실패 (로그 확인 필요)

배포 취소/롤백

실수로 버그가 있는 버전을 배포했다면:

1. Vercel 대시보드 → Deployments

2. 이전 정상 버전 찾기

3. 우측 "..." 메뉴 → "Promote to Production"

이전 버전으로 즉시 롤백됩니다.

---

4. 환경 변수 설정

이전 글에서 배웠듯이, .env 파일은 GitHub에 올라가지 않습니다. 배포 환경에서 직접 설정해야 합니다. 만약 실수로 올렸다면 LLM한테 지워달라고 하세요.

Vercel에서 환경 변수 설정

1. 프로젝트 대시보드 → Settings 탭

2. 왼쪽 메뉴 → Environment Variables

3. 변수 추가:

   • Name: NEXT_PUBLIC_SUPABASE_URL

   • Value: https://xxx.supabase.co

   • Environment: Production, Preview, Development 선택

4. "Save" 클릭

환경별 설정

Environment	용도
Production	실제 배포 환경
Preview	PR 미리보기 환경
Development	로컬 개발 (Vercel CLI 사용 시)

보통은 Production에만 설정하면 됩니다.

필수 환경 변수 체크리스트

□ NEXT_PUBLIC_SUPABASE_URL
□ NEXT_PUBLIC_SUPABASE_ANON_KEY
□ 기타 API 키들 (OpenAI 등)

환경 변수 추가 후 재배포

환경 변수를 추가/수정한 후에는 재배포가 필요합니다:

1. Deployments 탭 → 최신 배포 선택

2. 우측 "..." → "Redeploy"

3. "Redeploy" 확인

---

배포 전에 꼭 로컬에서 빌드가 되는지를 확인하기

npm run build

로컬에서 꼭 빌드를 확인하고 올리시면 에러 추적도 용이하고 불필요한 시간낭비를 줄일 수 있습니다.

로그 확인하기

배포 후 문제가 생기면 로그를 확인하세요.

빌드 로그 (배포 실패 시):

1. Vercel 대시보드 → Deployments

2. 실패한 배포 클릭

3. "Building" 단계의 로그 확인

흔한 빌드 에러:

Error: Cannot find module './components/Button'
→ 파일명/경로 오타

Type error: Property 'x' does not exist
→ TypeScript 타입 에러

Error: Missing required env variable
→ 환경 변수 설정 안 됨

런타임 로그 (배포 후 에러 시):

• Vercel 대시보드 → Logs 탭

배포가 안 된다면

1. 빌드 로그 확인 → 에러 메시지 읽기

2. 로컬에서 npm run build → 같은 에러 재현되는지

3. 에러 메시지로 검색 또는 AI에게 질문

4. 수정 후 다시 push → 자동 재배포