[Carrot Market] #6 Prisma - PlanetScale

Prisma

primsa는 Node.js와 Typescript ORM(Object Relational Mapping)으로 JS or TS와 데이터베이스 사이에 다리를 놓아줌 으로서 데이터베이스와 통신을 위해 사용되는 도구 입니다.

 

Prisma를 사용하기 위해서는 먼저 Prisma에게 DB가 어떻게 생겼는지, 데이터의 모양을 설명해 주어야 합니다. ( schema.prisma )

 

Prisma가 이런 타입에 관한 정보를 알고 있으면 client를 생성해 줄 수 있습니다. client를 사용하면 TS로 DB와 직접적인 상호작용이 가능해지고 자동완성기능이 제공됩니다.

 

그 외에도 Prisma Studio, Visual Database Broswer등 DB를 위한 관리자 패널을 제공하기도 합니다.

 

Prisma는 앱 개발자가 PostgreSQL, MySQL, SQL Server, SQLite및 MongoDB(현제 프리뷰)용 오픈 소스 데이터베이스 도구를 사용하여 더 빠르게 빌드하고 오류를 줄이는 데 도움을 줍니다.

 

Prisma SetUp

이제 prisma를 우리의 프로젝트에 설치할 때입니다.

우선 아래와 같이 명령어를 쳐줘서 prisma의 기초 파일들을 우리의 프로젝트에 만들어 줍시다.

npm install prisma -D
npx prisma init

이 명령은 schema.prisma라는 파일과 프로젝트 루트에 .env파일을 포함하는 prisma라는 새 디렉토리를 생성하는 명령어 입니다. shcema.prisma는 데이터베이스 연결과 Prisma Client생성기가 있는 Prisma스키마를 포함합니다. .env는 환경 변수를 정의하기 위한 dotenv파일 입니다. (데이터 베이스 연결 때 사용됨)

 

공식문서 Prisma Model 예시

https://www.prisma.io/docs/concepts/components/prisma-schema

Prisma Model Example

 

다음과 같이 Prisma의 Mdedel을 만드는데 우리는 이를 참고하여 기본적인 User Model을 만들어 보도록 하겠습니다.

 

prisma/schema.prisma

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

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

model User {
  id        Int      @id @default(autoincrement())
  phone     Int?     @unique
  email     String?  @unique
  name      String
  avatar    String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

다음과 같이 id, phone, email, name, avatar, createdAt, updatedAt의 필드를 만들어 주었습니다. 이 때 email은 선택적이지만 유일해야 합니다.

 

또한 @메소드를 공식문서를 참고해서 정리해 보면 아래와 같습니다.

 

@autoincrement : 기본 DB 내에 정수 형태의 시퀀스를 만들고 시퀀스에 따라 생성된 레코드의 ID 값에 증가된 값을 할당한다.
@id : 모델에 단일 필드 id를 지정한다.
@updateAt : 레코드가 마지막으로 업데이트된 시간을 자동으로 저장한다. 시간을 직접 지정하지 않으면 Prisma Client는 이 속성이 있는 필드의 값을 자동으로 설정한다.

 

PlanetScale

PlanetScale은 MySQL과 호환되는 Serverless데이터베이스 플랫폼입니다. 이는 Vitess를 쓰는데, MySQL을 스케일링하기 위한 데이터베이스 클러스터링 시스템입니다. 

 

PlanetScale은 데이터베이스 이상이며 CLI는 복잡한 명령 이상입니다. pscale 커맨드 라인을 사용하면 branch, deploy 요청 및 기타 PlanetScale 개념을 손쉽게 사용할 수 있습니다.
https://github.com/planetscale/cli

brew install planetscale/tap/pscale
brew install mysql-client
brew upgrade pscale

을 통해 PlanetScale CLI을 설치해 줍니다.

 

그리고 설치가 완료 되었다면 다음 PlanetScale CLI를 사용하여 데이터베이스를 생성해 줍니다.

pscale database create carrot-market --region ap-northeast

또한 DATABASE_URL은 mysql://127.0.0.1:3306/carrot-market이 됩니다. 

또한 그 전에 아래와 같은 명령어를 쳐주셔야 합니다.

pscale connect carrot-market

이제 DATABASE_URL을 root의 .env파일에 환경변수로 작성해 줍니다.

 

https://docs.planetscale.com/tutorials/prisma-quickstart

이는 prisma와 PlanetScale을 어떻게 같이 동작시켜주는지 설명한 document입니다.

 

PlanetScale Push

그 다음으로는 Prisma에서 우리가 작성한 schema를 PlanetScale로 Push해 주는 작업을 해주어야 합니다. 이 전에 저희는 Schema preview features를 설정해주어야 합니다. 

 

Referential integerity (참조 무결성)

이라고 하는 것은 어떤 다른 모델을 참조하는 경우 해당 모델이 반드시 존재해야 하는 것입니다. 참조 무결성은 모든 참조가 유효함을 나타내는 데이터 세트의 속성입니다. 예를 들어 Post모델이 user필드를 정의하는 경우 User모델도 반드시 존재해야 합니다. 참조 무결성은 참조를 손상시키는 변경을 방지하는 제약 조건과 레코드를 업데이터하거나 삭제할 때 실행되는 참조 작업을 정의함으로써 적용됩니다.

 

prisma/schema.prisma

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["referentialIntegrity"]
}

