회사에서 Vite 로 만든 프로젝트를 S3에 올려서 호스팅 하기로 했다.
다음달에 출시 예정인 게임의 쿠폰 페이지인데, 라이브 서버에서는 클라우드 프론트를 붙이고, qa 와 dev 서버에서는 굳이 클라우드 프론트를 붙이지 않고 정적 웹 호스팅만을 이용해 올리기로 했다.
S3에 고유의 버킷을 만들고, 빌드된 파일을 올려준다. 정적 웹 호스팅을 켜주고, 버킷을 퍼블릭으로 열어주고 정책을 넣어준다. Route 53 에서 A 레코드 별칭으로 버킷을 연결해준다. (버킷의 이름과 도메인이 동일해야 합니다.)
그렇게 올린 결과 html 파일은 정상적으로 내려받아졌다.
근데 js 파일과 기타 리소스들은 내려 받아지지 않는 것이다. (err:TIME_OUT)
도대체 뭐가 문제일까 하면서 엄청난 검색을 했다. S3 자체에서 https 프로토콜만 지원하나? 하는 오해도 해버리고, 클라우드 프론트를 붙여보도록 했다.
클라우드 프론트를 붙여도 실패.. 도대체 뭐가 문제지 하고 찾아보다가, CRA 프로젝트는 S3 정적 웹 호스팅이 성공적으로 되는것을 확인했다.
결국 Vite 프로젝트 자체의 문제라고 판단하고, 빌드 결과물을 뜯어보기 시작했다. 결국 발견한 것은.. 빌드 파일에 이런 메타 태그가 있던것이다.
<meta http-equiv="Content-Security-Policy"
content="upgrade-insecure-requests" />이 코드로 인해서 js 기타 외 리소스들이 https 프로토콜로 요청을 보내고 있던 것이다..
메타 태그를 보면 알 수 있듯이 해당 태그는 http 요청에 관한 태그이다. 특히 위의 태그는 CSP 정책에 관한 태그이다. 해당 메타 태그는 HTTP 컨텐츠를 자동으로 업그레이드 해주는 정책을 활성화한다는 의미다.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Upgrade-Insecure-Requests
그럼 이 코드는 원래 Vite 의 탬플릿에 들어있었나?
그것도 아니였다.. 커밋 로그를 보니 분명 내가 저번주에 코드를 집어 넣었는데, 해당 커밋에 대한 이유도 기억이 나지 않는다.. 뭐지..
결론적으론 저 메타 태그때문에 4시간을 뻘짓했다.
결국은 해결해서 다행이지만, 오랜만에 만나는 식은땀 나는 상황이였다.
