Docker Compose와 함께 Prisma ORM을 사용하는 Dockerize PERN-TypeScript 앱

소개

이 글에서는 자세한 설명을 다루지 않습니다. 대신 PERN 스택 애플리케이션을 도킹하는 데 필요한 코드 조각을 제공하겠습니다. 더 자세한 설명을 원하시면 제가 모든 내용을 더 자세히 다룬 이 글을 확인해주세요.

프로젝트 구조

pern-project/
--- frontend/
------ .dockerignore
------ frontend.dockerfile
------ ...
--- backend/
------ .dockerignore
------ backend.dockerfile
------ ...
--- docker-compose.yml

코드 백엔드

먼저 node.js-express.js 앱을 생성하세요.

mkdir backend && cd backend
npm init -y

npm에서 필요한 모든 종속성을 설치합니다.

npm install express dotenv cors

Typescript 관련 개발 종속성도 설치합니다.

npm install --save-dev typescript ts-node @types/express @types/node @types/cors

tsconfig.json 파일 생성:

tsc --init

tsconfig.json 내부의 모든 내용을 다음 코드 조각으로 바꿉니다.

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "data-types.d.ts"]
}

src 폴더 안에 src 폴더와 index.ts 파일을 만듭니다. 이제 백엔드 폴더 구조는 다음과 같습니다.

backend/
--- node_modules/
--- src/
------ index.ts
--- package.json
--- tsconfig.json
--- ...

Postgres와 Prisma 통합

Prisma 및 Prisma 클라이언트를 먼저 설치하세요.

npm i @prisma/client
npm i --save-dev prisma

프리즈마 폴더 생성:

npx prisma init

schema.prisma 파일에 사용자 모델을 작성하세요.

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

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

model User {
  id        String   @id @default(uuid())
  name      String
  username  String
  email     String
  password  String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@map("users")
}

.env 파일에 DATABASE_URL을 설정하세요.

DATABASE_URL=postgresql://postgres:postgres@db:5432/pern_db?schema=public

src 폴더에 prismadb.ts 파일을 만듭니다.

import { PrismaClient } from "@prisma/client"
import "dotenv/config"

// Extend the global object with PrismaClient
declare global {
  var prisma: PrismaClient | undefined
}

// Prevent multiple instances of Prisma Client in development
const prisma = global.prisma || new PrismaClient()

if (process.env.NODE_ENV !== "production") global.prisma = prisma

export default prisma

index.ts 파일에 /register 엔드포인트를 정의하세요. index.ts 파일:

import express, { Request, Response } from "express"
import "dotenv/config"
import cors from "cors"
import { corsOptions } from "./constants/config"

const app = express()
const PORT = process.env.PORT || 3000

app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.use(cors({
    const corsOptions = {
    origin: process.env.CLIENT_URL || 'http://localhost:5173',
    credentials: true,
  }
}))

app.get("/", (req: Request, res: Response) => {
  res.json({
    message: "Hello, TypeScript with Express! Updated!",
  })
})

app.post("/register", async (req: Request, res: Response) => {
  const { name, username, email, password } = req.body

  await prisma.user.create({
    data: {
      name,
      username,
      email,
      password,
    },
  })

  res.json({
    message: "User created successfully",
  })
})

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`)
})

백엔드 Dockerfile

백엔드 디렉터리 루트에 backend.dockerfile이라는 파일을 만들고 다음과 같이 작성합니다.

FROM node:20
WORKDIR /app
COPY package*.json .
RUN npm install
COPY prisma ./prisma
RUN npx prisma generate
COPY . .
EXPOSE 3000
RUN npm install -g nodemon ts-node
CMD ["nodemon", "src/index.ts"]

node_modules를 제외하려면 .dockerignore 파일을 생성하세요.

node_modules

코드 프론트엔드

프런트엔드 만들기:

npm create vite@latest frontend -- --template react-ts

React 앱에서 API 호출:

// App.tsx

import { FormEvent, useEffect, useState } from "react"
....

function App() {
  const [name, setName] = useState("")
  const [username, setUsername] = useState("")
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")

  const saveUser = async (e: FormEvent) => {
    e.preventDefault()
    await fetch("http://localhost:3000/register", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        name,
        username,
        email,
        password,
      }),
    })
      .then((res) => res.json())
      .then((data) => console.log(data))
  }

  useEffect(() => {
    fetch("http://localhost:3000")
      .then((res) => res.json())
      .then((data) => console.log(data))
  }, [])

  return (
    <>
      <form onSubmit={saveUser}>
        <input
          type="text"
          onChange={(e) => setName(e.target.value)}
          placeholder="Enter your name"
        />
        <input
          type="text"
          onChange={(e) => setUsername(e.target.value)}
          placeholder="Enter your username"
        />
        <input
          type="email"
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Enter your email"
        />
        <input
          type="password"
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Enter your password"
        />
        <button type="submit">Submit</button>
      </form>
    </>
  )
}

export default App

프런트엔드 Dockerfile

프런트엔드 디렉터리의 루트에 frontend.dockerfile이라는 파일 이름을 만들고 다음과 같이 작성합니다.

FROM node:20
WORKDIR /app
COPY package*.json .
RUN npm install
EXPOSE 5173
COPY . .
CMD [ "npm", "run", "dev" ]

Docker-Compose 파일

백엔드 폴더의 .env 파일에 다음을 추가합니다.

// backend/.env

POSTGRES_USER=postgres
POSTGRES_PASSWORD=postgres
POSTGRES_DB=pern_db

DATABASE_URL=postgresql://postgres:postgres@db:5432/pern_db?schema=public

docker-compose.yml 파일:

services:
  frontend:
    container_name: frontend
    build:
      context: ./frontend
      dockerfile: frontend.dockerfile
    ports:
      - "5173:5173"
    networks:
      - pern_net
    volumes:
      - ./frontend:/app
      - /app/node_modules
    depends_on:
      - server

  backend:
    container_name: backend
    build:
      context: ./backend
      dockerfile: backend.dockerfile
    env_file:
      - ./backend/.env
    ports:
      - "3000:3000"
    networks:
      - pern_net
    volumes:
      - ./backend:/app
      - /app/node_modules
    depends_on:
      - db

  db:
    container_name: db
    image: postgres:14
    restart: always
    ports:
      - "5432:5432"
    networks:
      - pern_net
    env_file:
      - ./backend/.env
    volumes:
      - pgdata:/data/db

networks:
  pern_net:
    driver: bridge

volumes:
  pgdata: {}

다음 명령을 실행하세요:

docker compose up -d

prisma 스키마 마이그레이션:

docker backend -it backend npx prisma migrate dev --name init

위 내용은 Docker Compose와 함께 Prisma ORM을 사용하는 Dockerize PERN-TypeScript 앱의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!