프론트엔드 react를 S3에 배포하는 방법
- 비용 효율성 및 확장성
- 비용 효율성
- S3는 저장소 비용이 저렴, 트래픽에 따라 요금이 부과되기 때문에 초기 비용이 낮습니다.
- 대규모 트래픽을 처리하는 경우 자동으로 확장됩니다.
- 확장성
- S3는 대규모 트래픽을 자동으로 처리하는 확장성을 갖추고 있습니다. 특히 CloudFront와 연동하면 전 세계적으로 로드 밸런싱이 가능해, 사용자의 지리적 위치에 관계없이 빠른 로딩 속도를 제공합니다.
- ncloud에서는 CloudFront(CDN) 사용불가
- 서버리스 구조 지원
- 서버 관리 필요 없음: S3에 배포된 정적 사이트는 서버 없이도 운영되므로, 애플리케이션을 위한 백엔드 서버 관리나 설정이 필요 없습니다.
- 서버 유지보수 감소: 서버와 인스턴스를 관리하는 부담이 없고, 리소스 할당을 고민할 필요도 없어 DevOps 작업을 줄입니다.
- 안정적인 정적 파일 서빙
- 정적 파일에 최적화: S3는 정적 파일을 효과적으로 서빙할 수 있도록 설계되어 있으며, 이미지, 비디오 등 미디어 파일 호스팅에도 유리합니다.
- 고가용성: S3는 데이터 손실 가능성이 거의 없다.
- CloudFront와의 통합 가능성 - ncloud에서 CDN 크레딧 사용불가
- 배포와 업데이트가 쉬움
- 단순한 배포: 빌드된 정적 파일을 S3 버킷에 업로드하기만 하면 배포가 완료
- SEO와 로딩 속도 개선
- 빠른 로딩 시간: 정적 파일이기 때문에 서버에서의 처리 시간 없이 빠르게 로드
- SEO 측면에서도 초기 로딩 시간이 중요한데, CDN을 통해 로딩 속도를 개선함으로써 SEO 성능을 높일 수 있음
<aside>
💡
프론트엔드가 서버 사이드 로직이 거의 없는 정적 애플리케이션일 때 효과적
</aside>
S3말고 그냥 ec2에 nginx을 이용해서 배포하는 방법
- 서버 사이드 렌더링(SSR) 및 복잡한 라우팅 요구
- SSR 지원: SEO와 초기 로딩 속도 개선에 유리
- 복잡한 라우팅 요구: 프록시 설정이 필요한 경우(예: 특정 API나 WebSocket 서버로 라우팅), Nginx는 다양한 프록시 설정을 지원하므로 API 서버와 통합이 쉽고 보안 설정도 강화
- 커스텀 서버 설정 및 유연성
- Nginx의 유연한 설정: EC2에 Nginx를 사용하면 캐싱, 로드 밸런싱, 세션 관리, gzip 압축 등 다양한 기능설정 가능
- 사용자 경험과 성능을 최적화할 수 있으며, 대규모 트래픽 관리에도 유리
- 백엔드와의 통합이 쉬움
- 백엔드와의 네트워크 통합: EC2 인스턴스는 같은 VPC 내의 백엔드 서버와 직접 연결
- Nginx는 API 서버, WebSocket 서버와의 연결도 간편하게 관리
- 배포와 자동화
- CI/CD 파이프라인 구축: S3와는 다르게, 서버 재시작이나 특정 스크립트 실행 등의 작업을 추가할 수 있음
- 릴리즈 전략: Blue-Green, Canary 배포와 같은 고급 배포 전략을 적용할 수 있어 릴리즈 과정에서의 가용성 및 안정성을 높임
- 동적 콘텐츠와 실시간 업데이트 요구
- 실시간 기능: Nginx를 통해 실시간 업데이트를 위한 프록시 설정이 가능, WebSocket 같은 실시간 통신 요구사항이 있을 때 효과적
- S3에서는 실시간 통신이 제한적이며, 실시간 데이터를 다루는 애플리케이션에는 부적합할 수 있음
- 트래픽 및 부하 분산 제어
- 고부하 관리: 오토 스케일링 설정을 통해 트래픽 증가 시 인스턴스를 동적으로 추가하여 서버 과부하를 방지
- Nginx는 로드 밸런서 역할을 할 수 있어 대규모 트래픽을 효율적으로 분산
- 성능 최적화: 캐싱, HTTP/2, Keep-Alive와 같은 Nginx 최적화 기능을 사용
- 비용 관련
- EC2 인스턴스 유형 선택: 필요에 따라 인스턴스 유형을 선택하여 비용 최적화
<aside>
💡
EC2와 Nginx를 사용하는 방식은 고도의 커스터마이징, SSR, 동적 콘텐츠, 실시간 통신 요구가 있는 경우 유리
</aside>