AWS S3 sub directory 경로에서 index.html 제거

NFT 프로젝트에 대한 랜딩페이지를 개발할 때 겪었던 AWS S3의 sub directory에 대한 pathname 이슈를 공유하고자 한다.

문제

간단한 landing page였기 때문에, vitejs로 HTML, CSS, JavaScript를 사용하기 위한 환경을 부트스트랩하였다.

총 3개의 페이지를 개발해야 했기 때문에, vitejs에서 지원해주는 multiepage 기능을 활용했다.

개발 완료 후, AWS S3와 CloudFront를 활용해 배포를 구성하고 도메인에 접속했더니 sub directory에 대한 접속이 되지않았고, index.html을 작성해야지 비로소 접속이 되었다.

https://my-domain.com/subDirectory/ -> 접속 안됨
https://my-domain.com/subDirectory/index.html -> 접속

위의 도메인을 접속할 경우, AWS에서 에러를 뱉어냈다.

해결방법

AWS CloudFront에서 origin을 호스팅하고자 하는 S3로 설정할 때, 정적 웹 호스팅에 대한 도메인으로 설정해주면 해결할 수 있다.