[배포] AWS S3 + CloudFront + Route53으로 React 배포 준비

진행하는 프로젝트의 FE에서는 React을 Build 하면 나오는 정적 파일을 AWS의 S3, CloudFront, Route53을 이용해서 배포를 하기로 했습니다. 하지만 경험도 부족하고 지식도 부족하기 때문에 사전 지식 공부를 먼저 해보고자 합니다.

 

정적파일? 그게 무엇인가? 정리하면, React를 Build 해서 나온 결과물은 서버에 올라가 변경되지 않을 파일이기 때문에 정적 파일이라고 부릅니다.

 

그렇다면 Build 해서 나온 정적 파일은 어떻게 할 것인가?를 고민해 보면 AWS S3에서 정적 웹 사이트 호스팅 기능을 제공합니다.

 

정적 웹? 그게 무엇인가? + 동적 웹 정리하면, React는 CSR+SPA이기 때문에 정적 웹 라이브러리입니다.

 

웹 호스팅? 그게 무엇인가? 따라서 정적 웹 호스팅은 정적 웹을 호스팅 하는 서비스를 의미합니다.

 

하지만 S3 웹 사이트 엔드 포인트는 HTTPS를 지원하지 않습니다. 그렇기에 HTTPS를 사용하기 위해서 CloudFront를 사용해 S3에 호스팅 되는 웹 사이트를 제공합니다. 추가로 사용자 지정 도메인에서 HTTPS를 사용하기 위해서는 Route53에 등록된 사용자 지정 도메인을 사용해 정적 웹 사이트를 구성해야 합니다.

 

최종적으로 각 도구들의 목표를 살펴보면 S3를 이용해 정적 웹 사이트 호스팅을 하고, CloudFront를 이용해 HTTPS를 사용합니다. 추가적으로 사용자 지정 도메인에서 사용하려면 Route53을 이용해합니다.

 

참고

Amazon S3를 사용하여 정적 웹 사이트 호스팅

https://aws.amazon.com/ko/s3/features/

https://aws.amazon.com/ko/cloudfront/features/?nc=sn&loc=2&whats-new-cloudfront.sort-by=item.additionalFields.postDateTime&whats-new-cloudfront.sort-order=desc

https://aws.amazon.com/ko/route53/

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

https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/WebsiteHosting.html

https://docs.aws.amazon.com/AmazonS3/latest/userguide/website-hosting-custom-domain-walkthrough.html

https://repost.aws/ko/knowledge-center/cloudfront-https-requests-s3