Board

스프링 부트와 뷰 프레임워크를 사용한 Markdown 기반 게시판 프로젝트

Spring Boot, Vue, AWS, CI/CD, Test에 대한 이해를 목표로 진행한 프로젝트 입니다. TOAST UI Editor를 활용하여 게시글을 작성하고 조회할 수 있도록 구현하였습니다. dev 환경에서는 인메모리 데이터베이스를 연동하고 real 환경에서는 Amazon RDS로 생선한 Maria 데이터베이스를 연결하여 작동합니다.

Features

• 게시판 조회, 추가, 수정, 삭제
• 댓글 조회, 추가, 수정, 삭제
• 로그인/아웃, 회원가입, 회원정보 변경

Skills

• Backend
  • Java 11, Spring Boot, Spring Data JPA, Spring Security, Spring Validation, JWT, Gradle, Mockito, Junit 5
• Frontend
  • Vue.js, Vuetify, Vuex, Vue-Router, Axios
• Database
  • Amazon RDS for MariaDB
  • In-memory H2
• CI/CD
  • Travis CI, AWS CodeDeploy, EC2, S3, Nginx
• Tool
  • Visual Studio Code

Systen architecture

Github, EC2, S3, Travis CI, CodeDeploy를 통해 CI/CD 환경을 구성하고 8081과 8082 중 동작하지 않는 포트에 배포 후 Nginx를 통해 reload 하여 서비스 중단 없이 배포가 진행되도록 구현했습니다. Spring Boot와 Vue.js를 연동하기 위해 build.gradle에 Vue.js가 먼저 빌드 되도록 설정하였습니다.

ERD

기본적으로 created_at, modified_at을 가지고 있으며 이를 @EnableJpaAuditing를 통해 수정이 발생하면 자동적으로 처리하도록 구현했습니다.

Screen flow

Installation and Getting Started

AWS 프리티어를 사용하고 있어 느리지만, http://board.oognuyh.tech 를 통해 접속할 수 있습니다. 또는,

git clone https://github.com/oognuyh/board-spring.git
cd board-spring
./gradlew bootRun --args='--spring.profiles.active=dev'

인메모리 데이터베이스와 연결하여 로컬에서 확인할 수 있습니다. 서버가 실행된 후, localhost:9998 로 접속하여 확인할 수 있습니다.

Screens

• /board

• /new-post

• /post/{id}

• /login

• /signup

• /my-page

What i learned

• Spring boot
• Vue
• JWT
• CI/CD

Library used

• TOAST UI Editor
• Vuetify
• SweetAlert