# [Next.js + TS 실전] 3. Vercel에 배포하기

[Next.js + TS 실전] 3. Vercel에 배포하기

실전 2편까지 로컬에서 Prisma + SQLite로 메모가 저장됩니다.
이번 편은 다른 사람이 URL로 접속할 수 있게 배포합니다.
목표: GitHub → Vercel 배포 · 환경 변수 · SQLite 한계와 대안.

---

이 편에서 할 일

1. 배포 전 로컬 빌드 확인
2. GitHub에 올리고 Vercel 연결
3. 환경 변수 설정 이해
4. 왜 Vercel에서 SQLite가 힘든지 알기
5. 현실적인 DB 선택지 정리 (Postgres 등)

“버튼 몇 번이면 끝”만 말하지 않습니다.
로컬 SQLite 앱을 그대로 Vercel에 올리면 어디서 막히는지까지 같이 봅니다.

---

배포가 되면 뭐가 바뀌나

	로컬	배포 후
접속	localhost:3000	https://something.vercel.app
서버	내 PC	Vercel 클라우드
데이터	prisma/dev.db 파일	파일 DB는 보통 유지 안 됨

화면(Next.js) 배포와 데이터 저장은 별개입니다.
이번 편의 핵심도 그 구분입니다.

---

1) 배포 전: 로컬에서 빌드해 보기

memo-app에서:

npm run build

에러 없이 끝나면 배포 가능성이 높습니다.
여기서 깨지면 Vercel에서도 거의 같은 에러가 납니다.

개발 서버만 켜 보는 것과 다릅니다.

• npm run dev → 개발용
• npm run build → 프로덕션 결과물 만들기

---

2) GitHub에 올리기

Vercel은 GitHub 저장소와 연결하는 방식이 가장 쉽습니다.

아직 git이 없다면 memo-app에서:

git init
git add .
git commit -m "Add memo app with Prisma"

.gitignore에 아래가 있는지 확인하세요.

.env
.env*.local
prisma/dev.db
prisma/dev.db-journal
node_modules
.next

GitHub에 새 저장소를 만들고 push:

git remote add origin https://github.com/본인계정/memo-app.git
git branch -M main
git push -u origin main

.env는 올리지 않습니다.
DB URL은 Vercel 대시보드에서 따로 넣습니다.

---

3) Vercel에 프로젝트 연결

1. https://vercel.com 가입/로그인 (GitHub 연동 권장)
2. Add New… → Project
3. 방금 push한 저장소 Import
4. Root Directory가 memo-app이면 (모노레포인 경우) 그 폴더로 지정
5. Framework Preset: Next.js (보통 자동)
6. Deploy

첫 배포는 DB 없이도 프론트가 뜰 수 있지만,
메모 CRUD는 DB URL이 없으면 런타임에서 실패합니다.

---

4) 왜 SQLite는 Vercel과 안 맞나

로컬 SQLite는 디스크의 한 파일입니다.

Vercel(서버리스)은 대략 이렇게 동작합니다.

• 요청마다 짧은 수명의 함수가 뜸
• 파일 시스템은 읽기 위주 / 임시
• 인스턴스가 여러 개일 수 있음
• 재배포하면 로컬 파일이 날아감

그래서 file:./dev.db 방식은:

• 쓰기가 안 되거나
• 써도 다음 요청/재배포에 사라지거나
• 인스턴스마다 다른 DB를 보는

문제가 납니다.

한 줄로:

Vercel에 올릴 앱의 “진짜 DB”는 파일이 아니라, 외부 데이터베이스 서비스가 필요하다.

로컬 학습용 SQLite는 여전히 훌륭합니다.
배포 단계에서만 교체하면 됩니다. (실전 2편에서 lib/memos.ts만 바꾼 이유)

---

5) 배포용 DB 선택지

입문·실전 시리즈 기준으로 현실적인 선택:

선택	특징	추천
Neon / Supabase (Postgres)	Prisma와 궁합 좋음, 무료 티어 있음	⭐ 가장 무난
Turso (libSQL)	SQLite 호환에 가까운 원격 DB	SQLite 감각 유지하고 싶을 때
Prisma Postgres	Prisma 생태계 연동	Prisma 문서 따라가기 쉬움
로컬 SQLite만	배포 CRUD 불가에 가깝음	화면만 배포 데모용

이번 편에서는 방향을 Postgres(Neon 등)로 바꾼다고 잡고,
구체적인 클릭 경로는 서비스 UI가 자주 바뀌므로 공통 절차만 적습니다.

---

6) Postgres로 바꾸는 큰 그림

