개인프로젝트_서버 구상

개발 구성

기본 구성

Front : React + Typescript

back : Spring Boot 3

프록시 : Nginx

 

웹 접근 시 1차적으로 외부 포트와 프록시 도커 컨테이너 포트를 연결.

URL 주소에 따라 프론트와 백을 나누어서 연결하는 방식

 

React나 Spring Boot가 있는 dockerfile을 사용하는 게 아닌, 각 프레임워크가 돌아 갈 수 있는 OS환경 dockerfile을 먼저 준비.

최초 도커 이미지를 구성하는 경우라면 로컬에서 개발하려는 사이드의 기본 프로젝트를 선 구성 후, 필요 파일을 도커 이미지에 복사하여 진행하는 방식.

 

가장 기본이 되는 초기화 상태를 구성. 이후에 비슷한 환경에서 개발 할 경우에는 초기화 상태를 가져다가 사용

Front

최초 프로젝트 구성

• node와 npm을 설치
• npm을 이용하여 yarn 설치
• 프로젝트 설치(CRA)
• yarn start

또는 npm를 활용해 프로젝트 구성할 경우

• npm install -g npx
• npm install -g create-react-app
• npx create-react-app app이름
• npm run start

 

dockerfile

FROM node:20-alpine

WORKDIR /usr/src/app

COPY package.json /usr/src/app/

COPY . /usr/src/app/

RUN apk update && apk add bash

# RUN npm install --force --legacy-peer-deps

 

npm 또는 yarn으로 CRA 프로젝트 구성한 파일 중, 소스 파일과 package.json을 도커로 복사

이후 다른 프로젝트의 경우 package.json에 따라 패키지를 설치(node_modules을 새로 설치)

Back

최초 프로젝트 구성

스프링 부트 사이트에서 기본 프로젝트 구성 다운

• Spring Web
• Lombok
• Spring Data JPA
• Spring Boot DevTools
• MySQL Driver

 

dependency에 Querydsl 추가

• implementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta'
• annotationProcessor "com.querydsl:querydsl-apt:5.0.0:jakarta"
• annotationProcessor "jakarta.annotation:jakarta.annotation-api"
• annotationProcessor "jakarta.persistence:jakarta.persistence-api"

 

application.yml 생성 및 구성

spring:

 profiles:

   active: local

 datasource:

   url: jdbc:mysql://localhost:3306/DB이름

   username: DB아이디

   password: DB패스워드

   driver-class-name: com.mysql.cj.jdbc.Driver

 devtools:

   livereload:

     enabled: true

 freemarker:

   cache: false

 thymeleaf:

   cache: false

 

 jpa:

   hibernate:

     ddl-auto: create # 로딩 시점에 테이블을 다 Drop 후 다시 생

   properties:

     hibernate:

       format_sql: true

       use_sql_comments: true

       dialect: org.hibernate.dialect.MySQLDialect

# Docker Container에서 연결하려는 DB를 모르기 때문에 미리 dialect 설정

 

logging.level:

 org.hibernate.SQL: debug

 org.hibernate.type: trace

dockerfile

FROM openjdk:17-jdk-slim

