Next.js
Next.js + TypeORM(Postgres) + Docker
이런저런 IT 이야기
2023. 7. 20. 13:35
반응형
https://github.com/leeyonghe/NextjsTypeORMProject
샘플코드입니다. 미리 살펴보세요.
1. Docker 구성
- Node Server 1대
- node:latest 서버 이미지를 사용
- 포트번호 3000번으로 적용
- Postgres DB 1대
- DB 사용자 및 패스워드 적용
- POSTGRES_USER: postgres
- POSTGRES_PASSWORD: postgres123!
- DB 사용자 및 패스워드 적용
- docker-compose.yml 파일 내용
version: '3.7'
services:
dp_project:
tty: true
container_name: dp_project
build:
context: .
dockerfile: Dockerfile
ports:
- "3000:3000"
- "5555:5555"
volumes:
- ./project/:/main
command: sh -c "npm run dev"
depends_on:
- "postgres"
postgres:
container_name: postgres
tty: true
image: postgres
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: postgres123!
PGDATA: /data/postgres
ports:
- "5432:5432"
restart: unless-stopped- Dockerfile 내용 (Django 서버용)
FROM node:latest
RUN apt update
RUN npm install -g next
WORKDIR /main- next 명령어를 사용하기 위해서 전역으로 설치
2. Next.js 프로젝트 생성 및 TypeORM 연동
- 사전에 NPM 설치 필요
- create-next-app 설치
$ npm install -g create-next-app- Next.js 프로젝트 생성
$ npx create-next-app project- TypeORM & Postgres 설치
$ npm install pg
$ npm install typeorm
$ npm reflect-metadata- DB를 조회할 서비스 Datasource 생성 및 연결 설정 [data-source.ts]
import "reflect-metadata"
import { DataSource } from "typeorm"
import { User } from "./entity/User"
export const AppDataSource = new DataSource({
type: "postgres",
host: "postgres",
port: 5432,
username: "postgres",
password: "postgres123!",
database: "postgres",
synchronize: true,
logging: false,
entities: [User],
migrations: [],
subscribers: [],
})- User를 관리할 Entity 생성[User.ts]
import { Entity, PrimaryGeneratedColumn, Column } from "typeorm"
@Entity()
export class User {
@PrimaryGeneratedColumn()
//@ts-ignore
id: number
@Column()
//@ts-ignore
firstname: string
@Column()
//@ts-ignore
lastname: string
@Column()
//@ts-ignore
age: number
}- 기타 추가 설정
- tyconfig.json파일 설정 추가
"emitDecoratorMetadata": true,
"experimentalDecorators": true,3. 폴더구조
4. 프로젝트 실행
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import React from 'react';
import "reflect-metadata";
import { AppDataSource } from "../database/data-source"
import { User } from "../database/entity/User"
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
AppDataSource.initialize().then(async () => {
console.log("Inserting a new user into the database...")
const user = new User()
user.firstname = "Timber"
user.lastname = "Saw"
user.age = 25
await AppDataSource.manager.save(user)
console.log("Saved a new user with id: " + user.id)
console.log("Loading users from the database...")
const users = await AppDataSource.manager.find(User)
console.log("Loaded users: ", users)
console.log("Here you can setup and run express / fastify / any other framework.")
}).catch(error => console.log(error))
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}- 최초 실행시 아래 명령어로 실행
$ docker-compose -f docker-compose-first.yml up -d --build- 두번째 실행부터는 아래 명령어 실행
$ docker-compose up -d --build- 아래와 같이 실행 결과를 볼수 있음
- http://localhost:3000
반응형