$$config title: SBB 게시판 만들기 keywords: - IT - ... $$ title: SBB 스프링부트 및 배포 keywords: - 풀스택 - 게시판 $$ # ⚜ 개요 ## 가. 소개 - 사이트 소개 : Ko SpringBoot - 스프링부트를 이용한 커뮤니티 사이트 - 타임리프를 사용한 템플릿 적용 - NCP, Nginx , Docker와 Jenkins 를 사용한 배포 및 자동화 ## 나. 사이트 - [SBB](https://to2.kr/eDJ) # ? 환경 ## 가. 형상관리 - [깃허브 형상관리 : https://github.com/wooyoung0407/docker.git](https://github.com/wooyoung0407/docker.git) ## 나. 사용기술 ### 1-1 기술스택 ``` ⚓ - Spring Boot - HTML5 / CSS5 / JS - jQuery - MariaDB - Bootstrap 5 - Java ``` ### 1-2 개발환경 ``` ⚓ - SQL yog - Chrome - Intellij - Windows 10 - Windows 11 ``` ### 1-3 배포 ``` ⚓ - GITHUB - Docker - Jenkins CI / CD ``` ### 1-4 서비스 환경 ``` ⚓ - NGINX - MariaDB - Docker - CentOS7 - NCP ``` ### 1-5 ERD ![ERD](https://i.imgur.com/mm9Q5X3.png) # ? 요구사항과 기능구현 여부 |목록|요구사항|이용대상|기능종류|구현여부|비고 | --- | --- | --- | --- |---|---| |RQ-001-C-R-U-D|게시판에 게시글을 작성할 수 있다|회원|등록|✅| |RQ-002-R|게시판 게시글 검색이 가능하다 |회원|검색|✅| |RQ-003-R|게시판 특정 단어 포함한 게시글 검색어 가능하다|회원|검색|✅| |RQ-004-C-R-U-D|사용자 댓글 등록이 가능하다|회원|등록|✅| |RQ-005-C-D|사용자 게시글 추천 등록이 가능하다|회원|등록|✅| |RQ-006-C-D|사용자 댓글 추천 등록이 가능하다|회원|등록|✅| |RQ-007-R|게시글 작성 날짜순으로 출력되어 나와야한다|회원|출력|✅| |RQ-008-R|게시글 작성 날짜가 출력되어 나와야한다|회원|출력|✅| |RQ-009-R|게시글 수정 날짜가 출력되어 나와야한다|회원|출력|✅| |RQ-010-R|댓글 작성 날짜가 출력되어 나와야한다|회원|출력|✅| |RQ-011-R|댓글 수정 날짜가 출력되어 나와야한다|회원|출력|✅| |RQ-012-R|게시판의 페이지가 1페이지부터 출력되어 나와야한다.|회원|출력|✅| |RQ-013-R|게시글 작성자가 출력되어 나와야한다.|회원|출력|✅| |RQ-014-R|게시글의 댓글 수가 출력되어 나와야한다.|회원|출력|✅| |RQ-015-R|화면 크기가 변하면 로고를 제외한 상단 네비바의 형태가 변한다|회원|정렬|✅| |RQ-016-C|회원가입이 가능하다|회원|등록|✅| |RQ-017-C|로그인이 가능하다|회원|로그인|✅| # ? 기능 ``` ⚓ - 회원가입 - 로그인 및 로그아웃 - 게시글 작성 - 게시글 수정 및 삭제 - 게시글 추천 - 게시글 댓글 작성 - 게시글 댓글 수정 및 삭제 - 게시글 댓글 추천 ``` # ? 기술설명 ## ?서버 구조 ![https://user-images.githubusercontent.com/85653591/156701224-e71ab1b5-c4a9-4cbf-9c2c-e02a2fb1c92c.png](https://user-images.githubusercontent.com/85653591/156701224-e71ab1b5-c4a9-4cbf-9c2c-e02a2fb1c92c.png) $$uml !theme mars frame 작업자PC { frame Windows10 { frame Chrome { } } } frame 운영서버머신 { frame CentOS7(public．grb．asia,_172．17．0．1) { circle 172．17．0．1――8000 circle 172．17．0．1――443 circle 172．17．0．1――3306 frame Docker { frame Nginx――1 { circle Nginx――1――443 } frame Mariadb――1 { circle Mariadb――1――3306 } frame 서버 { circle 서버――8000 } frame 서버――test { } } } } Chrome --> "172．17．0．1――443":1． https://www.grb.asia/question/list 로 접속 "172．17．0．1――443" --> "Nginx――1――443" : 2． 외부 443 => Nginx 내부 443 "Nginx――1――443" --> "172．17．0．1――8000" : 3． Nginx Proxy Manager 에 의해 => 외부 8000 "172．17．0．1――8000" --> "서버――8000" : 4． 외부 8000 => 서버 내부 8000 "서버――8000" -[#green]-* "172．17．0．1――3306" : 5． DB 쿼리, 내부 8000 => 외부 3306 "172．17．0．1――3306" -[#green]-* "Mariadb――1――3306" : 6． 외부 3306 => Mariadb__1 내부 3306 $$ ## ?Termius ![Termius](https://i.imgur.com/zl8AcLc.png) ## ? Nginx ![Nginx](https://i.imgur.com/HiaaqwK.png) ## ? Jenkins ![Jenkins](https://i.imgur.com/gIRPJai.png) ## ? Jenkins pipeline ``` js pipeline { agent any environment { timestamp = "${System.currentTimeMillis() / 1000L}" } stages { stage('Prepare') { steps { script { // Get the ID of the sbb:latest image def oldImageId = sh(script: "docker images sbb:latest -q", returnStdout: true).trim() env.oldImageId = oldImageId } git branch: 'main', url: 'https://github.com/wooyoung0407/docker.git' } post { success { sh 'echo "Successfully Cloned Repository"' } failure { sh 'echo "Fail Cloned Repository"' } } } stage('Build Gradle') { steps { dir('.') { sh """ chmod +x gradlew """ } dir('.') { sh """ ./gradlew clean build -x test """ } } post { success { sh 'echo "Successfully Build Gradle Test"' } failure { sh 'echo "Fail Build Gradle Test"' } } } stage('Build Docker Image') { steps { script { sh "docker build -t sbb:${timestamp} ." } } } stage('Run Docker Container') { steps { script { // Check if the container is already running def isRunning = sh(script: "docker ps -q -f name=sbb_1", returnStdout: true).trim() if (isRunning) { sh "docker rm -f sbb_1" } // Run the new container try { sh """ docker run \ --name=sbb_1 \ -p 8080:8080 \ -v /docker_projects/sbb_1/volumes/gen:/gen \ --restart unless-stopped \ -e TZ=Asia/Seoul \ -d \ sbb:${timestamp} """ } catch (Exception e) { // If the container failed to run, remove it and the image isRunning = sh(script: "docker ps -q -f name=sbb_1", returnStdout: true).trim() if (isRunning) { sh "docker rm -f sbb_1" } def imageExists = sh(script: "docker images -q sbb:${timestamp}", returnStdout: true).trim() if (imageExists) { sh "docker rmi sbb:${timestamp}" } error("Failed to run the Docker container.") } // If there's an existing 'latest' image, remove it def latestExists = sh(script: "docker images -q sbb:latest", returnStdout: true).trim() if (latestExists) { sh "docker rmi sbb:latest" if(!oldImageId.isEmpty()) { sh "docker rmi ${oldImageId}" } } // Tag the new image as 'latest' sh "docker tag sbb:${env.timestamp} sbb:latest" } } } } } ``` ## ?젠킨스 배포순서, 테스트 실패시 $$uml !theme toy autonumber box "작업PC" actor 개발자 entity 작업PC end box entity Github_Repository box "서버" entity Jenkins entity 테스트용_서버컨테이너 entity 실서버용_서버컨테이너 end box 개발자 -> 작업PC : Commit! 작업PC -> Github_Repository : Push! Github_Repository -> Jenkins : Webhook에 의해서 Commit Signal 전송 Jenkins -> 테스트용_서버컨테이너 : 재배포 스크립트 실행 테스트용_서버컨테이너 -> Jenkins : 테스트가 실패했습니다... Jenkins -> Jenkins : 이번 빌드는 실패로 처리하고, 작업을 종료합니다. 개발자 -> Jenkins : 해당 빌드의 콘솔기록을 확인하여 테스트가 왜 실패했는지 분석 $$ ## ?젠킨스 배포순서, 테스트 성공시 $$uml !theme toy autonumber box "작업PC" actor 개발자 entity 작업PC end box entity Github_Repository box "서버" entity Jenkins entity 테스트용_서버컨테이너 entity 실서버용_서버컨테이너 end box 개발자 -> 작업PC : Commit! 작업PC -> Github_Repository : Push! Github_Repository -> Jenkins : Webhook에 의해서 Commit Signal 전송 Jenkins -> 테스트용_서버컨테이너 : 재배포 스크립트 실행 테스트용_서버컨테이너 -> Jenkins : All Clear Jenkins -> 실서버용_서버컨테이너 : 리빌드 후 다시 실행하세요! 개발자 -> 실서버용_서버컨테이너 : Web Brouser로 Build 되었는지 확인 $$ ## ♻ 페이지설명 ### ✔ 로그인 ![로그인](https://i.imgur.com/JUzT5Nn.png) --- ### ✔ 회원가입 ![회원가입](https://i.imgur.com/9KGBY6S.png) ```java public class UserService { private final UserRepository userRepository; private final PasswordEncoder passwordEncoder; public SiteUser create(String username, String email, String password) { SiteUser user = new SiteUser(); user.setUsername(username); user.setEmail(email); user.setPassword(passwordEncoder.encode(password)); BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder(); user.setPassword(passwordEncoder.encode(password)); this.userRepository.save(user); return user; } public SiteUser getUser(String username) { Optional siteUser = this.userRepository.findByusername(username); if (siteUser.isPresent()) { return siteUser.get(); } else { throw new DataNotFoundException("siteuser not found"); } } } ``` --- ### ✔ 게시글페이지 ![게시글페이지](https://i.imgur.com/ZsQ2L9G.png) ```java private Specification search(String kw) { return new Specification<>() { private static final long serialVersionUID = 1L; @Override public Predicate toPredicate(Root q, CriteriaQuery query, CriteriaBuilder cb) { query.distinct(true); // 중복을 제거 Join u1 = q.join("author", JoinType.LEFT); Join a = q.join("answerList", JoinType.LEFT); Join u2 = a.join("author", JoinType.LEFT); return cb.or(cb.like(q.get("subject"), "%" + kw + "%"), // 제목 cb.like(q.get("content"), "%" + kw + "%"), // 내용 cb.like(u1.get("username"), "%" + kw + "%"), // 질문 작성자 cb.like(a.get("content"), "%" + kw + "%"), // 답변 내용 cb.like(u2.get("username"), "%" + kw + "%")); // 답변 작성자 } }; } ``` --- ### ✔ 게시글작성 ![게시글작성](https://i.imgur.com/4t2dkRA.png) ```java class QuestionService { private final QuestionRepository questionRepository; public List getList() { return this.questionRepository.findAll(); } public Question getQuestion(Integer id) { Optional question = this.questionRepository.findById(id); if (question.isPresent()) { return question.get(); } else { throw new DataNotFoundException("question not found"); } } public void create(String subject, String content, SiteUser user) { Question q = new Question(); q.setSubject(subject); q.setContent(content); q.setCreateDate(LocalDateTime.now()); q.setAuthor(user); this.questionRepository.save(q); } public Page getList(int page, String kw) { List sorts = new ArrayList<>(); sorts.add(Sort.Order.desc("createDate")); Pageable pageable = PageRequest.of(page, 10, Sort.by(sorts)); Specification spec = search(kw); return this.questionRepository.findAll(spec, pageable); } public void modify(Question question, String subject, String content) { question.setSubject(subject); question.setContent(content); question.setModifyDate(LocalDateTime.now()); this.questionRepository.save(question); } public void delete(Question question) { this.questionRepository.delete(question); } public void vote(Question question, SiteUser siteUser) { question.getVoter().add(siteUser); this.questionRepository.save(question); } ``` --- ### ✔ 게시글상세페이지 ![게시글상세](https://i.imgur.com/k2ieD0K.png) --- ### ✔ 게시글수정 및 삭제 ![게시글수정및추천](https://i.imgur.com/o0ZWg79.png) ![게시글삭제](https://i.imgur.com/eHecAjt.png) ```java public void modify(Question question, String subject, String content) { question.setSubject(subject); question.setContent(content); question.setModifyDate(LocalDateTime.now()); this.questionRepository.save(question); } public void delete(Question question) { this.questionRepository.delete(question); } public void vote(Question question, SiteUser siteUser) { question.getVoter().add(siteUser); this.questionRepository.save(question); } ``` --- ### ✔ 댓글작성 ![댓글작성,삭제,수정,추천](https://i.imgur.com/fxYvPFs.png) ```java public class AnswerService { private final AnswerRepository answerRepository; public Answer create(Question question, String content, SiteUser author) { Answer answer = new Answer(); answer.setContent(content); answer.setCreateDate(LocalDateTime.now()); answer.setQuestion(question); answer.setAuthor(author); this.answerRepository.save(answer); return answer; } public Answer getAnswer(Integer id) { Optional answer = this.answerRepository.findById(id); if (answer.isPresent()) { return answer.get(); } else { throw new DataNotFoundException("answer not found"); } } public void modify(Answer answer, String content) { answer.setContent(content); answer.setModifyDate(LocalDateTime.now()); this.answerRepository.save(answer); } public void delete(Answer answer) { this.answerRepository.delete(answer); } public void vote(Answer answer, SiteUser siteUser) { answer.getVoter().add(siteUser); this.answerRepository.save(answer); } } ```