AWS S3, CloudFront, Route 53를 이용한 웹 호스팅 구축하기

sangsang·2024년 8월 7일

AWS S3, CloudFront, Route 53를 활용한 웹사이트 성능 최적화

AWS 아키텍처

Amazon S3 버킷
Amazon S3 버킷을 오리진 서버를 지정하고, 리소스 파일(객체의 최종 원본 버전)을 저장합니다.

CloudFront
Amazon S3 버킷(오리진 서버로)부터 파일을 가져온 다음 CloudFront 엣지 로케이션에 캐싱하여 뷰어에게 콘텐츠를 빠르게 전달합니다.

Amazon S3을 사용하면 오리진에서 CloudFront로 데이터를 전송할 때 항상 무료이기 때문에 함께 사용하는 것을 권장합니다.

Route 53
누군가 브라우저를 사용하여 www.example.com과 같은 웹사이트에 접속하면 네임 서버들은 웹 서버 또는 Amazon S3 버킷 같은 리소스를 어디에서 찾아야 하는지 브라우저에게 알려줍니다. 트래픽 분산 등 고급 기능도 활용할 수 있습니다.

ACM(Amazon Certificate Manager)
AWS 기반 웹 사이트 및 애플리케이션의 SSL/TLS 인증서를 제공하고 관리할 수 있습니다. SSL/TLS 인증서를 통해 HTTPS 프로토콜로 안전하게 데이터 통신할 수 있습니다.

AWS 인프라 구축 과정

Route 53에 사용자 지정 도메인 등록 및 구성

cloudfront에서 HTTPS를 통해 콘텐츠를 안전하게 전송하기 위해서 SSL 인증서를 등록해야 합니다. 이때 필요한 도메인을 Route 53에 미리 등록합니다.

사용할 도메인 이름으로 호스팅 영역 생성

호스팅 영역 생성 후 Route 53 대시보드

가비아 도메인 구매

route 53에서도 도메인을 구매할 수 있지만, 도메인 비용이 저렴한 가비아에서 도메인을 구매했습니다. 도메인 구매할 때 route 53에서 NS의 값/트래픽 라우팅 대상 값을 확인하여 네임 서버에 입력했습니다.

S3 버킷 생성

원본 리소스를 저장하기 위해 S3 버킷을 생성합니다.

버킷 이름 설정

퍼블릿 액세스 차단 해제

모든 사람이 웹 사이트 접근할 수 있도록 설정

버킷 정책 설정
- S3 GetObject 설정
- 리소스: 해당 버킷의 모든 리소스 접근
- 주체: 모든 사용자

S3에 웹 서비스 파일 업로드

버킷의 객체(Objects) 탭에서 dist 파일에 있는 리소스를 모두 업로드했습니다. 아래 이미지는 리소스를 업로드한 상태입니다.

정적 웹 사이트 호스팅 설정

버킷 속성 탭에서 스크롤을 가장 아래로 내리면 정적 웹 사이트 호스팅 항목이 있습니다. 편집을 눌러서 아래와 같이 설정하여 웹 사이트를 배포하였습니다.

정적 웹 사이트 호스팅 설정을 하면 버킷 웹 사이트 엔드포인트로 배포가 된 것을 확인할 수 있습니다.

CloudFront 배포

성능과 보안을 목적으로 S3 버킷과 연동하여 CloudFront 배포를 생성합니다.

성능 측면은 CloudFront 캐싱을 통해 오리진 서버(S3)에서 직접 응답해야 하는 요청의 수를 줄일 수 있습니다. 해당 요청은 뷰어(사용자)의 위치와 가까운 엣지 로케이션으로 라우팅하여 빠른 전송 속도로 콘텐츠를 제공할 수 있습니다.

보안 측면에서는 CloudFront에서 HTTPS를 적용하여 보다 안전하게 콘텐츠를 전달할 수 있습니다.

배포 생성

기본 캐시 동작 (Behavior)

HTTPS 프로토콜로 CloudFront와 Amazon S3 간의 통신하려면, 뷰어 프로토콜 정책(Viewer Protocol Policy) 값을 Redirect HTTP to HTTPS 또는 HTTPS Only로 변경해야 합니다.

저는 Redirect HTTP to HTTPS로 설정해서 HTTP와 HTTPS두 프로토콜 모두 사용할 수 있지만, HTTP 요청은 자동으로 HTTPS 요청으로 리디렉션되도록 했습니다.

HTTPS 프로토콜을 사용하기 위해서 SSL 인증서가 필요한데, 이부분은 아래에서 설명하겠습니다.

뷰어 프로토콜 정책: Redirect HTTP to HTTPS
- HTTP 요청을 HTTPS 요청으로 Redirect 설정 (보안 강화)

캐시 키 및 원본 요청

캐시 정책
CachingOptimized
이 정책은 CloudFront가 캐시 키에 포함된 값을 최소화하여 캐시 효율성을 최적화하도록 설계되었습니다. CloudFront는 캐시 키에 쿼리 문자열이나 쿠키를 포함하지 않으며 정규화된 Accept-Encoding 헤더만 포함합니다. 이렇게 하면 오리진에서 객체를 반환하거나 CloudFront 엣지 압축이 활성화된 경우 CloudFront에서 Gzip 및 Brotli 압축 형식의 객체를 별도로 캐시할 수 있습니다.
- 최소 TTL: 1초.
- 최대 TTL: 31,536,000초(365일).
- 기본 TTL: 86,400초(24시간).
- 캐시 키에 포함된 헤더: 명시적으로 포함되지 않습니다. 압축된 객체 캐시 설정이 활성화되어 있기 때문에 정규화된 Accept-Encoding 헤더가 포함됩니다.
- 캐시 키에 포함된 쿠키: 없음.
- 캐시 키에 포함된 쿼리 문자열: 없음.
- 압축된 객체 캐시 설정: 활성화됨.

- HTTP Header, 쿠키, querystring 등 정보로 컨텐츠를 캐시할 것인지 설정
- 얼마나 오래 캐시하는지 설정 (TTL)
- 컨텐츠를 압축 저장 관련 설정

원본 요청 정책
- CloudFront가 원본 서버에 요청을 보낼 때 어떤 헤더, 쿠키 및 쿼리 문자열을 포함할지 결정합니다. 여기에 설정된 값은 캐싱에 사용되지 않습니다.

웹 애플리케이션 방화벽(WAF)

보안 보호 비활성화로 설정 → 크게 보안이 떨어지지 않는다고 한다.

설정

아시아권에서만 서비스 운영할 것이기 때문에 가격분류를 북미 유럽 아시아 중동 및 아프리카로 선택했습니다. 가격 분류에 따라 비용이 달라지기 때문에 각 서비스에 따라 선택하시면 됩니다.

기본값 루트 객체
- index.html : 진입점 입력

CloudFront 배포 완료

cloudfront 배포 도메인 생성
해당 도메인으로 웹 사이트 확인 가능

사용자 지정 도메인 이름을 사용하도록 CloudFront 배포 구성

ACM에서 SSL 인증서 발급

최종 사용자와 CloudFront 또는 CloudFront와 오리진 간에 HTTPS를 사용하기 위해서는 SSL 인증서가 필요합니다. AWS Certificate Manager(ACM)를 사용하여 보안 소켓 계층(SSL) 인증서를 요청합니다. 이때 주의할 점은 반드시 위치를 버지니아 북부로 설정한 후 인증서 요청해야 합니다. 위치는 우측 상단에서 설정할 수 있습니다.

가비아에서 구매한 도메인으로 인증서 요청했습니다. 요청 후 Route S3에서 레코드 생성합니다.