배포 중 에러! React Uncaught SyntaxError: Unexpected token '<'

로컬에서 정상적으로 작업을 하고 build 후 s3에 올려 배포를 했다.

지도api가 들어가는 페이지에서 새로고침을 했을때 해당 js,css파일을 찾을 수 없다는 Not Found 404에러가 떳다.

구글링을 해보니 react-router-dom를 사용했을때 나타나는 문제였고 cloudfront에서 에러핸들링을 해줘야 한다는 블로그를 봤다.

Cloudfront에서 위와같이 에러를 처리해주었더니 404 NotFound에러는 사라졌다 하지만 

React Uncaught SyntaxError: Unexpected token '<' 이라는 에러가 나왔다.

파일을 보니 main.acb8d940.js라는 파일이 잘못되었다는 에러인데, 나에겐 저런 파일이 없단말이지...

구글링을 해보니 저 파일이 js인데 html로 인식해서 < 이게 잘못된 문법이라고 에러가 나는거라던데

일단 그건 알겠고 나는 저런 파일이 없는데 왜 자꾸 있지도 않은 파일을 찾냐는 말이죠?

CloudFront가 cdn으로써 역할을 하기때문에 cache를 남겨놓는다는 사실을 알고있어서 무효화도 미리 다 처리해주었다.

지금시간은 밤 12시가 되어가는데

그리고보니 view도 수정 전의 한 오전10시쯤의 화면이다!!! s3문제이든 CloudFront문제이든 어딘가에서 캐시가 남아

파일이 뒤죽박죽 되면서 있지도 않은 파일들을 가지고 있는 것 같다.

네트워크 탭을 확인해보니 css는 최신본이 맞는데 js파일이 과거의 js파일이다.

약 24시간의 고생끝에 알아낸 것은 지금 배포가 제대로 이루어지고 있지 않고

나는 오전 10시부터 14시간정도 쉐도우복싱을 하고있었다는 것!

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

html에 이것도 넣어보고

package.json에 homepage도 넣어보고

<base href="/" />

이것도 넣어봤지만 안됐었는데 사실 하루종일 계속 똑같은 파일로 반복하면서 테스트하고 있었던 것이다..

 

5.15 추가

일단 해결은 되었는데 두가지의 문제가 있었습니다..

첫번째는 캐시를 유지하는 시간이 24시간으로 설정되어 있었습니다. html에 Cache-Control을 해놨지만 CloudFront에서 직접 캐시설정을 하는게 가장 확실 한 것 같습니다.

 

1. 클라우드프론트 배포에 들어가서 behaviors를 들어가보면 처음에 viewer protocol Policy 때문에 설정했던 Behavior가 있습니다.

선택하고 Edit을 클릭합니다.

아래와같이 캐시 관련 부분에 보면 cache policy를 직접 만들 수 있는 공간이 있습니다! create policy 를 클릭하세요

Details에 꼭 policy name을 설정하시고

TTL 세팅을 합니다. 저는 공식문서에서 본대로 전부 0초로 설정해놓고 항상 최근 콘텐츠를 검색하도록 설정했습니다.

실제 서비스가 이루어질때는 cache 정책을 다시 수정해서 유저에게 빠른 서비스를 제공해야겠죠..?

2. 두번째 이유는 연결된 s3 버킷에 파일 구조가 이상했습니다. 이상한 경로에서 파일을 찾고있었습니다..

너무나 창피하지만 분명히 저와같은 초심자들이 할 수 있는 실수라고 생각하여 공유합니다.

개발자도구 엘리먼트에서 헤더를 열어 저 파일을 직접 url에 넣어보세요! 안뜬다면 s3버킷에 가셔서 폴더 구조가 url에서 찾은 경로와 일치하는지 챙겨보시기 바랍니다. 저는 static/js에서 파일을 찾는데 실제 파일은 static/js/static/js/ 에 있더군요...

너무 당황해서 캡쳐도 못했습니다. 

 

위 두가지 문제를 해결하고 나니 클라우드프론트에 캐시가 유지되지 않고 항상 최신 배포버전을 불러왔습니다.