Giter Club home page Giter Club logo

be_project's Introduction

반포자이 - 아파트너 고도화

Hits GitHub issues GitHub pull requests Spring Boot MySQL AWS


image

image

image


✨아파트너 서비스 고도화 배경

  • 아파트너의 핵심 목표는 아파트 이해관계자를 위해 아파트너만의 다양한 솔루션을 제공합니다.
  • 요구 사항에 따른 아파트너 입주민들이 프라이드를 가질 만큼의 있어빌리티 UI / UX 중요한 목표입니다.
  • 요구 사항에 따른 회원 / 인증, 게시판(공지사항 / 정보 / 소통 / 민원) 서비스 고도화가 중요한 목표입니다.

👨‍👩‍👧‍👦 구성원

BE(L): 임대일 BE: 이규석 BE: 나승정 FE(L): 박수빈 FE: 이주홍
profile profile profile profile
PM(L): 이나현 PM: 오로라 PM: 김윤희 UXUI(L): 유채연 UXUI: 권은비
profile profile profile profile profile

🚎 프로젝트 아키텍처

image

  • 모든 이해관계자가 쉽게 API 를 확인하고 수행할 수 있도록 HTTPS / HTTP 를 지원하는 Swagger 으로 제공합니다.
  • Swap Memory, Elastic IP 등 프로젝트 특성에 불필요한 리소스를 사용하지 않고 최소한의 비용으로 서비스를 제공합니다.
  • 한 명의 회원마다 다주택자를 고려해서 [회원 / 인증], [소통, 정보, 민원] 서비스 고도화를 목적으로 프로젝트를 진행했습니다.

📈BE: Dependency And Devopment Team Tool

📦 Dependency

  • 프로젝트 생성일자 기준으로 가장 최신 버전(3.2.5)에 호환되는 의존성입니다.
    • SpringBoot 3.2.5
    • Java17
    • Gradle 8.7
    • Spring Data JPA
    • Validation
    • Spring Web
    • Lombok
    • Spring Devtools
    • H2 Database 2.2.224
    • MySQL Database 8.2.0
    • Spring Security 6.2.4
    • Swagger 2.0.2
    • QueryDSL 5.0.0
    • jsonwebtoken-jjwt 0.11.5
    • Spring Cloud AWS 2.2.6
    • Spring Data Redis

🚀 Devopment Team Tool

  • 소통 도구

    • Slack: 모든 이해관계자와 대화하는 공간입니다.
    • Zoom: 온라인 과정으로 화상 회의가 중심입니다.
    • Kakaotalk: 급한 일이 발생할 때를 대비하기 위해 사용합니다.
    • Notion: PM, UIUX, BE, FE 일정 및 도출되는 문서 관리 공간입니다.
    • Discord: 프로젝트 리포지토리에서 발생되는 모든 일을 전달받습니다.
  • 협업 도구(BE)

    • Github: Wiki, Project 를 활용하여 애자일 방법론으로 프로젝트 형상관리를 구성합니다.
    • Code with me: 커밋 충돌 혹은 문제 발생하면 모두 함께 리뷰하는 도구입니다.
    • Erdcloud: 데이터베이스 구성 요소를 시각화하기 위해 사용된 도구입니다.

image


📈 DataBase Schema

image


🍃 Contributors

👜 Repository

be_project's People

Contributors

limdaeil avatar cutegyuseok avatar nasj93 avatar

Stargazers

 avatar  avatar

be_project's Issues

회원 엔티티 및 DTO 생성하기

회원 엔티티와 요청 DTO 를 생성한다.

  • MySQL 속성에 따라 엔티티에서 크기 지정하기
  • DTO 클래스 안에 정규표현식으로 데이터 형식 검증하기

JWT 추가 및 기본 설정

JWT 토큰 인증 방식에 필요한 코드를 작성한다.

  • JWT 문자열 생성하기
  • JWT 체크 필터 설정하기
  • AccessToken, RefreshToken 발행하기

민원 게시판 기능

Title

민원 게시판 기능

Tasks

민원 카테고리

  • 민원 카테고리 생성
  • 민원 카테고리 수정
  • 민원 카테고리 삭제
  • 민원 카테고리 조회

민원

  • 민원 생성
  • 민원 수정
  • 민원 삭제
  • 민원 조회
  • 민원 검색
  • 관리자 민원 진행 상태 변경

github action 관련 문제점 해결

Title

github action 관련 문제점 해결

Description

  • 다양한 yml 파일이 master branch에 올라가 bulid 할 때 문제가 생기는 경우
    • build 전 불필요 yml 파일 제거하는 스크립트 추가
      - name: Remove old configuration files
      run: |
      cd /home/runner/work/BE_Project/BE_Project/aptner/src/main/resources
      rm application.yml application-local.yml application-test.yml
  • 작성한 테스트 코드가 build 할 때 작동하여 메인 DB에 테스트 내용이 들어가는 경우
    • ./gradlew clean build --exclude-task test
    • 테스트 제외 빌드

