[AWS] 사용자별 고유 페이지 배포 Access Denied(403) error

 

 

현재 진행하고 있는 프로젝트는 S3로 정적 웹호스팅을 하며,

CloudFront 서비스를 이용하고 있다.

 

기능적으로는 결과페이지 '공유하기' 기능이 있으며 공유하면 랜덤한 고유 token을 넣어 개인별 페이지를 생성한다.

 

---

 

상황설명 및 예시 : 

 

만약 개인별 페이지를 아래와 같이 공유한다면 개인결과라고 볼 수 있을까?

 

www.advancer-katalk.click/결과페이지

 

위 페이지는 모두에게 호스팅되는 페이지로 나만의 페이지가 아니다.

 

 

www.advancer-katalk.click/결과페이지/2039rkj032fuh0f2j34k23hj4

 

위와 같이 고유 token을 만들어 공유한다면 내 페이지를 공유할 수 있다.

 

 

하지만 S3를 이용해 배포하니 403 에러가 뜨고말았다.

 

Failed to load resource: the server responded with a status of 403

This XML file does not appear to have any style information associated with it. ~~

<Error> <Code>AccessDenied</Code> ~~

 

 

---

 

 

해결 : 

 

CloudFront 가 S3에 없는 객체를 요청한것이 원인이였다.

 

> 리액트는 각각 '경로'에 대한 static 파일이 존재하지 않는다

> 전체 페이지를 하나의 html에 담아 화면을 표현한다 (index.html)

> 따라서 token으로 만든 페이지라는 사실상 없는 객체를 요청하게 된 것이다

 

403 error('액세스거부됨') 는 s3 policy에서 ListBucket 권한이 없는 경우 나타나게 되는데

 

이런 경우를 200 코드를 반환하게 하고 /index.html을 보여주게 하면 된다.

 

 

1. CloudFront > 오류페이지 이동

 

 

2. 사용자 정의 오류 응답 생성

 

 

3. 403 -> 200 및 index.html 경로 설정

 

---

 

이렇게 간단한 방법으로 해결할 수 있었다.

 

해결하고 개인페이지 공유를 완성한 페이지를 확인해보려면 아래 링크로...

카톡분석 왕 테스트

 

끝

 

 

 

 

 

 

References : https://aws.amazon.com/ko/premiumsupport/knowledge-center/s3-website-cloudfront-error-403/