드 ! 디 ! 어! 한달간의 메인 프로젝트가 끝났다,,,,정말 처음 코드스테이츠 시작할 때는 상상조차 안되던 지점이었는데 이제 수료까지 일주일밖에 안남았다니 실감도 안나고 벌써 마음이 붕 뜬 느낌이다ㅋㅋ
오늘 메인프로젝트 끝나고 데모데이도 하고 팀원들이랑 인사도 나누고 정말 값지고 좋았던 시간이었던 것 같다,, 다른 팀들 보면서 더 열심히 공부해서 저런 기능들 나도 해봐야지 의욕도 생기고 우리팀 너무 잘한 것 같아서 뿌듯하고 내가 그래도 이정도까지 하다니 처음 생각하면 감개무량😂 잘 할 수 있을지 너무 걱정 많이 했는데 정말 좋은 팀원분들, 멘토분 만나서 끝까지 잘 한것 같다!
이제 일주일 쉬고 수료 후 또 열심히 해보자😊😊😊😊
📌 프로젝트 링크
기술발표 영상 (내 부분만 수정)
⭐ 서비스 소개
반려동물 인구 1500만 시대!
세상의 모든 반려동물, 반려인을 위한 커뮤니티 & 지도 웹앱 PAW PAW 🐾
🔎 내가 사는 지역에서 반려동물과 함께할 수 있는 모든 시설을 확인하세요.
📝 방문한 적이 있는 곳은 리뷰를 작성해 다른 반려인들과 경험을 공유해보세요.
⭐ 마음에 든 장소를 저장해서 나만의 지도를 만들어 보세요.
🏃🏻 이제부터 커뮤니티에서 정보를 공유하고 친구를 만들어 봅시다~ 🏃🏻♀️
⭐ 팀 기술 스택
프론트 엔드
| 팀원 명 | 담당 기능 |
|---|---|
| OOO | 회원가입-탈퇴,로그인-아웃,관리자권한,리프레쉬 토큰,댓글 CRUD,게시글 추천,프라이빗 라우터,css,배포 |
| OOO | 홈 지도, 게시글 CRUD, 필터, 장소 북마크, 회원정보수정, sweetalert2, CSS |
| OOO | 장소 리뷰 CRUD, 지도 Modal, 장소 추가, 마이페이지, 커뮤니티, sweetalert2, CSS |
백 엔드
| 팀원 명 | 담당 기능 |
|---|---|
| OOO | 서버 배포, 로그인 로그아웃(Spring Security + Redis), Map 도메인, 게시판 도메인, 배포 자동화 |
| 오수빈 | 회원 등록, 회원 정보 수정, 회원 삭제, 회원 상태 관리, 마이페이지 조회, 관리자 권한 추가, 배포 자동화 |
| OOO | 게시판 CRUD, S3 이미지 업로드, 이미지 삭제 |
⭐ 서비스 시연
-
로그인
-
회원가입
-
마이페이지
-
지도
-
지도 Modal
-
리뷰 CRUD
-
커뮤니티 탭
-
게시물 조회
-
게시물 작성
-
게시물 수정 및 삭제
-
게시물 댓글
-
내 정보 수정
-
로그아웃
-
회원탈퇴
-
관리자 권한 요청
-
장소 추가하기 (관리자 권한X)
-
장소 추가하기 (관리자 권한O) ⇒ 마커 등록
⭐기술문서
Github Actions 를 이용한 배포 자동화 🔄
이번 프로젝트에서 깃허브액션과 aws pipeline 중에 저희는 깃허브 액션을 선택했습니다.팀 협업 툴로 사용하고 있고 깃허브 시크릿을 사용하는 등 하나로 통합하여 관리가 용이 하기 때문에 깃허브액션으로 배포를 진행 했습니다.
배포 Flow ▶
깃허브 레포지토리에 트리거가 발생하면 깃헙액션이 작동됩니다. wolkflow 자동화 구성을 통하여 프로젝트를 빌드하고, 파일을 S3에 전송합니다.
code Deploy가 배포 명령을 받아 파일을 ec2로 전송하고 작성된 쉘 스크립트를 통해 빌드 파일을 서버에 배포하게 됩니다.
환경변수 관리❓
로컬에서는 시스템 환경변수에 설정하여 민감한 키값들을 관리했었는데 배포 시에는 환경변수 값을 노출되지 않게 하기 위해 깃헙 시크릿을 사용했습니다.
- 깃헙 시크릿에 값들을 저장해두면 깃허브 액션으로 프로젝트 빌드 시에 저장된 값을 불러와서 사용이 가능합니다.
- 시크릿 설정 값들로 빌드 전에 yml파일을 세팅해주고 그 후에 yml파일을 사용하여 빌드를 진행하게 했습니다.
개발환경 분리❓
개발환경에서는 H2 DB를 사용하고 실제 배포환경은 MySQL을 사용하여 환경 분리가 필요했습니다.
🙍♂️Profile 설정 적용
- application.yml 파일을 로컬/ 서버 환경으로 만들어 관리 할 수도 있지만, 빌드 시에 resource 아래 설정 파일이 모두 담겨 빌드되는 문제가 있어서 디벨롭 폴더과 프로덕트 폴더로 나누어 yml 파일을 각 각 생성해 주었습니다.
- 워크플로우에서 빌드를 할 때 profile 설정을 해주어 resource-프로덕트 폴더의 설정 파일만 담겨 빌드되게 됩니다.
Workflow ⏩
build.gradle에 작성된 설정에 따라 현재 back 브랜치에 push를 하게되면 깃허브액션의 워크플로우가 실행됩니다.
- yml 파일을 세팅하고 빌드한 후에 빌드 파일을 압축하여 인증된 S3 저장소에 전송이 되고, 그 후에 code deploy가 실행됩니다.
CodeDeploy✅
codeDeploy는 aws에서 제공하는 배포 서비스로 쉘 스크립트에 따라 ec2에서 배포를 진행하게 됩니다.
- 쉘 스크립트에 현재 실행중인 서버를 종료한 뒤, 전달받은 새 빌드 파일을 배포하는 코드를 작성하여 배포 자동화가 진행되게 구축하였습니다.
💛 부록
-
우리 포코로도 가입하기
-
커여운 우리 팀원들 ( 데모데이 기념사진 )💙
-
우리 팀 부스 샷
