SPA with CloudFront, S3

AWS CloudFront와 S3를 통한 SPA 서비스를 생각..

Image for post
Image for post

위와 같은 구조의 SPA 서비스를 생각해보자.

S3 버킷에 SPA 정적 리소스가 존재하는 상태에서.

단순히는 … CloudFront를 통해 해당 리소스에 접근하면 된다.

하지만 SPA는 하위 정적 리소스를 제외한 모든 url 요청에 대해 index.html을 서비스 해야한다.

이러한 설정방법은 아래와 같다. ( 하단 stackoverFlow참조)

Image for post
Image for post

Ref : https://stackoverflow.com/questions/38475329/single-page-application-in-aws-cloudfront

/ 또는 /detail/{id} 에 대해 해당 리소스가 존재하지 않으므로
위에서 설정한 CustomErrorPage 설정에 따라 index.html을 200으로 응답주게된다.

문제는 리소스의 변경에 대한 CloudFront Edge의 객체무효화 처리인데.

S3 Object Event 설정을 통해 객체 무효화를 Lambda를 통하든 이벤트 핸들링 설정을 하든 가능할것 같다.

  • 객체 무효화는 비용이 발생한다.

CloudFront 객체 무효화에 대해서는 아래를 참조
http://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html

** 글은 썻지만.. 해보진 않았다.. 되는 방법이 보여서 정리하려고 작성.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store