[AWS] CloudFront + S3로 배포한 프로젝트의 에러 페이지

기본적으로 라우터를 통해서 에러 페이지를 구성해 두었었다.

하지만, 지난 포스팅에서 "잠깐 스쳐지나가는 페이지" 자체를 없애고 싶었다.

CF를 탐방하던 중 위와 같은 페이지를 찾았다.

원래 응답 페이지는 index.html로 되어 있었으나,

이번에 새로 만든 error.html으로 변경해 보았다.

실행 결과

이런 페이지로 이동되었다.

문제점

그리고 아예 다른 주소로 이동이 불가능하고, 페이지를 완전히 껐다가 다시 켜야 다시 index.html경로가 불러와 졌다.

이제 이 error.html에서 index.html로 자연스럽게 넘어갈 방법만 찾으면 꽤 좋은 처리방법을 찾았다고 말할 수 있을 것 같다.

방법을 찾았다!

   <script>
      function goToMainPage() {
        window.location.href = 'https://xxxxxxx.com/index.html';
      }
      function hardReset() {
        localStorage.clear();
      }
      document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('goToMainPage').addEventListener('click', goToMainPage);
        document.getElementById('hardReset').addEventListener('click', hardReset);
      });
    </script>

이렇게 index.html로 다시 location을 옮겨주니 이후 정상적으로 index.html을 탐방하는 것 같다!

하지만 문제가 있는 것 같다....

구글 서치 콘솔이 페이지를 인식 못한다..

다시 이유를 찾았다

놀랍게도 HTTP응답 코드가 404여서 못 찾는 것이었다.

HTTP응답은 200으로 하고, 그렇게 받은 페이지가 에러 페이지여야 한다는 것이다.