(1) 클라우드에서 DB 만들기

Neon / Supabase 등에서 프로젝트를 만들고
Connection string을 복사합니다. 예:

postgresql://USER:PASSWORD@HOST/DB?sslmode=require

(2) 스키마 provider 변경

prisma/schema.prisma:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

Memo 모델은 그대로 둬도 됩니다.

(3) 로컬 .env도 잠시 Postgres로

DATABASE_URL="postgresql://..."

그다음:

npx prisma migrate dev --name postgres-init

(4) Vercel 환경 변수

Vercel Project → Settings → Environment Variables

Name	Value
DATABASE_URL	Postgres 연결 문자열

Production / Preview에 체크하고 저장한 뒤 Redeploy.

(5) 코드는?

lib/memos.ts, Server Action, 페이지는 그대로인 경우가 많습니다.
바뀌는 건 주로:

• provider
• DATABASE_URL
• migrate 대상 DB

이게 데이터 레이어를 나눠 둔 보답입니다.

---

7) Vercel 빌드에서 Prisma 자주 하는 설정

package.json에 빌드 직전 generate를 넣는 경우가 많습니다.

{
  "scripts": {
    "dev": "next dev",
    "build": "prisma generate && next build",
    "start": "next start",
    "postinstall": "prisma generate"
  }
}

• postinstall: npm install 직후 클라이언트 생성
• build 앞 prisma generate: Vercel 빌드 환경에서 타입/엔진 준비

마이그레이션을 배포 파이프라인에 넣을지는 팀마다 다릅니다.
혼자 연습이면:

1. 로컬(또는 CI)에서 prisma migrate deploy
2. 앱은 Vercel에 배포

순서로 시작하는 편이 단순합니다.

---

8) 배포 후 체크리스트

1. https://프로젝트.vercel.app 접속
2. /memos 목록
3. 새 메모 작성 → 새로고침 후에도 남는지
4. 수정 / 삭제

안 되면 Vercel Deployments → 해당 배포 → Logs / Functions 에서
DATABASE_URL, Prisma 에러를 확인합니다.

---

자주 하는 실수

1. .env를 GitHub에 올림
→ 비밀 유출. 올렸다면 키 교체 + git 기록 정리 필요

2. Vercel에 DATABASE_URL을 안 넣음
→ 로컬에만 있어서 배포 환경에서 DB 연결 실패

3. SQLite 파일 그대로 배포 기대
→ 서버리스와 구조적으로 안 맞음

4. Root Directory 잘못 지정
→ toyproject 루트를 배포해 memo-app을 못 찾음
→ Vercel에서 Root를 memo-app으로

5. npm run build를 로컬에서 안 해보고 바로 배포
→ 같은 에러를 Vercel 로그에서만 헤맴

---

이 편에서 가져갈 것

• Vercel 배포 = Git 연결 + 빌드 + (필요 시) 환경 변수
• 화면 배포와 DB는 별개다
• SQLite 파일은 로컬용, Vercel에는 외부 DB가 맞다
• Prisma면 provider + DATABASE_URL만 바꿔도 앱 코드는 유지하기 쉽다
• 배포 전에 npm run build로 먼저 검증한다

---

실습을 어디까지 하면 되나 (추천)

시간이 없다면:

1. GitHub + Vercel로 앱 화면만 배포해 보기
2. /memos가 DB 때문에 에러 나는 걸 로그로 확인
3. “그래서 외부 DB가 필요하다”를 글로 정리

시간이 있다면:

4. Neon(또는 Supabase) Postgres 연결
5. migrate + Vercel DATABASE_URL
6. CRUD가 배포 URL에서 동작하는지 확인

블로그에는 둘 다 솔직히 적어도 좋습니다.
완벽 배포보다 왜 SQLite가 안 되는지를 쓰는 편이 독자에게 더 가치가 있습니다.

---

시리즈를 마치며 (실전 1~3)

편	한 줄
1	수정·삭제로 CRUD 완성
2	Prisma + SQLite로 영속화
3	Vercel 배포 + 외부 DB 필요성

입문 8편 + 실전 3편이면:

React 경험 → Next App Router + TS → CRUD → DB → 배포 이슈까지

한 축이 이어집니다.

다음에 이어서 쓰기 좋은 주제:

• Neon Postgres 연결 실습 (스크린샷 중심)
• 폼 검증 (zod + useActionState)
• 로그인 (Clerk / Auth.js)

---

시리즈 목차 (실전)

1. 메모 수정과 삭제
2. Prisma + SQLite로 DB 붙이기
3. Vercel에 배포하기 ← 지금