RESTful API 방식에서 formLogin 설정 문제점

formLogin 은 기본적으로 SSR 방식.

스프링 시큐리티에서 시큐리티 설정을 위해 SecurityFilterChain 메서드를 구현해야 한다. 대부분의 스프링 시큐리티 예제는 타임리프처럼 SSR 방식으로 대부분 설명하는 특징 때문에(밸덩도 SSR) SPA 방식에서는 어떻게 해야 좋을지 1차 난관에 부딪힌다. 물론, 다양한 예제가 많지만 스프링 시큐리티 정석대로 구현하고 싶었다.

그래서 api/member/login 를 시큐리티에서 로그인을 처리하는 경로로 지정하여 시큐리티가 제공하는 로그인 화면의 경로 설정했다. 문제는 프로젝트 실행후에 GET방식으로 'api/member/login' 호출해 보시면 기본적으로 제공하는 로그인 화면이 뜨지 않고, 404 에러와 함께 메시지는 "정적 리소스를 찾을 수 없습니다." 에러가 발생했다. 잘못된 것이다. POST 방식 또한 CSRF 비활성화 상태임에도 불구하고 회원 인증 정보를 제대로 입력하더라도 정상적인 처리가 안되고 동일하게 404 에러와 함께 "정적 리소스를 찾을 수 없습니다." 만 출력됐다. (참고로 회원 정보를 formLogin 으로 했기 때문에, POST / application/x-www-form-urlencoded 방식으로 다음과 같이 보냈다.)

에러 발생이 맞긴 하지만, 아래처럼 발생되면 안된다.

image

image

여기에서 가장 큰 핵심은 에러 메시지조차 예상한 것들이 아니라는 점과, 콘솔창은 정상적으로 동작한다는 점이다. 따라서 웹 브라우저 에서 404 에러, 포스트맨 결과에서 웹 브라우저와 동일한 404 에러가 발생한 것이다. 이때 콘솔창에서는 정상적으로 출력되는 것을 확인이 가능하기 때문에 여러 삽질? 이후에 콘솔창에서는 정상적으로 인증 정보에 접근이 가능하니까 인증 처리를 위해 UserDetailsService 와 인증 성공, 실패 핸들러까지 구현했다. 그리고 다시 POST 요청을 수행하게 될 때 정상적으로 출력되는 것을 볼 수 있었다. 해결하기 위해 시도한 방법은 다음과 같다.

  1. SecurityFilterChain 에서 cors, csrf 설정 문제라고 생각하고 접근하기
  2. 의존성이 추가 되면서 스프링 시큐리티 라이브러리 누락이 발생됐는지 확인하기
  3. 최신 빌드가 아닌지 확인하기
  4. 잘못된 라이브러리 불러온 것인지 확인하기
  5. formlogin 메서드 변경점이 있는지 확인하기
  6. 정적 리소스부터 접근하는 이유 찾아보기
  7. 콘솔창은 정상적으로 실행되는 이유 찾아보기
  8. 404 에러 발생 시점 확인하기
  9. 다시 프로젝트 포크 받기
    ...

image

댓글 기능, 공감 기능

Title

댓글 기능

Tasks

댓글(대댓글)

  • 댓글 생성
  • 댓글 수정
  • 댓글 삭제
  • 댓글 조회

공감(비공감)

  • 공감 생성
  • 공감 수정
  • 공감 삭제

댓글 공감(비공감)

  • 댓글 공감 생성
  • 댓글 공감 수정
  • 댓글 공감 삭제

공지사항 기능

Title

공지사항 기능

Tasks

공지사항 카테고리

  • 카테고리 생성
  • 카테고리 수정
  • 카테고리 삭제
  • 카테고리 조회

공지사항

  • 공지사항 생성

  • 공지사항 수정

  • 공지사항 삭제

  • 공지사항 조회

  • 공지사항 숨기기

  • 공지사항 검색

    • 페이징
    • 검색어
    • 검색 타입( 제목, 내용 ,제목+내용)
    • 정렬 기준( 날짜, 조회수, 댓글수, 공감수)
    • 정렬 차순(오름차순, 내림차순)
    • 검색어
    • 공지 타입(공지사항, 의무공개)
    • 카테고리
  • #40

S3 버킷 활용한 파일 업로드

Title

S3 버킷을 활용한 이미지 & 동영상& etc

Description

다양한 형식의 파일을 업로드 가능하도록 구현

Tasks

  • 파일 업로드용 버킷 생성

