CloudFront를 사용하여 s3 패킷을 공개하면 Access Denied가 되어 빠지는 포인트가 많기 때문에 정리해 보았다

갑자기 AWS 기반에서 자체 웹 사이트를 만들고 싶습니다.

HTML이나 CSS 등 프런트의 컨텐츠는 다른 서비스를 사용해 좋은 느낌으로 만든다고 AWS를 사용하는 이점은 백엔드가 좋은 느낌으로 할 수 있다는 것입니다.

등룡문이 되는 것이, s3라고 하는 스토리지 서비스에 격납한 파일을 어떻게 해서 CloudFront를 타는가 하는 부분이 된다고 생각합니다.

잡담한 이미지입니다만, AWS라면 이하와 같은 구성으로 하는 것으로 좋은 느낌으로 만들 수 있습니다.


자세한 만드는 방법은 꼭 AWS 공식 핸즈온 등을 보세요.

“AWS에 정적 웹 사이트를 게시하자!”편을 공개했습니다! - Monthly AWS Hands-on for Beginners 2020년 5월호 | Amazon Web Services 블로그

개인적으로 하마리 포인트가 몇 가지 있었기 때문에, 그러한 점에 대해 비망록으로 탈 수 있습니다.

잘 설정하지 않으면 URL에 액세스해도 「AccessDenied」의 페이지가 되어 버립니다.

CloudFront는 s3 패킷의 HTML 파일 URL을 그대로 복사하여 작동하지 않습니다.

다음과 같이 s3에 index.html을 가져온 후 객체 URL을 CloudFront에 붙여 넣을 것입니다.


그렇게 하면 좋지 않아서 CloudFront의 Origin은 다음 형식으로 Domain name을 등록해야 합니다.{your-bucket-name}.s3-website-{your-bucket-region}.amazonaws.com
이 근처의 쓰는 방법은, 이하의 기사를 참고로 했습니다.
CloudFront x S3에서 403 Access Denied가 나올 때 확인해야 할 사항 - Qiita



Orign Path에도 /index.html 를 등록할 필요는 없습니다.

Origin ID는 특별히 변경할 필요가 없습니다.

s3의 권한은 특별히 괴롭힐 필요가 없다.

공개 설정이 흠뻑, 등 있습니다만, 특히 권한 주위는 바꾸지 않아도 잘 되었습니다.

모르면 공개 설정으로 하고, 성공하는 대로 짜는 방법으로 좋다고 생각됩니다.