ARG JAR_FILE=./project이름/build/libs/*.jar

COPY ${JAR_FILE} app.jar

 

# Set the working directory in the container

WORKDIR /app

Spring Boot 프로젝트를 빌드하여 생성한 *.jar 파일을 복사

배포하였을 경우 : java -jar app.jar

개발 모드의 경우 : 

• 프로젝트를 필요 파일 복사
• ./gradlew bootRun

Proxy

dockerfile

FROM nginx:latest

COPY ./사용할 파일.conf /etc/nginx/nginx.conf

파일 구성

user www-data;

worker_processes auto;

pid /run/nginx.pid;

include /etc/nginx/modules-enabled/*.conf;

 

events {

 worker_connections 1024;

}

http {

 client_max_body_size 0;

 upstream backend_local {

   server backend_local:8080;

 }

 upstream frontend_local {

   server frontend_local:3000;

 }

 server {

   listen 80;

 

   server_name localhost 127.0.0.1;

 

   location /api {

     proxy_pass              http://backend_local;

     proxy_http_version  1.1;

     proxy_redirect      default;

     proxy_set_header    Upgrade $http_upgrade;

     proxy_set_header    Connection "upgrade";

     proxy_set_header    Host $host;

     proxy_set_header    X-Real-IP $remote_addr;

     proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;

     proxy_set_header    X-Forwarded-Host $server_name;

   }

 

   location / {

     proxy_pass              http://frontend_local;

     proxy_http_version  1.1;

     proxy_redirect      default;

     proxy_set_header    Upgrade $http_upgrade;

     proxy_set_header    Connection "upgrade";

     proxy_set_header    Host $host;

     proxy_set_header    X-Real-IP $remote_addr;

     proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;

     proxy_set_header    X-Forwarded-Host $server_name;

   }

 }

}

 

 

docker-compose

version: '3.7'

services:

 backend_local:

   build: ./backend

   # image: backend_local

   container_name: backend_local

   ports:

     - 8080:8080

   volumes:

     - ./backend/프로젝트이름:/app

   restart: always

   environment:

     SPRING_DATASOURCE_UR: jdbc:mysql://host.docker.internal:3306/DB이름

     SPRING_DATASOURCE_USERNAME: DB계정

     SPRING_DATASOURCE_PASSWORD: DB패스워드

     TZ: Asia/Seoul

   # command: java -jar app.jar

   command: ./gradlew bootRun

   # command: tail -F /dev/null

 

 frontend_local:

   # build: ./frontend

   container_name: frontend_local

   image: frontend_local

   ports:

     - 3000:3000

   volumes:

     - ./frontend:/usr/src/app

   restart: always

   ipc: host

   environment:

     - CHOKIDAR_USEPOLLING=true

     - TZ=Asia/Seoul

   # command: tail -F /dev/null

   command: yarn start

 

 revers_proxy_local:

 #   build: ./nginx

   container_name: revers_proxy

   image: revers_proxy_local

   ports:

     - 80:80

   volumes:

     - ./nginx/nginx-local.conf:/etc/nginx/nginx.conf

   depends_on:

     - backend_local

     - frontend_local

   restart: always

 

공통

• 외부 포트와 컨테이너 포트 연결되는 내용 확인
• 새로 도커 이미지를 만들 경우 build, 만든 이미지 사용할 경우 image 사용

백

• 로컬 DB에 연결하려면 host.docker.internal 사용

설치 라이브러리

Front

• redux: 상태관리 라이브러리

<Provider>

</Provider>

• react-router-dom

: React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리

• @types/react-router-dom : 충돌 이슈로 react-router-dom만 설치
• react-router-dom 자체로도 TS 지원
• 안되면 재빌드 시도

• craco/craco

 

설치 및 실행

• yarn add npm @craco/craco
• root에 ​​tsconfig.paths.json 파일과 craco.config.js 파일 생성

​​tsconfig.paths.json

{

   "compilerOptions": {

     "baseUrl": "./src",

     "paths": {

       "@redux/*": ["./redux/*"],

       "@utility/*": ["./utility/*"],

       "@views/*": ["./views/*"]

     }

   }

}

baseUrl : 아래에 작성할 경로의 base가 되는 경로

paths : craco 설정파일에 작성한 Alias path 정보들을 TypeScript가 알 수 있게 한번 더 작성

craco.config.js

const path = require('path');

 

module.exports = {

   webpack: {

     alias: {

       '@redux': path.resolve(__dirname, 'src/redux'),

       '@utility': path.resolve(__dirname, 'src/utility'),

       '@views': path.resolve(__dirname, 'src/views'),

     },

   },

 }

 

tsconfig.json

"extends": "./tsconfig.paths.json"

​​tsconfig.paths.json 적용 할 수 있도록 설정

 

package.json

 "scripts": {

   "start": "craco start",

   "build": "craco build",

   "test": "craco test",

   "eject": "react-scripts eject"

 },

craco 적용되도록 명령어 수정(eject 제외)

 

npm 재실행 후 컴포넌트나 함수 불러올 때 위에서 선언한 @경로명/*으로 import 가능

• classnames

valid가 true/false에 따라 mg-10 클래스가 사용/미사용이 결정

• sass

• eslint