3-2. AWS Elastic Beanstalk + AWS S3 + CloudFront 에서 프론트엔드 - 백엔드 라우팅

■ React + Flask + GraphQL 웹 어플리케이션 프로젝트 전체 로드맵

React & Flask & GraphQL 웹앱 프로젝트 시작 🏁

---

* 이 글의 전체 프로세스는 이 링크를 토대로 진행되었습니다. 

■ CloudFront

 

CloudFront란?

Amazon CloudFront는 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스이다. 우리가 앱을 만들면서 CloudFront 를 사용하는 이유는 다음과 같다:

• CDN을 통해 빨라지는 전송 속도
• 커스텀 도메인 사용
• HTTPS 사용
• 유저로부터 들어오는 요청을 쉽게 백엔드로 라우팅할 수 있음

CloudFront Distribution 만들기

1. CloudFront -> Create Distribution
- Origin Domain: 앞서 만든 S3 버킷을 검색해서 입력
- Origin Path는 비워놓아야 한다.

- 전 세계를 대상으로 하는 서비스가 아니라면 본인이 위치한 지역에만 체크해도 무방하다.
- Default Root Object는 index.html로 설정하기

2. Distribution이 만들어졌다면 Distribution domain name 하단에 있는 주소로 들어가 s3 버킷에 업로드 된 프론트앤드 부분을 확인할 수 있다. 
- 커스텀 도메인을 설정하기 전까지는 S3 버킷의 주소로 redirect 되게 된다. 이후 도메인 이름을 설정한 후, S3 버킷을 private 한 상태로 바꾸면 해당 문제점은 해결된다. 

Frontend에서 Backend 라우팅 하기

1. 프론트앤드에서 들어온 요청을 백엔드로 안전히 보내기 위해 CloudFront에 새로운 origin을 만들어준다. 
- CloudFront -> 해당 Distribution -> Origin -> Create origin

2. Origin Domain Name을 선택할 때 EB에 배포된 백엔드를 불러오기 위해선, 반드시 Elastic load balancer 아래에서 해당 항목을 찾아야 한다. (S3 아님)
- Load Balancer는 EC2 -> Load Balancing -> Load Balancers 에서 확인할 수 있다. (지역 반드시 확인, EB Environment 를 만든 지역과 동일해야 함)

- Protocal은 반드시 HTTP로 확인.

3. 프론트엔드에서 요청이 처리되는 라우트 주소를 확인해야 한다.
- 이번 웹 프로젝트의 경우, 모든 백엔드의 라우팅 함수에는 '/api/'가 앞에 붙어있다. 

프론트엔드에서 요청이 들어오는 주소를 라우트에 '/api/'가 붙어있다면 바로 이 백엔드 오리진으로 요청할 수 있도록 behavior를 설정한다. 
- CloudFront -> 해당 Distribution -> Behaviors -> Create Behavior

4. 여기까지 설정이 완료 되었다면 S3 버킷의 엑세스를 private으로 제한해도 된다. 
- 프론트앤드를 배포했던 S3 Bucket -> Permissions -> Block pubilc access (bucket settings) -> Edit 
Block all public access에 체크!

이후 S3 버킷에서 제공된 url로는 접근이 제한된다. 오직 CloudFront를 통한 접근만 허용된 상태.

이렇게 CloudFront를 활용해 S3에 업로드 된 프론트엔드를 배포하고, 요청들을 백엔드로 성공적으로 라우팅할 수 있게 되었다.

Reference

• Amazon CloudFront란 무엇입니까?
• CloudFront를 이용해 HTTPS로 정적 리소스 배포하기
• [AWS] CloudFront와 S3 연결하기