Dockerisieren Sie die PERN-TypeScript-App mithilfe von Prisma ORM mit Docker Compose

Einführung

In diesem Artikel wird nicht auf detaillierte Erklärungen eingegangen. Stattdessen stelle ich nur die Codeausschnitte bereit, die Sie zum Dockerisieren einer PERN-Stack-Anwendung benötigen. Wenn Sie eine detailliertere Erklärung wünschen, schauen Sie sich diesen Artikel an, in dem ich alles ausführlicher behandelt habe.

Die Projektstruktur

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

Code-Backend

Erstellen Sie zuerst eine node.js-express.js-App:

mkdir backend && cd backend
npm init -y

Installieren Sie alle erforderlichen Abhängigkeiten von npm:

npm install express dotenv cors

Installieren Sie auch Typescript-bezogene Entwicklungsabhängigkeiten:

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

Tsconfig.json-Datei generieren:

tsc --init

Ersetzen Sie im Folgenden alles in tsconfig.json durch diesen Code:

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

Erstellen Sie den Ordner „src“ und die Datei „index.ts“ im Ordner „src“. So, nun die Backend-Ordnerstruktur:

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

Integrieren Sie Postgres mit Prisma

Installieren Sie zuerst Prisma und Prisma Client:

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

Erstellen Sie einen Prisma-Ordner:

npx prisma init

Schreiben Sie ein Benutzermodell in die Datei 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")
}

Setzen Sie DATABASE_URL in der .env-Datei ein:

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

Erstellen Sie eine Datei prismadb.ts im src-Ordner:

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

Definieren Sie den Endpunkt /register in der Datei index.ts. Die index.ts-Datei:

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}`)
})

Backend-Docker-Datei

Erstellen Sie eine Datei mit dem Namen backend.dockerfile im Stammverzeichnis des Backend-Verzeichnisses und schreiben Sie:

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"]

Um node_modules auszuschließen, erstellen Sie eine .dockerignore-Datei:

node_modules

Code-Frontend

Erstellen Sie das Frontend:

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

API-Aufruf in der React-App durchführen:

// 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

Frontend-Docker-Datei

Erstellen Sie eine Datei mit dem Namen frontend.dockerfile im Stammverzeichnis des Frontend-Verzeichnisses und schreiben Sie:

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

Docker-Compose-Datei

Fügen Sie Folgendes in der .env-Datei des Backend-Ordners hinzu:

// backend/.env

POSTGRES_USER=postgres
POSTGRES_PASSWORD=postgres
POSTGRES_DB=pern_db

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

Die docker-compose.yml-Datei:

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: {}

Führen Sie diesen Befehl aus:

docker compose up -d

Prisma-Schema migrieren:

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

Das obige ist der detaillierte Inhalt vonDockerisieren Sie die PERN-TypeScript-App mithilfe von Prisma ORM mit Docker Compose. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!