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

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

Docker Image

도커 컨테이너에 대해 정리하고 나서 바로 도커 이미지에 대해서도 정리하려고 했지만 귀찮음과 게으름 때문에 이제야 다시 끄적여 봅니다. 도커 이미지 관리 상세한 설명 없이 주요 커맨드 위주로 정리하였습니다. 도커 파일 컨테이너를 실행하여 필요한 작업을 한 후 그 컨테이너를 커밋하는 방법으로 이미지를 만들 수도 있고 도커 파일(Dockerfile)을 작성하여 이미지를 빌드하는 방법도 있습니다. 도커 파일에 필요한 작업을…

Docker Container

지난 주에 회사 교육으로 도커 컨테이너에 대한 강의를 들었습니다. 이미 며칠이 지났기 때문에 기억이 조금 흐릿해지긴 했지만 완전히 다 까먹기 전에 기록해 두려고 합니다. 컨테이너 기반 기술 도커(Docker)라는 컨테이너 기술은 어느 날 갑자기 하늘에서 뚝 떨어진 것이 아니며 오래 전부터 리눅스에 포함되어 있던 여러 가지 기술을 잘 조합하여 사용하기 쉽도록 패키징 한 것입니다. 여러 컨테이너…

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

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

Spring Boot에서 Legacy Cookie 사용하기 (Tomcat & Jetty)

HTTP 프로토콜로 서버에 요청 메시지를 보낼 때 Header에 Cookie를 포함할 수 있습니다. 이 때, Cookie가 여러 개이면 각각을 세미콜론(;)으로 구분합니다. 아래와 같은 형태로 Cookie를 보내면 서버에서는 “yummy_cookie”의 값은 “choco”로, “tasty_cookie”의 값은 “strawberry”로 인식합니다. 예전에는 아래와 같이 콤마(,)로 구분된 Cookie도 서버에서 2개로 인식하여 처리할 수 있었습니다. 하지만 콤마로 구분하는 것은 표준이 아니기 때문에 최신 버전의 웹…