[인프런 워밍업 클럽 BE 2기] 백엔드 프로젝트 - 4주차 발자국

마지막 주차인 4주차는 지금까지 개발한 어디민 페이지의 뷰를 개발하였고, 스프링 시큐리티를 이용한 로그인 개발, 로그 저장 등의 기능을 구현 하였다.

프로젝트를 마무리 짓고 최종적으로 docker와 구글 클라우드를 이용해서 배포를 하였다.

어드민 화면 개발 1

• 부트스트랩 템플릿 적용 시 코드 분석 및 TODO 체크 기능 해제: 부트스트랩 템플릿을 사용해 UI를 구성할 때 코드 변경 사항이 많아 analyze code와 check TODO 기능이 오래 걸려, 이를 해제하여 커밋 및 푸시 시간을 줄임.

• 사이드바 개발에서 th:classappend, th:attr data-bs-target, th:classappend show 사용: Thymeleaf의 th:classappend를 이용해 동적으로 클래스를 추가하고, th:attr을 통해 부트스트랩의 data-bs-target 속성을 설정하여 UI 요소를 제어함. show 클래스를 사용해 사이드바를 열고 닫는 동작을 구현.

• 뷰 레이아웃 개발 및 테이블 페이지(Table) 구현: HTML 템플릿에서 레이아웃을 설계하고, 데이터가 표시될 테이블 형태의 페이지를 구성. 이를 통해 표 형태로 데이터를 보기 쉽게 표시.

• /*<![CDATA[*/ 구문 사용과 [[${pageName}]] 바인딩: Thymeleaf에서 스크립트를 안전하게 사용하기 위해 CDATA 구문을 사용하고, ${pageName}을 통해 페이지 이름을 동적으로 바인딩하여 화면에 표시.

• 테이블 아이디 tableName 설정: HTML에서 테이블을 식별하기 위한 아이디를 tableName으로 설정하여 JavaScript 등에서 쉽게 접근 가능하도록 함.

   

어드민 화면 개발 2

• 테이블 페이지(Form) 개발: 사용자가 데이터를 입력하고 제출할 수 있는 Form 페이지를 구성. 입력된 데이터를 서버로 전송하고 처리하는 역할을 함.

• onsubmit : Form이 제출되기 전에 특정 JavaScript 함수를 실행하여 데이터를 검증하거나 추가 작업을 수행할 수 있게 해주는 이벤트.

대시보드와 로그인 기능 개발

• 스프링 시큐리티를 이용한 로그인 개발: 스프링 프레임워크에서 제공하는 시큐리티 모듈을 사용해 사용자 인증 및 권한 관리를 구현. 안전한 로그인 기능을 제공.

• 패스워드 인코더 및 필터 체인 개발: 패스워드 보안을 위해 PasswordEncoder를 사용해 비밀번호를 암호화하고, 인증 과정을 제어하기 위해 필터 체인을 설정함.

• AntPathRequestMatcher 사용: 특정 URL 경로와 HTTP 메서드에 대해 시큐리티 필터링을 설정하는 데 사용. 로그아웃 등의 특정 경로에 대해 시큐리티를 설정할 때 유용함.

구글 클라우드 플랫폼으로 프로젝트 배포

• Docker로 MySQL 실행 및 컨테이너 설정: Docker 이미지를 사용해 MySQL 데이터베이스를 컨테이너로 실행하고, 필요한 포트와 환경 변수를 설정하여 데이터베이스를 관리.

• ports, command, volumes 설정:

  • ports: 호스트와 컨테이너 간의 포트를 매핑하여 외부에서 데이터베이스에 접근할 수 있도록 함.

  • command: 컨테이너가 시작될 때 실행할 명령어를 정의. 예를 들어, MySQL의 문자 집합을 설정하는 명령어를 추가.

  • volumes: 컨테이너의 데이터가 호스트에 영구적으로 저장되도록 설정하여 컨테이너 재시작 시 데이터가 손실되지 않도록 함.

• 프로젝트 컨테이너 설정 및 depends_on 사용: Spring 애플리케이션을 실행하는 컨테이너와 데이터베이스 컨테이너를 설정하고, depends_on을 통해 MySQL이 먼저 실행된 후 애플리케이션이 실행되도록 순서를 지정.

• 호스트 포트 (Host Port): 호스트 컴퓨터에서 사용되는 포트입니다. 예를 들어, 3306:3306에서 앞의 3306이 호스트 포트입니다. 이는 Docker를 실행하는 컴퓨터에서 접근 가능한 포트 번호를 의미합니다. 다른 컴퓨터나 서버에서 이 호스트의 IP 주소와 포트를 사용하여 Docker 컨테이너의 서비스에 접근할 수 있습니다.

• 컨테이너 포트 (Container Port): 컨테이너 내부에서 서비스가 실행되는 포트입니다. 3306:3306에서 뒤의 3306이 컨테이너 포트입니다. 이는 컨테이너 내부에서 MySQL 서비스가 동작하는 포트를 의미합니다. 컨테이너 내의 애플리케이션은 이 포트를 통해 데이터베이스와 통신합니다.

• Docker로 프로젝트 빌드

  • Google Cloud Platform에서 Compute Engine 인스턴스 생성: 애플리케이션을 배포할 가상 머신을 생성하여, Docker 컨테이너를 실행할 환경을 제공.

  • 도커 허브로 푸시 시 커맨드로 진행: Docker Desktop에서 푸시 시 발생하는 오류를 해결하기 위해 명령어를 사용하여 직접 푸시.

  • Compute Engine에서 도커 컨테이너 실행: Google Cloud에서 생성한 인스턴스에 도커 컨테이너를 실행하여 애플리케이션을 운영.

  • 메모리 스왑 설정 및 Nginx 사용: 하드디스크의 일부를 메모리처럼 사용하는 메모리 스왑을 설정하고, Nginx를 사용해 애플리케이션의 로드 밸런싱 및 리버스 프록시 역할을 설정.

  • 도메인 연결 및 HTTPS 적용: 애플리케이션에 도메인을 연결하고 SSL 인증서를 적용하여 HTTPS를 통해 안전하게 서비스.

[미션 6] MySQL에 내 데이터 넣기

• 문제 상황: Docker로 실행한 MySQL과 DBeaver에서 연결된 데이터베이스의 내용이 달랐음.

• 원인: 과거 MariaDB 사용 이력이 있어, MariaDB와 MySQL이 서로 다른 포트로 연결되어 데이터가 불일치.

  • DBeaver에서는 MariaDB에 연결되고, Docker에서는 MySQL에 연결되는 상황 발생.

• 해결 방법: MariaDB의 서비스를 중단하여 MySQL만 실행되도록 설정하여 문제를 해결.

[미션 7] 내 포트폴리오 도메인 공유하기

• 문제 상황: Google Cloud Compute Engine에서 Docker Hub의 이미지를 pull하려 했으나, Docker push가 되지 않아 pull이 실패.

• 원인: Docker Desktop 4.3.3 버전 이후로, Docker Desktop을 통한 push에서 오류 발생.

• 해결 방법: Docker Desktop 대신 명령어를 사용해 push하여 문제를 해결.