클라우드에서 React 애플리케이션을 호스팅하는 비용은 인프라 구성 방식에 따라 매우 저렴할 수도, 놀랍게도 비쌀 수도 있습니다. AWS에서 Amazon S3와 Amazon CloudFront의 조합은 정적 파일을 서비스하는 가장 효율적인 방법이지만, 적절한 최적화 없이는 전송 비용과 요청 비용이 누적될 수 있습니다.
이 가이드에서는 소규모 프로젝트의 경우 거의 무료로, 대규모 애플리케이션의 경우 매우 높은 가성비로 호스팅을 구성하는 방법을 분석합니다.
무료 호스팅의 신화 vs AWS S3 + CloudFront
Vercel이나 Netlify와 같은 플랫폼은 관대한 무료 티어를 제공하지만, 트래픽이 증가함에 따라 상당한 마진을 붙이는 경우가 많습니다. 반면 AWS는 "원자재"에 가까운 가격을 제공합니다.
AWS 프리 티어 (Free Tier)
계정 생성 후 12개월 미만인 경우 다음 혜택을 누릴 수 있습니다.
- S3: 5GB 표준 스토리지.
- CloudFront: 월간 1TB의 데이터 전송 출력(대부분의 웹사이트에 충분한 양입니다!).
- CloudFront: 1,000만 건의 HTTP/HTTPS 요청.
프리 티어 기간이 종료되더라도 5MB 정도의 React 앱을 저장하는 비용은 한 달에 몇 십 원 수준입니다.
전략 1: S3 스토리지 최적화
S3 비용은 저장 용량과 요청(PUT, GET)으로 나뉩니다.
- 버전 관리 정리: 버킷에 버전 관리를 활성화한 경우 AWS는 모든 이전 빌드를 저장합니다. 30일이 지난 버전은 자동으로 삭제되도록 **수명 주기 정책(Lifecycle Policy)**을 설정하세요.
- PUT 요청: 배포(
aws s3 sync)할 때마다 PUT 요청이 발생합니다. 하루에 50번씩 배포하면 비용이 쌓입니다. 변경된 파일만 업로드하는 CI/CD 도구를 사용하세요. - 스토리지 클래스: 활성 웹사이트의 경우 S3 Standard를 사용하세요. 파일 크기가 작은 경우 Intelligent-Tiering은 객체당 관리 비용이 절감액보다 클 수 있으므로 권장하지 않습니다.
전략 2: CloudFront 가격 클래스 (Price Classes)
이것은 AWS에서 가장 큰 "숨겨진 절감 요소"입니다. CloudFront에는 세 가지 가격 클래스가 있습니다.
- Price Class All: 전 세계 모든 에지 로케이션 사용(가장 비쌈).
- Price Class 200: 가장 비싼 지역(남미, 아프리카)을 제외한 대부분의 지역 포함.
- Price Class 100: 미국, 캐나다, 유럽만 포함(가장 저렴).
한국 사용자만을 대상으로 한다면 가격 클래스 200 이상이 필요할 수 있지만, 주요 타겟이 북미나 유럽이라면 Price Class 100을 선택하여 속도 저하 없이 데이터 전송 비용을 크게 줄일 수 있습니다.
전략 3: 캐시 무효화(Invalidation) 최소화
캐시를 무효화(aws cloudfront create-invalidation)할 때 매달 첫 1,000개의 경로는 무료입니다. 그 이후에는 경로당 비용이 발생합니다.
전문가 팁: 이미지 하나만 바꿨는데 배포할 때마다 전체 버킷(/*)을 무효화하지 마세요. 더 좋은 방법은 **캐시 버스팅(Cache Busting)**을 사용하는 것입니다(Vite는 기본적으로 파일 이름에 해시를 추가합니다: index-a1b2c3.js). 파일 이름이 바뀌면 무효화할 필요가 없습니다. CloudFront는 단순히 오리진에서 새 파일을 요청할 것입니다.
React2AWS를 통한 자동화
TTL(Time to Live), 가격 클래스 및 S3 정책을 수동으로 설정하는 것은 번거롭습니다. 당사의 도구인 React2AWS는 이러한 최적화가 이미 적용된 Terraform 템플릿과 Bash 스크립트를 생성합니다.
- 자동 압축: Gzip/Brotli를 활성화하여 전송량을 줄입니다.
- OAC 보안 정책: S3에 직접 접근하는 것을 방지하여 버킷 송출 비용을 절약합니다.
- 최적의 TTL: 애셋이 에지에 더 오래 머물도록 캐시를 구성하여 오리진 요청을 줄입니다.
결론
AWS는 확장을 위한 가장 강력한 플랫폼이며, 이러한 전략을 활용하면 가장 저렴한 플랫폼이 될 수도 있습니다. 핵심은 사용한 만큼 지불한다는 점을 이해하는 것입니다. 파일 크기를 최적화하고, 가격 클래스를 현명하게 선택하며, CloudFront 캐시가 열일하도록 설정하세요.
관련 기사
파일을 최적화할 준비가 되셨나요?
React2AWS 생성기 도구를 사용해 보세요. 100% 무료이며 개인 정보가 보호되며 서버 업로드 없이 브라우저에서 직접 모든 작업을 처리합니다.