Next.js + Prisma + Supabase

박재현·2024년 4월 9일

nextjs nomadcoder nomadstudy

Nomadcoder React Study 4기

목록 보기

43/49

Next.js를 사용하면서 Serverless DB를 PlanetScale을 사용했었다.

근데 이게 Free Plan이 사라졌다?🤯
나는 사라지기 이전에 만들어둔 DB가 있긴한데~ 살펴보니 이게 24시간동안만 working하고 다시 Sleep으로 들어가도록 되어있었다. 허허

충분히 이해한다. 기업은 돈을 벌기위한 집단이지. 봉사를 하는 집단이 아니니까. (그런 의미로 내 주식이나 좀 올랐으면 ㅋㅋ)

그래서 아~ 결제하지뭐 그래 얼만데? 라고 호기롭게 확인해보니 47$!!

ㅋㅋ아니 내가 뭐 공부하려고 하지, 투자받아서 창업한거도 아닌데 이정도의 serverless db가 필요없다고 빠르게 판단!

그래서 어찌할까~ 몽고DB를 사용할까~ 하다가, 대훈님이 수파베이스를 말해주셔서 이번기회에 사용해보려 한다.
사실 firebase랑 저울질하다가 귀찮아서 사용해보지는 않았는데 좋은 기회라고 생각이 됐다.

Supabase

Supabase는 Google Firebase와 유사한 오픈소스 백앤드 서비스다. 그래서 웹 / 모바일 어플리케이션을 빠르게 개발하고 배포할수 있도록 와주는 어썸한 서비스다.

기본적으로 PostgreSQL을 기반으로 구축된 DB라고 하는데 사용해본적은 없어서 잘 모르겠다 근데 옆에서 쓰는걸 봤는데 어려워 보이지는 않았다.

그리고 아래와 같은 기능을 제공해준다고 한다.
개인적으로 인증관련 기능이 제일 맘에든다!!

Database: Full Postgres 데이터베이스
Authentication: 소셜, 전화 등 다양한 방법의 사용자 인증 기능
Storage: 이미지, 비디오, 문서 등의 AWS S3와 호환되는 파일 저장소
Edge Functions: 사용자와 가까운 엣지에서 배포되는 서버측 TypeScript 함수
Realtime: 전 세계적으로 분산된 Realtime 서버 클러스터
AI & Vectors: Postgres 및 pgVector를 사용해 AI 애플리케이션을 개발하기 위한 오픈 소스 툴킷

요금제는 위처럼 되어있는데, 나는 일단 Free 요금제를 사용할 계획이다.

Prisma

홈페이지 첫화면이 멋있는거 같다.

Prisma는 Typescript를 사용하면서 DB Schema를 쉽게 작성할 수 있도록 와주는 Object-Relational Mapping, 줄여서 ORM이라고 한다.

Prisma를 사용하면 SQL을 직접 작성하지 않아도 DB를 쉽게 조작할 수 있다!

model User {
  id            Int        @id @default(autoincrement())
  username      String     @unique
  email         String?    @unique
  password      String?
  phone         String?    @unique
  github_id     String?    @unique
  created_at    DateTime   @default(now())
  updated_at    DateTime   @updatedAt
  SMSToken      SMSToken[]
}

대충 이런식으로 모델을 정의하고, client를 사용해서 사부작사부작 거릴수 있도록 도와주는 고마운 녀석이다.

Typescript라는 1개의 언어로 앞단과 뒷단 그리고 데이터베이스까지 모두 해결한다는건 무척이나 편리한 일이라고 생각한다.

프로젝트 구성

1. `npx create-next-app@latest` 명령어를 통해서 Next.js 프로젝트 생성

2. prisma, prisma client 설치

$ npm i -D prisma
$ npm i @prisma/client

3. Prisma 초기화

터미널에 아래 명령어를 사용하면, 프로젝트 경로내에 .env 파일과, prisma라는 폴더가 새로 생기게 되고, 그 폴더 내부에는 schema.prisma파일이 위치해있는걸 확인할 수 있다.

$ npx prisma init

4. Supabase 프로젝트 생성

먼저 Supabase에 회원가입과 로그인 이후에 "Dashboard -> Project" 페이지에서 New Project 버튼을 눌러 프로젝트를 생성해준다.

그 다음 아래 사진과 같이 Organization, Name, Database Password, Region을 설정해주면 된다.

무료 버전의 경우는 하나의 조직에서 최대 2개의 active한 프로젝트를 생성할 수 있다고 한다.

다음으로 Connection String을 확인해야 한다.

Project Setting -> Configuration -> Database -> Connection String

먼저 파란색으로 표시한 부분을 눌러보면 Mode: Session과Mode: Transaction 이렇게 2가지로 변경할 수 있는걸 알 수 있다.

일단 Mode: Transaction으로 설정한 다음 저기서 connection string을 복사한 다음 .env 파일의 DATABASE_URL에 붙혀넣어야 한다.

이때 URl뒤에는 ?pgbouncer=true&connection_limit=1를 추가로 붙여준다.

다음으로 Mode: Session으로 바꾼다음 connection url을 DIRECT_URL로 설정해 줘야 한다.

그리고 [YOUR-PASSWORD] 부분에는 프로젝트를 처음 생성하면서 넣어줬던 비밀번호로 대체해야 한다.

// Before
DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"

// After
DATABASE_URL="postgres://postgres.fynjaxptguufmkadqdoj:123123@aws-0-ap-northeast-2.pooler.supabase.com:6543/postgres?pgbouncer=true&connection_limit=1"
DIRECT_URL="postgres://postgres.fynjaxptguufmkadqdoj:123123@aws-0-ap-northeast-2.pooler.supabase.com:5432/postgres"

.env 파일은 말 그대로 환경변수 파일들인데, github에 push하기 이전에 해당 파일이 레포지토리에 올라가지 않도록 .gitignore 파일에 .env를 추가하자!

이제 schema.prisma 파일의 datasource db 부분에 DIRECT URL을 추가해준다.

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

그리고 새로운 model을 만든다!

model User {
  id         Int      @id @default(autoincrement())
  username   String   @unique
  email      String   @unique
  password   String
  created_at DateTime @default(now())
  updated_at DateTime @updatedAt
}

마지막으로 npx prisma migrate dev 명령어를 실행!

정상적으로 실행이 되었다면 아래와 같이 data fields가 생성된것을 볼 수 있다!