CloudFront 403 / 404 에러 해결

1. 문제 정의

업브렐라 프로젝트를 배포했음에도 불구하고 구글에서 검색되지 않는 문제가 있었습니다.

색인이 생성되지 않는 페이지를 확인해보니 아래의 페이지들에 문제가 있었습니다.

2. EC2 VS CloudFront

개발 서버의 경우, 인프라 구축의 비용을 줄이기 위해 EC2 + Nginx + React 로만 배포했습니다.

개발 서버의 웹 페이지 응답을 보면 정상적인 것을 확인할 수 있습니다.

똑같은 페이지이지만, 배포 서버의 경우 404 에러가 발생하는 것을 알 수 있습니다.

404 에러가 발생했지만, 페이지는 정상적으로 보여지기 때문에 더욱 원인을 찾기 어려웠습니다.

3. 문제 원인

이러한 문제는 클라이언트 사이드 라우팅을 사용하는 React 애플리케이션의 특성과 CloudFront의 동작 방식 간에 발생하는 불일치 때문에 발생합니다.

클라이언트 사이드 라우팅을 사용하는 React 애플리케이션은 일반적으로 react-router-dom 같은 라이브러리를 사용합니다. 이 라이브러리는 브라우저의 URL 변경을 감지하고, 서버에 새로운 페이지를 요청하지 않고 클라이언트 측에서 라우팅을 처리합니다.

그런데 CloudFront는 보통 URL 경로에 해당하는 실제 파일을 찾으려고 합니다.
위의 예시처럼 https://upbrella.co.kr/about 요청이 들어오면, CloudFront는 about 이라는 이름의 파일이나 폴더를 찾으려고 시도합니다.

여기서 문제가 발생합니다.
React 애플리케이션에서는 https://upbrella.co.kr/about 이라는 파일이나 폴더가 존재하지 않습니다. 이러한 경로는 클라이언트 사이드에서만 의미가 있습니다. 따라서 CloudFront는 해당 경로에 대한 요청을 받았을 때, 파일을 찾을 수 없어 404 오류를 반환합니다.

4. 해결 방법

이 문제를 해결하기 위해 일반적으로 CloudFront나 웹 서버에 특정 라우팅 규칙을 설정합니다. 예를 들어, 404 오류가 발생했을 때 index.html로 리다이렉트하도록 설정하여, React 라우터가 클라이언트 측에서 해당 경로를 처리할 수 있도록 합니다.

위와 같이 CloudFront - 배포 - 오류페이지 에서 적절한 설정을 해주면 문제를 해결할 수 있습니다.