datasource db {
  provider             = "mysql"
  url                  = env("DATABASE_URL")
  referentialIntegrity = "prisma"
}

model User {
  id        Int      @id @default(autoincrement())
  phone     Int?     @unique
  email     String?  @unique
  name      String
  avatar    String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

 

 

와 같이 Prisma에서 Referential Integerity를 설정해 줄 수 있습니다.

 

이제 실제로 db를 push해야 합니다. db push는 Prisma Migrate와 동일한 엔진을 사용하여 Prisma스키마를 데이터베이스 스키마와 동기화하며 스키마 프로토타이핑에 가장 적합합니다.

npx prisma db push

와 같이 migration할 수 있습니다. data-losing없이 진행하도록 할 떄 이런 방식이 사용 됩니다.

 

정리해보면 저희가 schema.rpisma를 보는 이유는 크게 2가지와 같습니다.

1) model들을 DB에 push하고 SQL migration을 자동으로 처리하기 위함

2) DB와 상호작용하기 위해 client를 생성하고 그 client에 자동완성으로 타입들을 추가하기 위함

 

마지막으로 prisma는 관리자 패널을 우리에게 보여주는데 아래의 명령어를 통해서 들어가서 관리 가능합니다.

npx prisma studio

 

Prisma Client

이제 db에 데이터를 넣고를 해야 하는데, 우리가 위에서 npx prisma db push라는 명령어를 치고 자동으로 @prisma/client가 설치되었을 겁니다. 이는 저희가 추가한 model을 기반으로 type을 추가해 줍니다. 다음과 같이 말이죠

위의 사진과 저희가 schema.prisma에서 만든 User Schema와 매우 유사합니다. 즉 저희는 @prisma/client로 부터 PrismaClient를 import해 오면 자동완성 기능을 만끽할 수 있는 겁니다.

 

하지만 여기서 가장 중요한 점은 PrismaClient는 아주 위험하다는 겁니다. 맘대로 데이터베이스의 쿼리를 빌드할 수 있는 것이기 때문이죠, 따라서 이를 브라우저에서 import해서는 절대 안됩니다. 무조건 서버 단에서만 실행해야 합니다.

 

Next API Routes

Next는 Full-stack을 기발하기 위해 아주 특화된 프레임워크 입니다. 그이유는 api기능을 구현하기 위해서는 Node나 GrapQL등의 서버를 두어서, 교류를 했어야 했습니다. 이는 아주 번거로운 일이 아닐 수 없습니다. 또한 아주 주옥같은 CORS문제도 뜨기 때문에 아주 짜증나는 일이 아닐 수 없습니다. 그넫 Next.js는 Next API Routes를 제공합니다. 이는 Next.js로 API를 빌드하기 위한 솔루션을 제공합니다. pages/api폴더 내의 모든 파일은 /api/*에 매핑되며 API endpoint로 처리됩니다. server-side 전용 번들이며 client-side번들 크기를 늘리지 않습니다. 

 

/pages/api/client-test.tsx

import { NextApiRequest, NextApiResponse } from "next";
import client from "../../libs/client";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  await client.user.create({ data: { email: "Hi", name: "hi" } });

  res.json({
    ok: true,
    data: "xx",
  });
}

req: http.IncomingMessage의 인스턴스와 pre-built된 일부 미들웨어
res: http.ServerResponse의 인스턴스와 일부 helper함수

이고 /api/client-test를 들어가면 다음과 같이 데이터베이스에 데이터가 추가 되어이 있을 겁니다.

 

prisma studio