배포 관련 정리

냐옹·2024년 6월 14일

React

목록 보기

10/10

리액트를 iis에 배포하려면 react-router-dom 관련 설정 때문에 라우팅이 제대로 되지 않아서 404 not found가 뜨는 경우가 있었다.
이 경우에 CreateBrowserRouter를 사용하는 것이 아니라 CreateHashRouter를 사용하면 해결된다.

이유는 하단에서 설명

리액트를 우리가 실행을 한다고 하면 결국에는 public 폴더의 index.html을 실행하는 것과 같은데 로컬에서 html 파일을 열 때 일반적으로 file://프로토콜을 사용한다. 그러나 브라우저는 보안상의 이유로 file://프로토콜에서 일부 기능을 사용할 수 없도록 제한한다. 반면에 HashRouter는 file://프로토콜에서도 정상적으로 작동한다.
HashRouter는 React Router에서 제공하는 라우터 컴포넌트 중 하나로, URL의 해쉬값을 사용하여 페이지를 관리한다. 브라우저에서 URL의 해쉬값이 변경되면 HashRouter는 해당 경로와 일치하는 컴포넌트를 렌더링한다.
[출처 : https://velog.io/@ckdwns9121/React-Router%EC%9D%98-HashRouter-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0]
예를 들어서 localhost:7777이 아니라 localhost:7777/test를 index.html과 묶고 싶다. 그러면 test라는 이름의 가상 디렉터리를 iis에 만들어서 배포하면 된다.