리액트 정적 페이지 배포 새로 고침 404 오류

🍋  배경

별도의 api 서버를 두고 호출해서 사용하는 리액트 정적 페이지 배포를 진행하던 중, 새로 고침 시 404 오류가 뜨는 이슈를 맞닥뜨렸다. 

(IIS 서버에 api 서버 및 정적 페이지가 배포된 상황이었고, 정적 페이지는 example.com/registration 이라는 상세 도메인을 가진 상황)

 

🍋 원인

URL이 해석되는 장소로 많이들 들어보셨겠지만 두가지 장소, 서버 사이드 & 클라이언트 사이드가 있는데...

 

서버 사이드 렌더링 방식을 단순화하자면...

유저가 특정 url 로 접속
→ 서버로 요청을 보내고
→ 구성했던 페이지를 보여준다. 

리액트 라우터가 지원하는 클라이언트 사이드 라우팅은, 

유저가 특정 url 로 접속
→ 서버는 빈 index.html 파일 및 스크립트 파일을 전달하고
→ 이 스크립크가 로드된 후
→ /registration/ 에서 /registration/about-us라는 상세 페이지로 이동하면
→ 서버에 요청을 보내는 대신 url이 로컬에서만 번경되고,
→ 로드된 스크립트가 에서 /registration/about-us 에 해당하는 뷰를 그려주게 된다.

(즉, path 이동과 routing은 작동하지만 모두 클라이언트 사이드에서 이뤄지고 서버는 관계 XX) 

 

하지만... 하위 /registration/about-us 에서 새로 고침을 하게 되면, 클라이언트에서 서버로 새롭게 파일을 요청하는데,

해당 엔드포인트에 등록된 처음 로딩되어야할 index.html 파일을 찾을 수 없기에 404 에러가 뜨게 되는 것이다. 

 

해결하기 위해서 다음의 접근들이 있었고... 채택 과정에서 다양한 트레이드오프가 있었다. 

(1) 서버로 요청을 보내지 말고 클라이언트에서 처리하자, 

(2) 서버에서 상세 url로 요청이 들어올 때 index.html 파일을 전달하게 만드는 방법

 

 

🍋  접근

1. react-router-dom 내 BrowserRouter vs HashRouter

BrowserRouter를 사용할 때 url:  /registration/about-us

HashRouter를 사용할 때 url:  /registration/#/about-us

해쉬(#) 뒷 부분은 해시 식별자 (fragment)라고 불리며 웹 페이지 내 특정 위치를 가리키는 용도 (특정 요소로 스크롤! 할 때)로도 사용된다. 즉 뒤 부분은 url의 일부로 인식되어 서버로 전송되지 않는다는 의미!

따라서 /registration/에 접속 시 index.html을 반환하도록 설계되어있다면, /registration/#/about-us에 접속 시에도 서버에서 /registration/대로 인식하여 index.html을 반환한다. 

 

하지만... 상세 도메인이 다음처럼 깔끔하지 못하고... (/registration/#/users?id=123)

플러터 앱과 통신해야 하는 환경에서 앱 개발자 분께 모든 브리지 url을 바꾸어 달라는 요청을 전달할만한 최적의 방법이라 생각하지 않았다...

 

2. 백엔드 서버 구성

조금은 복잡하지만 서버로 들어오는 어떠한 상세 url이라도 캐치올하여 index.html 파일을 전달하도록 asp.net core로 간단한 백엔드 서버를 구성하는 방법이 있었다. 배포 후 여전히 서버 500.30 오류가 있었고, 확인 후 다른 IIS 서버에 정상 배포됨을 확인했다. 결론은 정상 동작하던 IIS 윈도 서버 플랫폼은 Windows 11, 비정상 동작하던 플랫폼은 Windows 2016으로 달랐고, 그 버전에 따라 설치해야 할 asp.net core 호스팅 번들 버전이 달랐기 때문이었다....

 

 

 

🍋  정리

같은 이슈를 맞닥뜨린 사람에게 도움이 되길 바라며... 

글을 마치겠습니다... 끄-읕

(사실 아직 보충할 내용이 있습니다... 빠른 시일 내 추가하겠습니다...)

 

 

 

 

.

.

.

참고

https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writing-manually