[AWS] S3 CORS와 캐시 무효화 처리했던 방법들 정리

 

 

회사에서는 3가지의 홈페이지 빌더를 사용하고 있는데 GNB 영역에서 뭐 하나 수정하려고 하면 3가지 빌더를 다 수정해야 하는 점이 너무나도 비효율적이라(각 빌더 별로 담당자도 달라서 일하기도 불편..) 언젠가는 방식을 바꿔야지 생각만 하고 있었다. GNB 영역을 html, css, script가 다 포함된 공통 html로 하나 빼서 cdn 방식으로 불러와 사용하면 편할 것이라 머릿속으로 구상만 했다. 그런데 이번에 빌더에서 관리하는 페이지가 1개가 더 늘어나게 되면서 똑같은 코드를 또 사용하게 될 위기에 처했고 머릿속의 그 계획을 실행해야만 했다.

 

코드 한 줄 쓰면 끝나는 아주 효율적인 방식! 이었으나 3가지 문제에 봉착하고 만다.

 

 

 

---

 

 

 

 

[미해결] 문제 1. html을 cdn으로 어떻게 불러올건데?

하나의 html로 신나게 만들고나서 막상 불러오려고하니 방법을 몰랐다. 생각해보니 내가 지금까지 개발하면서 <link> 태그로 가져온 요소가 library, 부트스트랩, css 밖에 없는 것이다. '전체 html을 가져오려면 어떻게 해야하지? ', '내가 지금 부트스트랩을 개발해야하는건가?'하고 구글링을 해봤는데 나처럼 쓰고싶은 사람이 보이지 않았다. (..😭)

 

 

 

[해결완료] 문제 2. S3에서 가져오면 cors를 어떻게 해결할건데?

그래서 첫번째 문제는 나중에 고민하고 우선 배포부터 하기로 한다. CSS과 HTML을 분리하여 S3에 업로드해놓고 CSS를 따로 불러오고 스크립트로 html을 가져와서 화면을 그리는 방법을 사용했다. 이렇게만해도 예전 업무 프로세스보다는 훨씬 효율적이다.

 

📄 작성한 코드

async function fetchHtmlAsText() {
  const data = await fetch('https://S3주소/경로/gnb.html')
  return await (data).text();
}

async function importPage() {
  document.querySelector('#gnb').innerHTML = await fetchHtmlAsText();
}

importPage()

 

 

배포했는데 CORS에 부딪혔다. 이 해결방법은 팀장님이 예전에 알려줬지롱. (근데 위치가 기억이 안나서 다시 여쭤봄 ^_^ 정신🍒..)

이 위치에서 응답 헤더 정책을 만들면 된다. 우리는 이미 정책이 만들어져있어서 허용할 URL을 추가하기만 하면 됐다.

새로 만들면 여기다가 추가하면 된다.

 

 

 

[해결완료] 문제 3. cloudFront에서 무효화를 했는데도 왜 캐싱이 되는데?

배포는 완료됐는데 reset이 각 빌더별로 다르게 설정되어있다던가 커스텀 script가 작동이 안되는 등의 이슈가 있어서 실시간으로 수정하며 테스트가 필요했다. 그런데 자꾸 캐싱이 되어 수정된 html을 불러오지 못하는 것이다..!

 

방법 1. 쿼리스트링을 실어 새로운 객체로 가져온다. (실패)

const data = await fetch(`https://S3주소/경로/gnb.html?date=${Date.now()}`)

 

원래 이렇게하면 됐었는데 여전히 이전 파일이 다운로드됐다. 팀장님께 조언을 구했더니 S3에 가기 전 단계에서 이미 캐싱을 한 객체를 보내주는 것이라 했다. 그래서 S3의 새로운 객체가 아니었던 것..

 

 

 

 

방법 2. 무효화를 설정한다. (1회만 성공, 실패)

파일경로에 캐싱이 되지 않도록 설정해놨다고 생각했는데 알고보니 이건 일회성 요청이었다. 그래서 처음엔 작동이 됐고 두번째부터는 다시 캐싱된 파일이 왔던 것..

 

 

방법 3. 해당 파일에 max-age를 준다. (성공)

파일의 Cache-Control을 설정한다. (자세한 정보는 여기) 근데 이 방법은 개발이 필요한 순간에만 사용하고 개발이 끝나면 캐싱이 되도록 설정하는게 나을 것 같다는 판단이 들었다.

 

 

 

 

이상 몽딱뚝딱이 아니라 우당탕탕 해결 끝..🤕

첫번째 문제는 방법을 찾아보고 있는 중이라 업데이트 예정이다.

 

 

---

참고

웹 서비스 캐시 똑똑하게 다루기