📚 배운 것
프론트엔드(React) 배포 방법 고민
(어제 글을 남겼지만) 코드스쿼드에서의 3주간의 마지막 팀 프로젝트를 시작했다. 이번 프로젝트는 FE(2명)/BE(1명)으로 BE를 담당했다.
FE - react / BE - Spring를 사용한다. BE가 FE 웹까지 배포를 담당하기로 했다.
React는 SPA(Single Page Application), CSR(Client side rendering)으로 build 하면 정적 파일이 생긴다.
이를 배포하면 되겠다 생각했고 3가지가 떠올랐다.
Case 1 : Spring + react 묶어 배포하기
react를 빌드하면 /build 정적 리소스 파일을 spring의 src/main/resources/main/static 에 넣어 배포한다.
장점
- 한 번에 묶어 배포할 수 있다.
- 간편하다
- 서버 한대로 띄울 수 있다.
단점
- FE/BE 결과, 서버 구분이 되어 있지 않다.
- BE만 확장하기 어렵다.
Case 2 : nginx + react 배포하기
react 빌드 결과의 정적 리소스 파일을 nginx와 같은 웹서버와 연결하여 배포한다.
장점
- FE/BE 서버 분리하여 배포할 수 있다.
- FE만 서버 확장 가능하다.
단점
- BE에서 CORS 문제 해결해야 한다.
Case 3 : AWS의 S3 + CloudFront를 사용하여 배포한다.
react 빌드 결과의 정적 리소스 파일을 S3에 올린다. 정적 리소스 파일이기에 S3에서 index.html만 연결시켜주면 필요한 리소스를 s3링크로 요청해 받는다. FE를 서버 없이 배포할 수 있다. 여기에 CloudFront의 기능을 추가하면 더 좋다. 별도의 상태 코드 지정과, AWS 전 세계 CDN에 정적 리소스를 보내 캐시를 사용할 수 있다.
Case 3으로 일단 성공적(?)으로 배포했다. 이 과정을 문서화하였다.
디테일한 옵션 설정을 건드리지 못했다. 프로젝트가 발전하며 삽질 기대를(?) 해본다.
무료 제공되는 CloudFront 캐시 무효화 수가 생각보다 적어 과금이 두렵다.
👍 Keep
- 처음 보는 기술을 실습, 학습하고 정리하여 글을 작성했다.!
🔥Problem
- 어제 못했던 산책은 했다. 이젠 운동을 해보자
🚒 Try
- 내일 푸시업 3세트 해보자!
댓글