❤️ 누군가는 나와같은 바보짓을 하지 말기를 바라며

최근, 기업면접을 보던 도중에 내가 배포했던 페이지에서 새로고침을 하면 페이지가 나오질 않는다는 이야기를 들었다. 분명 배포 단계에서 새로고침시 데이터가 유지되는지를 확인하기 위해 테스트를 했었다고 생각했는데 아니었나보다.
덕분에 면접관님들 앞에서 쪽팔린 경험을 하게 되어버렸다. 곧바로 해결하고 싶었지만 과제와 기타 일정들을 소화하느라 해결이 늦어졌다. 그리고 생각보다 별것 아닌 이유였지만 나와같은 쪽팔림의 곶통(?) 을 겪지 말기를 바라는 마음으로 이 글을 작성해본다.

❤️ netlify의 배포단계에서 이루어지는 일

사실 로컬에서 해당 프로젝트를 클론받아서 새로고침을 해보면 전혀 문제가 없었다 (는 힌트를 면접관님께 감사하게도 받을 수 있었다)

그렇다면 이는 필연적으로 netlify에서 무언가 문제가 있었다는 소리다는 느낌을 받을 수 있었다.

생각보다 원인은 금방 찾을 수 있었다. 구글링 당시의 검색어는 "netlify refresh 404" 였고, 처음에 보이자마자 나온 stack overflow 글에서 힌트를 얻을 수 있었다.

해당 주소를 통해 내용을 살펴보면, redirect를 위해서는 public 폴더에다가 _redirect 파일을 만들고, 아래와 같은 코드를 작성하라고 설명하고 있다.

원인이 그래서 뭔데?

저 내용과 스텍오버플로우 이야기를 읽고있다보니 바로 느낌이 왔다 원인이 무엇이었는지.

우리가 netlify에 배포를 할 당시에 netlify가 바라보게 되는 첫 진입점은 바로 build 폴더에 있는 index.html 이다.

그리고 이 build 폴더는 알아서 깃 레파지토리와 연결을 해주면 netlify가 알아서 빌드해줘서 만들어놓는다.

그런데, 여기서 중요한점은 과연 endpoint가 달라졌을때에 netlify가 이것을 인식하느냐 안하느냐?" 라는 점이었다.

간단하게 말하자면,

https://chltjdrhd777.netlify.app // <- 이 주소는 netlify가 빌드한 내부 폴더, index.html을 통해서 리소스를 전달해줄 수 있다.
https://chltjdrhd777.netlify.app/keyword // <- 이 주소는 netlify가 빌드한 내부 폴더에 적절하게 전달할 리소스를 가지고 있지 않다. 

즉, netlify 입장에서는 보유하고 있는 내용은 오로지 root path인 "/" 로 올 때에 줄 파일만 가지고 있다.

그리고 브라우저 입장에서 이 index.html을 받고 routing을 한다면 같이 전달받아 CSR을 했던 js 파일을 통해 라우팅 처리를 해서 페이지를 표시할 것이다.

근데 문제는 새로고침을 할 때이다.

다른 path를 통해 라우팅을 한 상태에서 새로고침을 한다는 의미는 서버에게 이 endpoint에 대한 리소스를 요청한다는 것 이 되어버리는 것이다.

즉, 배포서버 입장에서는 파일이 없으니 404 에러를 내는게 너무나도 당연한 것이다.

aws 에서 s3 버킷에 정적 배포를 할 때에도 이러한 내용이 존재했었다.

결국 결론적으로 말하자면

이 문제는 새로고침을 했을 때, 해당 페이지가 존재하지 않는다면 루트 엔드포인트인 "/" 로 리다이렉트할 수 있는 옵션을 제공해줘야 했다는 의미가 되었다.

요청한대로 "_redirect" 파일을 만들고 모든 요청에 대해 index.html을 제공하면서 200번대로 응답을 주도록 만들었더니 에러가 사라지는 것을 볼 수 있었다.

앞으로는 이런 쪽팔린 경험은 하고싶지 않다 (헤헷)