Ques·tion

이미지 파일 형식?? svg png jpeg jpg

시큐리티 추가 및 기본 설정

스프링 시큐리티 의존성을 추가하고, 필요한 기본 설정을 다룬다.

  • CORS 설정하기
    • CORS 학습하기
    • HTTP Method: GET, POST, PUT, DELETE, HEAD, OPTIONS 에 대해 허용한다.
  • CSRF 비활성화하기
    • CSRF 학습하기
  • 비밀번호 암호화 설정하기

AWS CloudWatch

Title

AWS CloudWatch logs 적용

Description

spring에서의 로깅 먼저 활성화 후 AWS CloudWatch logs 적용

References

AOP 으로 @Pattern message 응답하기

스프링 IoC 컨테이너에 등록되어 있는 커스텀 AOP 는 지금까지 스프링에서 에러 메시지를 생성하고 응답하도록 작성한 방식을 변경했다.
@pattern message 속성값을 응답값으로 반환할 수 있도록 변경했다.

  • @pattern message 속성값을 응답하도록 수정하기
  • 테스트 작성하고 실행하기

회원, JWT 경로 및 코드 리팩토링하기

회원, JWT 컨트롤러를 분리하고 각 컨트롤러는 의미에 알맞게 다시 수정한다.
명확한 의미를 전달하고자 Login, Logout 으로 변경하고 경로도 변경했다.

CI/CD

Github Action

image

인스턴스

  • EC2 인스턴스 생성
    • 권한 설정
    • 방화벽 설정
    • 포트 열기
  • 인스턴스 보안그룹 설정
    • 인바운드 규칙 설정
  • IAM 사용자 생성
    • 정책 연결
    • 엑세스 키 및 보안키 발급
    • 역할 생성 -> ec2
    • AmazonS3FullAccess & AWSCodeDeployFullAccess
    • 역할 생성 -> CodeDeploy
    • 인스턴스에 역할 부여
  • S3 버킷
    • S3 버킷 생성
  • 인스턴스에 접속
    • ruby-full 설치
    • wget 설치
    • cd /home/ubuntu
    • awscli 설치
    • aws s3 cp s3://aws-codedeploy-ap-northeast-2/latest/install . --region ap-northeast-2
      • AWS CodeDeploy 에이전트 설치 파일을 AWS S3 버킷에서 내려받아 현재 디렉터리에 복사
      • AWS 리전을 아시아 태평양(서울) 리전인 ap-northeast-2로 설정
    • chmod +x ./install
      • install 파일에 실행 권한을 추가
    • sudo ./install auto
      • install 파일을 sudo 권한으로 실행하여 AWS CodeDeploy 에이전트를 자동으로 설치
    • sudo service codedeploy-agent status 설치 확인
    • openjdk-17-jdk 설치
  • CodeDeploy 생성
    • 배포 그룹 생성
    • 역할 연결
    • 환경 구성 인스턴스 연결
  • 설정 파일 작성
    • main.yml (빌드 및 jar 버킷 업로드)
    • appspec.yml (배포 프로세스 정의, 파일 복사, 권한 설정, deploy.sh 실행)
    • deploy.sh (실행중인 서버 중단 및 새로운 서버 실행)

Docker & DockerHub & Jenkins & NginX & Portainer

  • 추후에 시간 여유가 생길 시 도전

Multi Module 방식 적용 시

  • GitAction Refactoring or use Jenkins

서버 시간 설정

Title

서버 시간 설정 관련하여

Description

image

System.setProperty("user.timezone", "Asia/Seoul");
timezone을 서울로 바꾸면 해결 될것 같긴 합니다. 혹시 다른 방법 아시나요 ?

기능 명세 변경에 따른 ERD 재구성

Title

기능 명세에 변경이 생겨 ERD를 새로 구성했습니다.
개발 기간이 부족함에 따라 빠르게 구성하고, ERD 에 맞게 Entity를 급히 수정했습니다.
세세한 부분은 개발하며 고쳐야 할 것 같고, 자세한 리뷰 부탁 드립니다.

인증 성공과 실패 핸들러 작성하기

로그인에 성공 여부에 따른 인증 성공 및 실패 핸들러를 작성한다.

  • 회원 DTO 생성하기
  • 회원 엔티티 수정하기
    • enum 타입 값 저장을 String 으로 변경하기
  • AuthenticationSuccessHandler 구현하기
  • AuthenticationFailureHandler 구현하기

EC2 HTTPS & Load Balancers

Title

HTTPS 적용

Description

image

Tasks

  • 도메인 생성
  • security 정책 설정
  • SSL 인증서 발급 & 호스팅 적용
  • route53 도메인 연결
  • Target 그룹 지정
  • Load Balancer 생성 및 적용

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.