S3와 CloudFront를 이용하여 에러없이 SPA 배포하기

정적(static) 웹 사이트를 배포하기 위해 별도의 웹 서버를 구축하기보다 AWS S3와 CloudFront를 이용하는 경우가 많이 있습니다. 특히, 요즘에는 React나 Vue.js를 통해 SPA(Single Page Application) 형태로 웹 사이트를 만드는 것이 일반적입니다. SPA 형태의 웹 사이트는 Path 단위로 동작하며, 각 Path가 요청되었을 때 당연히 그 경로에 있는 index.html이 응답할 것이라고 가정하고 있습니다. 그리고 S3의 “정적 웹 사이트…

S3의 CORS 정책을 이용하도록 CloudFront 설정하기

프론트엔드 서버와 분리되어, S3와 CloudFront를 통해 운영되는 리소스 서버가 있습니다. S3에 이미지를 업로드하고 CloudFront를 통해 다운로드하는 방식으로 구성되어 있으며 Signed Cookie를 활용하고 있습니다.리소스 서버의 이미지가 포함된 웹페이지를 브라우저에서 열면 정상적으로 잘 보이지만, html2canvas를 이용하여 캡처하려고 하니 CORS 오류가 발생하였습니다. 이 CORS 오류를 해결하는 과정에서 얻은 경험을 공유하고자 합니다. 이 글에서 다루지 않는 내용 아래와 같은…