[AWS] AWS CloudFront로 프론트엔드 배포하기

1. 개요

프로젝트에서 프론트 서버를 다시 배포할 일이 생겼는데 CloudFront를 써볼까 해서 한 번 해봤다.

블로그를 보고 따라하니 생각보다 금방 됐다.

 

2. CloudFront란?

이 내용 TIL에 쓰니까 같이 스터디 하시는 분이 만들어주셨어요ㅋㅋㅋ

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/Introduction.html

Amazon CloudFront란 무엇입니까? - Amazon CloudFront

 

CloudFront하면 CDN! 이라는 생각이 강해서 사실 프론트엔드 서버를 배포할 생각을 하지 못 했었다. 

'가상 면접 사례로 배우는 대규모 시스템 설계 기초' 책을 공부할 때는 미디어 파일을 빠르게 접근할 수 있게 하는 서비스로 인식하다보니 프론트엔드 빌드 파일 자체가 정적 콘텐츠라는 사실을 까먹었던 것 같다.

요즘에 AWS 아키텍처를 많이 보다보니 CloudFront가 확실히 이점이 있는 것 같아 써봤다.

 

CDN이란?

CDN(Content Delivery Network)은 콘텐츠(웹 페이지, 이미지, 동영상, 스타일시트 등)를 사용자에게 빠르게 전달하기 위해 전 세계에 분산된 서버 네트워크를 사용하는 시스템이다.

 

공식문서에서는 CloudFront를 아래와 같이 설명하고 있다.

Amazon CloudFront는 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스

 

핵심은 사용자 위치에 따라 지연시간이 가장 적은 엣지 로케이션에서 요청을 라우팅해서 빠르게 전달하는 것이다!

엣지 로케이션이란, CloudFront가 사용자와 가까운 서버에서 콘텐츠를 제공하는 네트워크 노드를 말하고, 전 세계적에 분포해있다.

 

프리티어면, 거의 무료로 사용할 수도 있다.

프리티어가 아니라도, S3, ELB, API Gateway 같은 AWS 오리진을 쓰면 Origin 서버에서 CloudFront로 데이터를 전송하는 것은 무료이고, CloudFront에서 최종 사용자로의 아웃바운드 데이터 전송만 요금이 청구된다고 한다.

 

3. CloudFront 동작 방식

1️⃣ 사용자 요청

사용자가 브라우저에서 콘텐츠 요청을 보낸다.

2️⃣ CloudFront 확인

사용자가 요청한 콘텐츠가 엣지 로케이션에 캐싱되어 있으면, 바로 사용자에게 전달한다.

캐싱되지 않았으면 Origin 서버에 요청을 전달하고, Origin 서버에서 콘텐츠를 CloudFront로 전달해준다.

3️⃣ 캐싱

Origin 서버에서 콘텐츠를 받았으면 엣지 로케이션에 캐싱해두고, 나중에 동일한 요청이 들어오면 바로 콘텐츠를 사용자에게 전달해준다.

 

4. CloudFront로 프론트엔드 서버 배포하기!

현재 프로젝트 프론트엔드분들은 React를 사용하고 있고, 빌드된 파일을 전달받아서 배포했다.

 

1️⃣ S3에 빌드된 파일들 업로드

 

S3 버킷을 파고 안에 빌드된 파일들을 넣어준다.

버킷 이름만 설정해주고, 나머지는 다 그냥 기본 설정으로 해서 만들어주면 된다.

 

2️⃣ CloudFront 배포

Origin Domain

✅ S3에 업로드했기 때문에 아까 만든 S3 버킷을 선택해준다.

 

Origin path

✅ S3 버킷 루트 경로에 다 넣어서 따로 설정은 안 해줬다.

 

원본 액세스

✅ Legacy Access Identities 설정

CloudFront가 S3 버킷에 액세스할 수 있도록 새 OAI를 생성해준다.

 

OAI?

CloudFront 배포가 S3 버킷에 안전하게 접근할 수 있도록 IAM 권한을 부여하는 가상 사용자를 의미한다.

이를 통해 S3 버킷을 퍼블릭으로 설정하지 않고도 CloudFront만 접근할 수 있도록 제한할 수 있다.

 

 

 

 

CNAME 써주는데, 이걸 한다고 바로 CNAME 레코드가 추가되지는 않아서 나중에 route53에서 따로 설정 해줘야 한다.

SSL 인증서가 있다면 가져오고, 없다면 밑에 인증서 요청을 눌러서 생성해준다.

인증서는 반드시 us-east-1에 있어야 된다.

인증서 요청을 누르면 리전이 그쪽으로 가니 따로 바꿔줄 필요는 없다.

 

이렇게 생성해주고, 만들어지면 route53에서 레코드 생성을 눌러서 설정해준다.

 

그러고 나서 제일 밑에 Default root object에 ./index.html을 적어준다.

 

3️⃣ Route53 A 레코드 추가

 

A 레코드 추가해주고

값/트래픽 라우팅 대상을 cloudfront에서 배포한 거로 설정해준다.

 

4️⃣ CloudFront 오류 페이지 응답 생성

 

마지막으로, CloudFront 배포된 거 들어가면 오류 탭이 나오는데 오류 페이지 응답 생성 들어가서 왼쪽과 같이 설정해준다.

 

성능 측면에서는 Vercel, Netlify보다 CloudFront가 낫겠지만, 이것저것 설정해줘야 하고 CICD도 따로 설정해줘야 하기 때문에 프론트엔드 분들이 과연 많이 쓸까..? 생각이 들긴 한다.

그래도 세팅이 정말 간단하기 때문에 요청이 많이 들어오는 큰 서비스라면 꼭 써야할 것 같다..!