NextJS에서 static html로 export를 해서 AWS의 S3, Route 53, Cloudfront를 이용해 배포할 때 발생하는 route 문제 해결 방법

NextJS로 작업하고 빌드하면 Server Side Rendering을 구현할 수 있다.

요청이 있을 때마다 node가 돌아가는 서버에서 html 파일을 마련해 전달한다.

 

그러나 빌드시 next export라는 명령어를 쓰면

Server Side Rendering이 필요 없는 정적인(static) html 파일로 뽑아낼 수도 있다.

물론 이 때에는 Server Side Rendering과 관련된 option을 사용하지 못한다.

 

이 파일을 배포하는 가장 쉬운 방법으로는 vercel에 remote repository를 등록해서 올리는 방법이지만

회사 등에서 AWS를 이용해 배포해야 하는 경우도 있다.

이런 때에는 route 때문에 좀 고생을 하게 되어 기록으로 남긴다.

미리 알고 있어야 할 것들

S3, Route 53, Cloudfront를 이용해서 배포하는 방법은 설명하지 않겠다.

문제 해결 방법

NextJS 프로젝트에서 npm run build && npm run export를 하면 각 route에 해당하는 html 파일들이 생성된다.

https://nextjs.org/docs/advanced-features/static-html-export

이를 S3에 올리고 Cloudfront와 연결하면 잘 접근이 되는 것을 확인할 수 있다.

그러나 주소창을 이용해서 root가 아닌 다른 route로 접근을 하면 잘 안 된다.

만약 error 페이지를 index.html로 설정했다면 주소창 입력으로 다른 route로 접근시 루트로 다 빠지는 모습을 볼 수 있다.

 

pages/login.jsx를 빌드해서 생긴 login.html 파일을 S3에 올려도

주소창에 /login을 입력시 /login.html을 S3에서 불러오지 못하기 때문에 오류가 발생한다.

stack overflow를 검색해 보니

https://stackoverflow.com/questions/57438566/next-js-export-static-s3-routing-fails-on-page-reload

.html을 떼어 내서 저장하라는 다소 괴상한 해결책을 제시했고

S3에서 .html를 지우고 메타 데이터가 text/html일 때 Cloudfront에서 잘 작동하는 것을 확인했다.

예를 들어 login.html이라면 login 파일이 되고 메타 데이터는 text/html이어야 한다.

S3 상에서 파일의 속성을 보면 확인할 수 있다.