[AWS CloudFront] 도메인 이름 접속 시 index.html로 자동 이동

현재 S3에 프론트엔드의 빌드된 파일이 저장되어 있고 CloudFront를 통해 서비스를 하고 있습니다. 하지만 CloudFront의 배포 도메인 이름을 통해 접속하는 경우 403(또는 404) 에러가 발생하며, 반드시 뒤에 /index.html을 붙여야 정상적으로 동작합니다.

 

이번 글에서는 CloudFront에서 접속하는 S3의 엔드포인트 종류에 대해 알아보고 CloudFront의 배포 도메인만 입력했을 경우에도 정상적인 동작이 가능하도록 수정해보겠습니다.

 

S3 엔드포인트 종류

1. S3 웹사이트 엔드포인트

- S3의 웹호스팅 기능을 활성화 하면 생성되는 웹사이트 주소

 

 

DOC-EXAMPLE-BUCKET.s3-website-us-east-1.amazonaws.com

 

2. S3 REST API 엔드포인트

- S3 버킷에 저장되는 객체마다 접근 가능한 URL이 부여되는데, 이때의 Host 주소

 

 

DOC-EXAMPLE-BUCKET.s3.amazonaws.com

 

❗️웹 사이트 접속 방법의 차이

1. S3 웹사이트 엔드포인트

S3의 웹호스팅 기능을 활성화 했을 때 나오는 웹사이트 엔드포인트로 접속 가능하고, CloudFront 배포를 생성할 때 생기는 엔드포인트(배포 도메인 이름)으로도 접속 가능합니다. 즉, 웹사이트 접속을 2가지 주소로 할 수 있습니다.

 

2. S3 REST API 엔드포인트

REST API 엔드포인트를 Origin으로 입력하면, OAI(Origin Access Identity)를 이용해서 S3에 접근할 수 있는 권한을 CloudFront에만 부여할 수 있습니다.

이렇게 되면, 웹사이트 접속을 위해서는 CloudFront 배포를 생성할 때 생기는 엔드포인트로만 웹사이트에 접속 가능합니다.

물론 REST API 엔드포인트를 사용할 때는 S3 버킷의 웹호스팅 기능을 활성화 하지 않기 때문에 접속 방법이 CloudFront 엔드포인트 밖에 없습니다.

---

다시 우리 서비스로 돌아와 봅시다.

 

우리 서비스의 경우 S3 버킷의 정적 웹 호스팅을 비활성화하고 오직 CloudFront를 통해서만 접근할 수 있도록 하였기 때문에 현재 사용하고 있는 엔드포인트는 S3 REST API 엔드포인트입니다.

 

만약, S3 웹호스팅 기능을 사용하게 되면 이는 웹서버를 가동한다는 것입니다. 웹서버의 특징 중 하나는 브라우저의 주소창에 입력한 주소가 html 확장자로 끝나지 않는다면 자동으로 해당 경로 하위의 index.html 파일을 반환한다는 것입니다.

즉, CloudFront의 배포 도메인 이름만을 주소창에 입력하여도 자동으로 index.html 파일을 실행할 수 있다는 것입니다.

 

반면, 우리 서비스와 같이 S3 REST API 엔드포인트를 CloudFront Origin으로 설정한 경우에는 CloudFront가 Origin(S3)로 객체를 요청하는게 웹서버로 요청하는게 아니라 정말 객체 저장소에 객체를 요청하는 것입니다. 그래서 Host 뒷 부분의 경로(= 객체 Key)와 매칭되는 실제 객체가 없으면 에러를 반환합니다.

즉, CloudFront의 배포 도메인 이름만을 주소창에 입력하면 그에 해당하는 파일이 없기 때문에 403 또는 404 에러가 발생합니다.

 

따라서 이를 해결하기 위해 CloudFront 배포 내 오류 페이지에서 "사용자 정의 오류 응답 생성"을 해줘야 합니다.

 

사용자 정의 오류 응답 생성 클릭

403 에러의 경우 /index.html 경로로 200 응답을 전달하도록 함

 

이제 브라우저에 CloudFront의 배포 도메인 이름으로만 접속하여도 정상적으로 서비스가 되는 것을 확인할 수 있습니다.

 

CloudFront 배포 도메인 이름 뒤에 /index.html 이 없어도 정상적으로 동작

 

다른 해결 방안은 두번째 참고 링크를 확인하시기 바랍니다.

 

참고

• https://blog.walkinpcm.com/18
• https://aws.amazon.com/ko/premiumsupport/knowledge-center/s3-website-cloudfront-error-403/