Flutter Web으로 개발한 웹사이트를 AWS S3에 호스팅하고 CloudFront를 통해 서비스하고 있었습니다. 웹사이트 개발이 완료된 후, 구글 검색 노출을 위해 Google Search Console에 sitemap.xml을 등록하려고 했습니다.
sitemap.xml은 정상적으로 작성되어 있었고, 실제로 브라우저에서 접속해보면 문제없이 XML 형식으로 보였습니다. 하지만 Google Search Console에서는 계속해서 "sitemap이 HTML 형식"이라는 에러를 표시했습니다.
이 문제를 해결하기 위해 먼저 sitemap.xml의 응답이 실제로 어떻게 오는지 확인해보았습니다. 브라우저의 개발자 도구에서 네트워크 탭을 확인해보니 Content-Type이 'application/xml'로 정상적으로 표시되었습니다. curl 명령어로 확인해봐도 동일한 결과였죠.
하지만 httpstatus.io라는 사이트에서 확인해보니 Content-Type이 'text/html'로 표시되었습니다. 이는 Google Search Console에서 보는 것과 동일한 결과였습니다. 같은 URL에 대한 요청인데 도구마다 다른 Content-Type을 받는다는 것이 의아했습니다.
이 문제를 해결하기 위해 여러 가지 방법을 시도해보았습니다. 먼저 S3에서 sitemap.xml 파일의 메타데이터를 수정해보았습니다. S3 콘솔에서 파일의 메타데이터를 확인하고 Content-Type을 'application/xml'로 직접 설정했지만, 문제는 해결되지 않았습니다.
다음으로 CloudFront의 응답 헤더 정책을 수정해보았습니다. CloudFront 콘솔에서 새로운 응답 헤더 정책을 만들어 Content-Type을 'application/xml'로 설정하고 이를 배포에 적용해보았습니다. 하지만 이 방법도 효과가 없었죠.
CloudFront Function을 만들어서 시도해보기도 했습니다. sitemap 요청이 들어올 때 Content-Type 헤더를 'application/xml'로 강제로 설정하는 함수를 만들어 적용해보았지만, 이 역시 문제를 해결하지 못했습니다.
여러 시도 끝에 마지막으로 CloudFront의 보안 설정을 확인해보았습니다. 그리고 드디어 문제의 원인을 찾았습니다. CloudFront의 웹 애플리케이션 방화벽(WAF) 설정이 문제였던 것입니다. WAF가 일부 요청에 대해 Content-Type을 변경하고 있었던 것이죠.
WAF 설정을 비활성화하자 모든 도구에서 일관되게 Content-Type이 'application/xml'로 표시되었고, Google Search Console에서도 sitemap.xml을 정상적으로 인식할 수 있었습니다.
이 경험을 통해 CDN 설정에서 보안 관련 기능들이 예상치 못한 동작을 일으킬 수 있다는 것을 알게 되었습니다. 특히 WAF같은 보안 기능은 요청과 응답을 수정할 수 있으므로, 문제 해결 시 반드시 확인해봐야 할 부분이라는 것을 배웠습니다.
'Coding' 카테고리의 다른 글
tailwind CSS에 template literals 사용시 주의점. (1) | 2022.03.08 |
---|---|
tailwind를 이용하여 active 유지하기 (0) | 2022.03.06 |
tailwind와 ionicons를 같이 쓰는 법. (1) | 2022.03.05 |
css 공부하며 몰랐던 것 정리. (0) | 2022.03.04 |
댓글