Spring Boot와 React를 사용하여 MSA 프로젝트 만들기

Spring Boot와 React.js 를 모두 구성하여 MSA로 모듈별 프로젝트를 생성 및 관리

 

사용한 툴

React, Spring Boot, HTML5, MySql, vscode, ECLIPSE, Spring Security, Gradle, Redis, RabbitMQ

 

개요

리액트와 스프링 부트를 연동하여 MSA로 구성된 프로젝트를 만들고 싶었습니다. 현재 두개의 모듈과 하나의 데이터 베이스로 연동을 하였고 JWT를 사용하여 인증 설정을 해놓았습니다.

 

설계

 

Spring 구성

사용한 버전

Node : v20.16.0
Spring Boot : 3.3.3
JDK : 17
react : 18.3.1

redis : 3.05

RabbitMQ : 3.13.7

 

React 구성요소

# 프로젝트 생성 및 실행
mkdir 본인 프로젝트명 # root directory
cd 본인 프로젝트명
npx create-react-app 본인 프로젝트명
cd 본인 프로젝트명
npm start

# 필요한 모듈 설치
npm install bootstrap react-bootstrap --save # 부트스트랩 모듈
npm install react-router-dom --save # 라우터 모듈
npm install axios --save # 서버와 통신하기 위한 모듈

 

Spring Boot 구성요소

#JPA, JWT, Log4J, Eureka, MySql 설정
dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	implementation 'org.springframework.cloud:spring-cloud-starter-netflix-eureka-client'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	implementation 'org.bgee.log4jdbc-log4j2:log4jdbc-log4j2-jdbc4.1:1.16'
	runtimeOnly 'com.mysql:mysql-connector-j'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
	implementation 'io.jsonwebtoken:jjwt-api:0.11.5'
	implementation 'io.jsonwebtoken:jjwt-impl:0.11.5'
	implementation 'io.jsonwebtoken:jjwt-jackson:0.11.5'
}

 

설명

(로그인 + 게시판) , (상품) 두개의 모듈을 스프링 부트로 구성되어 있으며 각 모듈은 로그인시 JWT 생성하여 api 접근시 Filter에서 JWT를 체크한다.

Eureka, api-gateway를 설정, 9000(api-gateway), 9002(로그인+게시판), 9003(상품) 포트 생성

5개의 메뉴를 구성(현재는 게시판과, 상품만 구성) 게시판에는 댓글과 좋아요 기능이 달렸으며 아이디를 인식하여 수정 및 삭제 접근이 허용된다, 상품 등록은 이미지 업로드 기능이 들어가 있다.

 

redis 사용, 로그아웃된 토큰을 수집하여 해당된 토큰으로 로그인 없이 접근을 방지한다.

 

spring cloud config를 사용, Gihub에 config 파일을 만들어 여러 서버가 한 config를 지켜봄으로서 같은 값을 유지하게 함, Spring cloud Bus를 RabbitMQ를 이용하였다.

 

추후 개발

config 서버생성 하나의 config만 관리
ELK 생성하여 로그 수합

 

스크린샷

 

 

GitHub - yongjooMoon/react-spring-project