회사에서 진행하던 프로젝트 중간에 만났던 에러중에서 진짜 도통 왜인지 모르겠었던 에러를 공유하고자 합니다.
문제 상황
웹사이트에 접속할 때 url을 직접 입력해서 접속하거나, 접속한 상태에서 새로고침을 하면 404 Not Found 에러가 발생한다.
로컬에서 켠 서버로 접속했을때도 같은 현상이 반복되는걸 보면 웹 서버의 문제는 아니고, 클라이언트 혹은 was의 문제라고 생각했다.
추측 1. 클라이언트가 sdui로 개발됐으니까 데이터를 불러와야하는데 api를 통해 전달되는 속도가 현저히 느려서 그런게 아닐까?
개발자도구의 network 탭의 속도 제한을 느린 3G로 설정했는데 같은 에러가 발생했다. 그리고, 조금 더 생각해보니 데이터가 서빙되지 못하는 에러는 아닌거같다고 생각했다. 애초에 렌더링 자체가 안되는 문제이기 때문이다.
추측 2. 보통 접속요청을 했을때 404에러가 뜨는건 index.html을 찾지 못했을때 나오는거니까 뭔가 was에서 정의되지 않은 경로에 대한 처리를 못하는게 아닐까?
정적파일을 서빙하는 미들웨어를 사용하고는 있지만, index를 전달하지 않는 처리를 해놨지만, 혹시 몰라서 좀 찾아보니까 nest-next같은 라이브러리를 사용해서 정의되지 않은 api는 클라이언트에게 책임을 전가하도록 하는 것이 있었다. 아쉽지만 지금 상황의 해결책은 아니라고 생각했다.
추측 3. 서버문제는 아니고 클라이언트에서 뭔가 문제가 있는 것 같다. 프론트엔드 개발자한테 물어보자
여쭤보니까 클라이언트에서 문제가 발생하는 것 같다고 하셨다. 결론은 webpack 문제였다!
브라우저가 react에게 GET 요청을 보내도 react에는 해당 경로에 대한 정보가 없기때문에 발생하는 connect-history-api-fallback 현상이라고 한다. 쉽게 말하면 index.html을 찾지 못해서 404에러가 나는거였다.
해결 방안
이 문제를 해결하기 위해서 webpack.config.js에 historyApiFallback: true라는 옵션을 설정해주었다. 이건 HTML5의 historyAPI를 사용 할 때, 설정해놓은 url 이외의 경로로 접근할때도 index.html을 서빙해주는 설정이라고 한다. 원래는 내가 겪었던 것처럼 404 Not Found를 보낸다고 한다.
이 외에도
Hash router를 사용하기도 해보았는데, 문제가 해결은 됐지만,url에#이 붙어서 나왔다 😕
이거때문에 로컬에서 화면 확인 할 때도, 엄청 애먹었었는데 고칠 때 그냥 속이 시원했습니다!
