정적 사이트에서 글 링크가 안 열렸던 이유
문제는 카드 링크가 아니라 배포 구조였습니다. Next export가 만든 /posts/intro/index.html을 CloudFront가 자동으로 찾아주지 않았고, 404 fallback이 홈으로 돌려보내고 있었습니다.
CloudFront정적 배포라우팅
처음에는 프론트엔드 문제처럼 보였습니다. 카드 안쪽 링크를 정리하고, 카드 전체를 하나의 링크로 바꾸면 끝날 것 같았습니다.
왜 헷갈렸나
HTML만 보면 href는 정상으로 들어가 있었습니다. /posts/intro/로 이동하는 링크가 있었고, 마크업도 클릭 가능한 구조였습니다.
- 링크 태그는 있었다.
- 마우스 커서도 바뀌었다.
- 주소창도 상세 글 URL로 이동했다.
- 그런데 화면은 계속 홈처럼 보였다.
실제로 벌어진 일
Next 정적 export는 /posts/intro/index.html 파일을 만듭니다. 하지만 CloudFront는 /posts/intro 요청을 받았을 때 그 파일을 자동으로 찾아주지 않습니다.
수정한 것
- CloudFront Function을 viewer-request에 붙였습니다.
- 확장자가 없는 URL을 /index.html 경로로 rewrite했습니다.
- /posts와 /posts/intro가 서로 다른 HTML을 받는지 curl로 확인했습니다.
- CloudFront 캐시를 무효화한 뒤 실제 도메인에서 다시 확인했습니다.
다음에 같은 문제를 만나면
링크 문제가 맞는지 보기 전에, 먼저 실제 URL이 어떤 HTML을 받고 있는지 확인할 겁니다. 정적 사이트에서는 클릭보다 라우팅과 캐시가 더 자주 범인입니다.
