feat: add settings for db (#16)

* feat: add prisma & basic settings

* chore: add .env to gitignore

* fix: add shadow database url in schema for solving migration issue

* feat: add @prisma/client and db schema file path

* chore: add migration files to gitignore

* chore: add scripts for prisma

* feat: add test api

* feat: add docker compose & actions

* fix: add checkout option & prod action

* fix: add migration files

* fix: remove edge option

* feat: add edge test api

* build(package): update nextjs

* fix: add runtime option

* fix: remove runtime option

* docs(github): add pr template

---------

Co-authored-by: Go Gwangseo <rufflain918@gmail.com>

.github/pull_request_template.md

@@ -0,0 +1,15 @@
+## Issue
+
+Resolves #(이슈 번호)
+
+## Description
+
+## Check List
+
+- [ ] PR 제목을 커밋 규칙에 맞게 작성
+- [ ] 적절한 라벨 설정
+- [ ] GitHub Projects에 연결
+- [ ] 작업한 사람 모두를 Assign
+- [ ] Code Review 요청
+- [ ] DB Schema를 바꾼 경우, DB Schema를 바꾸는 다른 PR이 없는지 확인
+- [ ] `main` 브랜치의 최신 상태를 반영하고 있는지 확인

.github/workflows/chromatic.yml

@@ -4,10 +4,22 @@ on: push
 jobs:
   chromatic-deployment:
     runs-on: ubuntu-latest
+    environment: Preview
     steps:
-      - uses: actions/checkout@v1
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: yarn
+
       - name: Install dependencies
-        run: yarn
+        run: yarn install --frozen-lockfile
+
       - name: Publish to Chromatic
         uses: chromaui/action@v1
         with:

.github/workflows/db-migration-prod.yml

@@ -0,0 +1,28 @@
+name: 'DB Migration (Production)'
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'src/database/schema.prisma'
+
+jobs:
+  migrate:
+    runs-on: ubuntu-latest
+    environment: Production
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Migrate
+        run: yarn db:prod
+        env:
+          DATABASE_URL: ${{ secrets.DATABASE_URL }}

.github/workflows/db-migration.yml

@@ -0,0 +1,27 @@
+name: 'DB Migration'
+on:
+  pull_request:
+    types: [opened, synchronize]
+    paths:
+      - 'src/database/schema.prisma'
+
+jobs:
+  migrate:
+    runs-on: ubuntu-latest
+    environment: Preview
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Migrate
+        run: yarn db:prod
+        env:
+          DATABASE_URL: ${{ secrets.DATABASE_URL }}

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

.storybook/main.js

@@ -73,6 +73,7 @@ module.exports = {
       '@/logics': path.resolve(__dirname, '../src/logics'),
       '@/constants': path.resolve(__dirname, '../src/constants'),
       '@/assets': path.resolve(__dirname, '../src/assets'),
+      '@/lib': path.resolve(__dirname, '../lib'),
     };
 
     return config;

.vscode/settings.json

@@ -5,5 +5,6 @@
     "source.fixAll.eslint": true
   },
   "editor.tabSize": 2,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "git.pruneOnFetch": true,
 }

docker-compose.yml

@@ -0,0 +1,12 @@
+services:
+  postgres:
+    image: postgres:15.1
+    ports:
+      - '5466:5432'
+    volumes:
+      - db_data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_PASSWORD: ''
+      POSTGRES_HOST_AUTH_METHOD: trust
+volumes:
+  db_data:

lib/prisma.ts

@@ -0,0 +1,12 @@
+import { PrismaClient } from '@prisma/client';
+
+/**
+ * @see https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices
+ */
+const globalForPrisma = global as unknown as { prisma: PrismaClient };
+
+export const prisma = globalForPrisma.prisma || new PrismaClient();
+
+if (process.env.NODE_ENV !== 'production') {
+  globalForPrisma.prisma = prisma;
+}

next.config.js

@@ -5,9 +5,6 @@ const withVanillaExtract = createVanillaExtractPlugin();
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-  experimental: {
-    runtime: 'experimental-edge',
-  },
 };
 
 module.exports = withVanillaExtract(nextConfig);

package.json

@@ -9,19 +9,26 @@
     "lint": "next lint",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "chromatic": "npx chromatic --exit-zero-on-changes"
+    "chromatic": "npx chromatic --exit-zero-on-changes",
+    "db:dev": "npx prisma migrate dev",
+    "db:push": "npx prisma db push",
+    "db:up": "docker compose up -d",
+    "db:nuke": "docker compose down --volumes --remove-orphans",
+    "db:prod": "npx prisma migrate deploy",
+    "postinstall": "npx prisma generate"
   },
   "dependencies": {
+    "@prisma/client": "4.9.0",
     "@tanstack/react-query": "4.16.1",
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.9",
     "@vanilla-extract/css": "1.9.2",
     "eslint": "8.28.0",
-    "eslint-config-next": "13.0.4",
+    "eslint-config-next": "13.1.6",
     "framer-motion": "7.6.7",
     "jotai": "1.10.0",
-    "next": "13.0.4",
+    "next": "13.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.3"
@@ -43,7 +50,12 @@
     "chromatic": "6.11.4",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-storybook": "0.6.7",
-    "prettier": "2.7.1"
+    "prettier": "2.7.1",
+    "prettier-plugin-prisma": "4.8.0",
+    "prisma": "4.9.0"
+  },
+  "prisma": {
+    "schema": "./src/database/schema.prisma"
   },
   "readme": "ERROR: No README data found!",
   "_id": "gdsc-ssu-web@0.1.0"

src/database/migrations/20230130114123_/migration.sql

@@ -0,0 +1,8 @@
+-- CreateTable
+CREATE TABLE "test" (
+    "id" SERIAL NOT NULL,
+    "test" TEXT NOT NULL,
+    "test2" TEXT NOT NULL,
+
+    CONSTRAINT "test_pkey" PRIMARY KEY ("id")
+);

src/database/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

src/database/schema.prisma

@@ -0,0 +1,14 @@
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+model test {
+  id    Int    @id @default(autoincrement())
+  test  String
+  test2 String
+}

src/pages/api/edge-test.ts

@@ -0,0 +1,19 @@
+import type { NextRequest } from 'next/server';
+
+export const config = {
+  runtime: 'edge',
+};
+
+export default async function handler(req: NextRequest) {
+  return new Response(
+    JSON.stringify({
+      name: 'Jim Halpert',
+    }),
+    {
+      status: 200,
+      headers: {
+        'content-type': 'application/json',
+      },
+    },
+  );
+}

src/pages/api/hello.ts

@@ -1,19 +1,16 @@
-import type { NextRequest } from 'next/server';
+import { prisma } from '@/lib/prisma';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
-export const config = {
-  runtime: 'experimental-edge',
-};
-
-export default function handler(req: NextRequest) {
-  return new Response(
-    JSON.stringify({
-      name: 'Jim Halpert',
-    }),
-    {
-      status: 200,
-      headers: {
-        'content-type': 'application/json',
-      },
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  const newTest = await prisma.test.create({
+    data: {
+      test: '1234',
+      test2: '5678',
     },
-  );
+  });
+
+  res.status(200).json(newTest);
 }

tsconfig.json

@@ -20,7 +20,8 @@
       "@/pages/*": ["src/pages/*"],
       "@/logics/*": ["src/logics/*"],
       "@/constants/*": ["src/constants/*"],
-      "@/assets/*": ["src/assets/*"]
+      "@/assets/*": ["src/assets/*"],
+      "@/lib/*": ["lib/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],