가끔 이슈글로 인해 해당 글이 엄청 읽혀질때 게시글 내 이미지가 캐시서버에서 처리되는데도 불구하고 생각보다 본서버의 트래픽이 줄지 않을때가 있었습니다.
오늘도 그런 상황이 발생을 해서 도대체 첨부되는 이미지 말고 어떤 파일들이 트래픽을 방문자 숫자 만큼 발생하는 건지 살펴보다가 괜히 캐싱하지 않은 js 파일 등을 의심해서 그것 들 마저 캐싱해야 되나 하고 있었는데...
우연치 않게 해당 게시글에 들어가 있는 url 카드를 살펴보게 되었습니다.
에디터자동완성 모듈을 사용하면서 본문 작성할때 url 주소를 입력하면 해당 url의 제목,요약,섬네일 등이 자동으로 만들어져서 들어갑니다.
그런데 여기서 섬네일이 설마 설마 했는데 가져온 사이트의 원본 이미지 그대로 가져와서 저희 서버에 저장을 합니다. data 포맷이라 캐시서버에 캐시도 못합니다.
엄청 큰 이미지였는데 이걸 그대로 가져오다보니 보여줄때는 섬네일로 작게 보여주는데 용량이 무려 3.5M 입니다. ㄷㄷㄷㄷ
오늘 해당 글이 1000명 이상이 읽혔는데 본서버 트래픽이 이상하게 줄지 않아서 찾다가 이걸 찾아냈네요..
당장 url 카드 허용 도메인으로 설정을 바꿔서 원하는 유튜브 등 멀티미디어 사이트 들만 허용하고 일반 url은 동작하지 않도록 바꿨습니다.
와... 이런데서 이렇게 큰 트래픽이 누수가 있을 줄.....
오늘 3.5G 도둑 맞았네요.
트래픽 호로록 하는 도둑놈 (feat. 에디터 자동완성모듈)
https://xetown.com/topics/1467633
이미지를 data:로 처리하는 것이 관리에는 편할 수 있지만 (어디에 첨부파일을 따로 저장해 놓을 필요가 없으니까요) 트래픽이나 캐싱 효율 측면에서는 최악의 선택이지요.
심지어 HTML이나 CSS에서 참조하는 백그라운드 이미지 같은 것을 모두 data:로 변환해 주는 것이 무슨 대단한 기능인 것처럼 소개하는 프로그램도 있는데, 완전 노이해입니다. 대부분의 사이트에서 캐싱이 원활하지 않고 HTTP/2가 존재하기 전에 생겨난 최적화 트릭인 것 같아요. 그런데 그 당시에 만들어진 프로그램도 아니고 최신 노드JS 기반의 프레임워크나 라이브러리들이 그 짓을 똑같이 해댑니다. ㅋㅋㅋ