[AWS] S3 + CloudFront + Route53 (feat. AccessDenied)

AWS S3 + CloudFront

 

AWS 프리티어 요금제에서는 S3의 경우 5GB가 넘지 않으면 12개월 무료로 사용이 가능하고, CloudFront의 경우, 데이터 송신량이 1TB 이하이고 요청 수가 10,000,000건 이하라면 무료로 사용이 가능하다. 그래서 프론트는 AWS S3 + CloudFront + Route53 을 사용하여 배포할 계획이다.

 

Route53 호스팅 영역 생성

 

먼저 가비아에서 도메인 구매를 진행한 후, 호스팅 영역을 생성해준다.

 

가비아 네임서버 등록

호스팅 영역을 생성하면 ns 유형으로 값/트래픽 라우팅 대상이 나오는데 이 값들을 가비아의 네임 서버 1차 ~ 4차에 등록해주어야 한다. 참고로 값 맨 뒤에 붙는 .은 빼주어야 등록이 가능하다.

 

 

AWS S3

버킷 이름 : doctorforu-bucket
리전 : 아시아 태평양(서울) ap-northeast-2

 

CloudFront를 통해서만 S3 버킷에 접근할 수 있도록 허용할 것이기 때문에 모든 퍼블릭 액세스는 차단하였다.

 

 

웹 사이트 파일 업로드

 

버킷에 들어가서 리액트 프로젝트 파일 빌드한 것을 업로드 해준다. 빌드는 터미널에서 "npm run build"를 치면 빌드 파일이 생성된 것을 확인할 수 있다.

 

이 파일들을 전부 버킷에 업로드 시켜주면 된다. 5GB가 넘을까봐 걱정했었는데 생각보다 용량이 적어서 놀랐다.

 

AWS CloudFront

 

아까 S3 버킷에서 모든 퍼블릭 액세스를 차단해주었기 때문에 CloudFront가 접근할 수 있도록 설정해준다.

 

앞서 구매했던 도메인을 입력해주고, SSL 인증서가 없기 때문에 생성해준다.

 

생성된 인증서 페이지에서 Route 53 레코드를 생성해준다.

다시 돌아와서 생성된 인증서를 등록해주고, 기본 값을 /index.html로 등록해준다.

---

AccessDenied 이슈

 

CloudFront 배포 후 도메인 이름으로 접근 시 다음과 같이 This XML file does not appear to have any style information associated with it. The document tree is shown below. 가 뜨면서 403 에러가 발생하였다. 구글링을 통해 여러가지를 시도한 결과 다음 두 가지가 주원인으로 파악된다.

 

 

1. S3 퍼블릭 액세스 차단 ACL 해제

 

 

2. S3 정책

CloudFront > 배포 > 원본 편집에서 OAC를 만들고 정책 복사를 하여 S3 버킷 권한에 그대로 붙여넣었더니 해결되었다.