0. 들어가기 전에

0-1. 사전 준비 체크 리스트

• 리액트 프로젝트가 cra 나 vite 를 통해 리액트 프로젝트가 이미 만들어져있어야 합니다.
• aws 계정을 미리 만들어 둡니다.
• 처음이라면 branch 를 따거나 fork 한 후에 테스트를 먼저 해보는 것도 좋습니다.
• 프로젝트는 npm run build 등으로 빌드를 시킨 후에 시작합니다.
• (생략 가능) Route53 으로 도메인을 미리 생성합니다.

0-2. S3를 이용하는 이유

aws S3은 버킷이라는 공간에 정적 콘텐츠를 저장하여 인터넷을 통해 접근할 수 있도록 하는 서비스입니다. 간단히 말하면 웹상에 존재하는 하드 공간인 셈입니다. 다른 자료들을 보다보면 EC2에 배포를 하는 경우도 있는데 (EC2는 작은 컴퓨터라 생각하면 됩니다) 프론트엔드의 정적 콘텐츠를 배포할때에는 S3면 충분하기 때문입니다.

0-3. CloudFront 로 배포하는 이유

CloudFront 를 사용하지 않고 S3 자체만으로 배포하는 방법도 있습니다.

하지만 S3 로 배포했을 때와 다음과 같은 장점으로 CloudFront 를 이용하기로 하였습니다.

• HTTP → HTTPS

  : 손쉬운 설정으로 http 로의 접속을 https로 리디렉션 시켜줄 수 있습니다.

• CDN 을 통한 더 빠른 페이지 응답속도

  : S3으로만 배포하는 경우, 선택한 리전 내에서만 생성이 되기 때문에 해당 리전에서 멀어질수록 접속 속도가 느려집니다. 하지만 CloudFront 를 이용하면 전 세계에 분포된 엣지 로케이션이라고 하는 데이터 센터의 엣지 서버를 사용해 콘텐츠를 캐싱하고, 사용자가 위치한 곳에서 가장 가까운 엣지 로케이션에서 콘텐츠를 제공받을 수 있도록 해주는 역할을 합니다.

• 그 외의 장점들은 공식 문서를 참고합니다 : https://aws.amazon.com/ko/cloudfront/

0-4. 전반적인 과정 순서

1. IAM 권한 설정
2. S3 버킷 만들기
3. 빌드된 프로젝트 S3 버킷에 업로드