AWS CloudFront 배포(S3와 연계)
AWS CloudFront 배포(S3와 연계) — #AWSCloudFront #AWSS3 #AWSS3호스팅 #AWSCloudFront S3 static web hosting 요금 계산...
#AWSCloudFront #AWSS3 #AWSS3호스팅 #AWSCloudFront
S3 static web hosting 요금 계산
현재 웹 애플리케이션 배포 구조
S3 Standard 요금
| 항목 | 비용 |
|---|---|
| 스토리지 | $0.023/GB/월 |
| GET, SELECT 요청 | $0.0004/1,000건 |
| PUT, COPY, POST, LIST 요청 | $0.005/1,000건 |
| 데이터 전송 (아웃바운드) | $0.126/GB |
bucket에 저장된 데이터 용량 약 1MB입니다. S3 Standard기준 10,000번의 접속시(아웃바운드 요금) $1.27가 소모됩니다.
응답속도
웹 페이지 첫 방문시 응답 속도 및 파일크기를 정리했습니다.
| 파일 | 타입 | 크기 | 응답 시간 |
|---|---|---|---|
| marketing-w... | document (HTML) | 0.8 KB | 109 ms |
| index-BzGUj... | stylesheet (CSS) | 117 KB | 122 ms |
| index-Ce5bx... | script (JS) | 863 KB | 245 ms |
| 총 | ~981 KB | max 245ms |
HTML 로드시간까지 - 약 400ms
CloudFront를 사용하여 전송 비용을 줄이자.
CloudFront를 사용하면 두가지 측면에서 전송 비용을 줄일 수 있습니다.
- 저장비용: gzip 자동화
- 전송 비용자체가 s3에 비해서 저렴하다.
- 웹 페이지에 가장 처음 방문한 사용자는 CloudFront에서 파일을 찾지만 없습니다.
- CloudFront는 s3 Bucket에서 웹 애플리케이션 fetch를 시도합니다.
- CloudFront는 s3 Bucket에서 가져온 파일을 gzip을 사용하여 파일 압축 후 캐시 합니다.
- 이 과정에서 아웃바운드 비용이 대폭 감소합니다.
- Cache된 결과를 webBrowser에게 전달합니다.
- 한번 Cache가 진행된 후 CloudFront는 이후 방문자에게 캐시된 파일을 전달합니다.
Hands On
CloudFront - S3 연동
aws console - cloudFront - Distributions - Create distribution
Choose a Plan: Free
Get Started
Distribution name: [naming]
Specify Origin
Origin Type: Amazon S3
Origin: [choose your bucket] - user Website endpoint 사용
create distribution
Deploying 상태로 5-10분 정도 기다려야 한다고 합니다.
접속: Distribution domain name
응답 파일 크기 및 속도
| 파일 | 크기 | 응답 시간 |
|---|---|---|
| HTML (document) | 0.8 KB | 33 ms |
| JS (script) | 234 KB | 134 ms |
| CSS (stylesheet) | 16.9 KB | 34 ms |
S3 vs CloudFront 비교
| 파일 | S3 | CloudFront | 감소율 |
|---|---|---|---|
| HTML | 0.8 KB | 0.8 KB | - |
| JS | 863 KB | 234 KB | 73% ↓ |
| CSS | 117 KB | 16.9 KB | 86% ↓ |
| 총 | ~981 KB | ~252 KB | 74% ↓ |
전송비용 비교
1. 전송 비용 비교 (GB당)
| 항목 | S3 | CloudFront |
|---|---|---|
| 전송 비용 | $0.126/GB | $0.085/GB |
| 차이 | 33% 저렴 |
1회 전송량
| 항목 | S3 (원본) | CloudFront (gzip) |
|---|---|---|
| HTML | 0.8 KB | 0.8 KB |
| JS | 863 KB | 234 KB |
| CSS | 117 KB | 16.9 KB |
| 총 | ~981 KB | ~252 KB |
10,000명 방문 시 비용
| 항목 | S3 | CloudFront |
|---|---|---|
| 전송량 | 10GB | 2.5GB |
| 단가 | $0.126/GB | $0.085/GB |
| 비용 | $1.26 | $0.21 |
| 절감 | $1.05 (83%) |
한줄 결론
S3앞에 CloudFront를 두어 전송비용을 약 83% 절감하였습니다.
Trouble Shooting
The page at 'https://d1gyb5hcofe8jv.cloudfront.net/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://\[\]'. This request has been blocked; the content must be served over HTTPS
원인: 현재 HTTPS를 통해 cloudFront 도메인에 접속. 하지만 백엔드는 http 통신중이다.
해결: CloudFront는 HTTP도 지원하기 때문에 임시 방편으로 HTTP 접속 허용
이후에 HTTPS 통신 추가하거나 백엔드 앞에 CloudFront둬서 Redirect HTTP to HTTPS 사용하면된다.