TIL / 2022-04-26 시스템 아키텍처

[한 것]

• 모아모아 사이드 프로젝트 아키텍처 그리기
• Bangu 토이 프로젝트 API 리팩토링

---

[배운 것]

https://www.draw.io 를 통해서 아키텍처를 쉽게 그릴수 있음을 알게 되었음!

 

[내가 설계한 Moamoa 프로젝트 아키텍처]

 

[플로우 설명]

---

1. Local에서 frontend와 backend가 각각 develop 브랜치에 push를 하면, Github Actions가 자동 감지하여 Event trigger를 발생시킨다.

2. 이때,  Github Actions에서 프론트엔드, 백엔드 파일을 자체 빌드하고, 압축파일 형태로 만든다.

3. 그리고 S3 bucket으로 zip 파일을 전송시키고, AWS IAM에서 권한 설정에 따라 CodeDeploy를 통해 zip 파일을 Amazon Ec2에 압축을 풀게 된다.

 

4. EC2는 가비아에서 구매한 moamoadev.shop 도메인을 설정하였는데, AWS에서 지원하는 Route53을 통해 도메인을 등록 시켜주었다.

5. 무중단 배포와 리버스 프록시 설정을 위해 Amazon EC2에 Nginx를 설치하고, Nginx 내에서 리버스 프록시를 설정하여, / 요청은 3000번 포트(리액트 정적 파일), /api 요청은 8080 포트(스프링부트 내장 톰캣)으로 리다이렉트하게 만들었다.

6. SSL Certificate(Https) 설정은 Let's encrypt를 사용하여 무료로 자동으로 업데이트되도록 https 설정을 진행하였다. 

 

7. 백엔드내의 기술스택은 QueryDSL, redis(refreshToken 저장을 위한 내장 저장소), Spring Data JPA, Spring Security를 사용하였다. 백엔드에서는 DB는 AmazonRDS를 사용하고 있으며, MySQL을 이용하고 있다.

8. Spring Security를 통해 OAuth 2.0(카카오, 네이버, 구글)을 자동으로 백엔드에서 처리후 프론트로 리다이렉트하게 설정하였다. JWT를 이용하여, accessToken, refreshToken(보안을 위해 쿠키로 전달)로 진행하였음.

 

 

---

[느낀점]

프론트엔드, 백엔드 이제 배포 자동화가 잘되고, 모든게 순조롭게 진행되는 것 같아서 기분이 좋다.

요즘 너무 바쁜 것 같다.. 아키텍처 그리느라 3시간 소비했어요..

 

---

[할 것]

영어 공부 하기

알고리즘 풀기