[의사결정, 일일회고] 22.06.14 - "프론트엔드(React) 배포와 아키텍처"

📚 배운 것

프론트엔드(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으로 일단 성공적(?)으로 배포했다. 이 과정을 문서화하였다.

2022.06.14 - [👾 Server/☁️AWS] - Github Actions를 활용해 React를 S3, CloudFront를 사용해 배포하기 (서버 없이(?) 프론트 배포하기)

 

디테일한 옵션 설정을 건드리지 못했다. 프로젝트가 발전하며 삽질 기대를(?) 해본다.

무료 제공되는 CloudFront 캐시 무효화 수가 생각보다 적어 과금이 두렵다. 

---

👍 Keep

• 처음 보는 기술을 실습, 학습하고 정리하여 글을 작성했다.!

🔥Problem

• 어제 못했던 산책은 했다. 이젠 운동을 해보자

🚒 Try

• 내일 푸시업 3세트 해보자!