Prisma와 Docker로 간단한 GraphQL 서버 만들기

해당 글은 prisma-postgres-docker-boilerplate를 기반으로 작성되었습니다.

글을 쓰기 까지

프론트 엔지니어가 토이 프로젝트를 진행할 때 가장 막히는 부분이 바로 백앤드 부분이다. 백앤드는 언어도 다양하고, 프론트앤드와 같은 언어를 쓴다고 Express를 쓴다고, 일이 쉽게 풀리지는 않는다. DB도 짜야하고 서버 설정도 해야하고... 토이 프로젝트 하나 하자고 배보다 배꼽이 커지는 격이 된다. 나도 이번 인턴 프로젝트를 하면서 같은 문제를 겪었다. 프론트로 짤 수 있는 건 다 짰고, 데이터의 저장과 읽기만 할 수 있으면 됐다. 물론 프론트만 이용해서 .json 파일을 데이터베이스처럼 사용할 수도 있지만 그래도 실제 데이터베이스는 써야하지 않을까라는 자그만한 오기가 있었다. 그러다 저번에 노마드 코더에서 강의에 사용한 Prisma가 생각났다. 그리고 Prisma와 Docker를 이용한 간단한 백앤드는 장난감 같지만 필요한 기능은 다 들어있는 장난감이었다.

그래서 어떻게 사용하는가?

우선 Prisma가 글로벌로 설치되어있어야한다. 설치 명령어는 다음과 같다.

$ npm install -g prisma

.env 파일 설정하기

우선 docker-compose.yml에 쓰일 환경변수를 모아놓은 .env를 채워 넣자.

PRISMA_MANAGEMENT_API_SECRET=my-secret
PRISMA_PORT=4466 # default prisma port
PRISMA_VERSION=1.34 # recommend version is 1.34
POSTGRES_VERSION=11.4 # recommend version is 11.4
POSTGRES_USER=prisma
POSTGRES_PASSWORD=prisma
POSTGRES_PORT=5432 # default postgres port

docker에서 이미지를 컨테이너화하는데 사용하는 변수들이기때문에 그대로 쓰는 편이 좋다.

GraphQL 서버 시작하기

Docker 컨테이너 실행하기

docker-compose.yml에 정의된 설정대로 prismagraphql과 postgres 이미지를 컨테이너화하자.

$ docker-compose up -d
Creating network "prisma-docker_default" with the default driver
Creating volume "prisma-docker_postgres" with default driver
Creating prisma-docker_prisma_1   ... done
Creating prisma-docker_postgres_1 ... done

docker-compose과정이 마무리되면 로컬에서 Prisma Server Playground와 Prisma Server Admin에 접속이 가능하다. 현재는 prisma의 데이터 모델에서 deploy된 것이 없기 때문에 Schema는 비어있는 상태이다.

• Prisma Server Playground - http://localhost:4466/
• Prisma Server Admin - http://localhost:4466/_admin

Deploy prisma server

prisma.yml에 정의된 설정대로 postgres의 schema를 생성함과 동시에 해당 schema에 대한 CRUD를 포함한 Query, Mutation 그리고 Subscription에 해당하는 resolver를 자동으로 생성한다.

$ yarn deploy

⚠️ 서버가 시작하는 데까지 잠시 시간이 걸리기 때문에 그 사이에 prisma deploy 명령어가 작동하지 않을 수 있다.

Prisma를 deploy한 후에, 해당 URL에 들어갈 수 있다.
이제 Prisma Server Playground에서 datamodel.graphql에 정의된 데이터에 대한 Schema를 확인할 수 있다.

• Prisma Server Playground - http://localhost:4466/
• Prisma Server Admin - http://localhost:4466/_admin

Prisma Server Playground를 GraphQL Server로 써도 되긴 하지만, 복잡한 Resolver를 사용할 수 없기 때문에 graphql-yoga를 이용하여 Prisma Client에 해당하는 GraphQL Server를 index.ts에 작성한다. 그리고 prisma.yml의 generate와 nexus-prisma-generate 과정을 통해 Prisma Client에 내가 원하는 Prisma Server의 Schema가 연결된다.

Run graphql dev server

Prisma Client를 실행한다.

$ yarn start

• GraphQL Dev Server - http://localhost:4000/

파일 구성

각 파일의 구성은 다음과 같다.

prisma.yml

endpoint: http://localhost:4466
datamodel: datamodel.graphql
secret: my-secret
generate:
  - generator: typescript-client
    output: ./generated/prisma-client/
hooks:
  post-deploy:
    - npx nexus-prisma-generate --client ./generated/prisma-client --output ./generated/nexus-prisma

docker-compose.yml

더 자세한 설명을 원한다면 다음 글을 참고하자 "Set up and connect Prisma with a database"

version: '3'
services:
  prisma:
    image: prismagraphql/prisma:${PRISMA_VERSION}
    restart: always
    ports:
      - '${PRISMA_PORT}:${PRISMA_PORT}'
    environment:
      PRISMA_CONFIG: |
        managementApiSecret: ${PRISMA_MANAGEMENT_API_SECRET}
        port: ${PRISMA_PORT}
        databases:
          default:
            connector: postgres
            host: postgres
            port: ${POSTGRES_PORT}
            user: ${POSTGRES_USER}
            password: ${POSTGRES_PASSWORD}
  postgres:
    image: postgres:${POSTGRES_VERSION}
    restart: always
    environment:
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
    volumes:
      - postgres:/var/lib/postgresql/data
volumes:
  postgres: ~