[React] 배포 후 새로고침 시 404에러가 발생하는 이유

gh-pages, netlify로 배포 시 새로고침과 동시에
404에러가 발생하는 이유가 뭘까 ?

gh-pages

gh-pages로 배포할 시, 도메인/페이지 방식이 아닌, 도메인/프로젝트명/페이지 방식이다.
그러므로 일반적으로 배포 주소는
https://{user | organization}.github.io/{repository}로 지정된다.
여기서 새로고침을 할 경우, https://{user | organization}.github.io/까지만 라우팅 되어 404에러가 발생하는 것이다.

netlify

최초 접속할 때의 url은 /이다. 그리고 이 때 index.html을 읽는다.
해당 url에 대한 자원은 index.html로 정해져 있다.
하지만, 리액트에서 라우팅된 url이(ex. /signin, /signup) 가르키는 자원은 존재하지 않는다. React가 SPA(Single Page Application)이기 때문이다.

즉, /signin, /signup 페이지에서 새로고침을 하면, vanillaJS 와는 달리, signin.html, signup.html파일이 존재하지 않기 때문에 404에러가 발생한다.

해결 방법

gh-pages에서의 해결 방법

1. HashRouter 사용

gh-pages에서 권장하는 방법이다.
BrowserRouter 대신 HashRouter을 사용하는 방법이다.
HashRouter는 URL의 hash를 활용한 라우터로
주소에 #이 붙어서 미관상 보기 좋지 않다는 입장들이 많다.
ex) https://{user | organization}.github.io/{repository}/#/

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route ... />
        <Route ... />
      </Routes>
    </HashRouter>
  )
}

2. BrowserRouter에 basename 작성

package.json 파일 최상단에 레포지토리명을 포함하고 있는 배포 URL주소를 추가하고,
"homepage": "https://{user | organization}.github.io/{repository}"
BrowserRouter의 props로 basename={process.env.PUBLIC_URL}을 부여하면 된다. 이는 라우터에게 “/” 대신 “/레포지토리 주소”로 이동하라고 지시할 수 있다.

{
  /* package.json */
  "homepage": "https://{배포주소}.github.io/{레포지토리 주소}",
  "name": "...",
  ...
}

//App.jsx
function App() {
  return (
    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <Routes>
        <Route ... />
        <Route ... />
      </Routes>
    </BrowserRouter>
  )
}

netlify에서의 해결 방법

1. _redirects 파일 생성

public 폴더 내에 _redirects 파일을 생성하여 아래 내용과 같이 입력해주면 된다.

/* /index.html 200

/* : 어느 경로로 접근해도
/index.html : index.html 파일로 redirect 하여
200 : status 200 코드를 나타낸다.
라는 의미를 가지고 있는 파일이다.