Ch 02. Vercel로 배포하기
Vercel은 Next.js를 만든 회사가 운영하는 클라우드 플랫폼이지만, Nuxt.js도 완벽하게 지원합니다. GitHub에 코드를 올리면 자동으로 빌드하고 배포해줍니다. 무료 플랜으로도 개인 프로젝트나 포트폴리오를 운영하기에 충분합니다.
Vercel 계정 생성과 GitHub 연동
먼저 vercel.com에서 계정을 만듭니다. GitHub 계정으로 가입하면 저장소 연동이 훨씬 편리합니다. 가입 후 Add New Project를 클릭하고 배포할 GitHub 저장소를 선택합니다. Nuxt.js 프로젝트를 자동으로 감지해서 빌드 설정을 채워줍니다.
Vercel CLI로 배포하기
터미널에서 직접 배포하고 싶다면 CLI를 사용합니다.
npm install -g vercelvercel loginvercel deployvercel deploy를 실행하면 현재 디렉토리의 코드를 빌드해서 미리보기 URL을 제공합니다. 운영 환경에 배포하려면 --prod 플래그를 추가합니다.
vercel deploy --prod환경변수 설정
Vercel 대시보드에서 Project > Settings > Environment Variables로 이동합니다. NUXT_JWT_SECRET, DATABASE_URL 같은 값을 여기에 입력합니다. 값을 저장한 뒤 재배포하면 빌드 시점과 런타임 모두에 적용됩니다.
Nuxt Vercel 프리셋
nuxt.config.ts에 별도 설정 없이도 Vercel 환경에서 실행되면 Nitro가 자동으로 Vercel 프리셋을 선택합니다. 서버리스 함수와 엣지 함수를 최적으로 설정해줍니다.
SQLite 사용 시 주의사항
개발 중에 SQLite를 사용했다면 Vercel 배포에서 문제가 생깁니다. Vercel의 서버리스 환경은 파일 시스템이 읽기 전용이고, 함수 실행이 끝나면 데이터가 사라집니다. SQLite 파일을 영속적으로 저장할 수 없습니다.
해결책으로는 세 가지가 있습니다. Vercel Postgres는 Vercel이 직접 제공하는 PostgreSQL 서비스로 대시보드에서 바로 연결할 수 있습니다. PlanetScale은 MySQL 기반의 서버리스 데이터베이스입니다. Supabase는 PostgreSQL 기반으로 무료 플랜이 넉넉하고 실시간 기능도 제공합니다.
데이터베이스를 마이그레이션할 때는 Prisma의 provider를 sqlite에서 postgresql로 변경하고 스키마를 재적용합니다. 이 과정이 번거롭다면 처음부터 PostgreSQL로 시작하는 것이 낫습니다.