💡 개요
최근 원티드 프리온보딩 사전과제를 진행하면서 이런 요구사항을 만났다.
배포된 사이트에서 기능이 정상동작 하지 않는다면 배포 가산점이 부여되지 않습니다
- 기능이 정상 동작하지 않는 예시:
- 새로고침하면 404 에러 페이지 표출
- "/" URL이 아닌 "/signup"등의 경로로 바로 접속할 경우 404 에러 페이지 표출 등
딱 보자마자 gh-pages 로 배포했을 때 저 두가지 문제가 생기는 건 알고 있었는데, 이유를 너무 어렴풋하게 알고있었고 해결법도 기억이 잘 나지 않아서 이번 기회에 한 번 공부해보기로 했다.
💣 문제가 생기는 이유는?
먼저 해결법을 알기 전에 문제상황과 해결법을 알고가자.
- 새로고침하면 404 에러 페이지 표출
- "/" URL이 아닌 "/signup"등의 경로로 바로 접속할 경우 404 에러 페이지 표출 등
이러한 문제가 발생하는 이유는 배포한 프로젝트가 SPA(Single Page Application)이기 때문이다. SPA에서는 라우팅 처리 로직이 서버에 있지 않고, React 앱 내에 있다. 그렇기 때문에 모든 페이지 요청에 대해서 동일하게 index.html 을 반환한다. 그리고 나서 React 코드가 실행되면 URL에 따라 동적으로 페이지가 전환된다.
하지만 Github Page에서는 이를 지원하지 않는다. “/”가 아닌 “/signup” 등의 페이지로 진입하거나, “/”가 아닌 페이지에서 새로고침을 해보면 404 페이지가 뜬다. Github Page 측 서버에서 해당 경로에 대해 아는 것이 없기 때문이다.
결국, 결론은 아래와 같다.
🤔 모든 페이지 요청에 대해 index.html 로 응답하도록 설정한다.
🕸️ Netlify
사실 Netlify외에도 서버에서 모든 페이지 요청에 대해 index.html로 응답할 수 있는 다른 도구들을 사용해 해결할 수도 있겠지만, 나는 Netlify로 배포해봤다.
- 회원가입 → 로그인 → 팀 생성 → 레포지토리를 통해 배포
까지의 과정을 생략하도록 하겠다. 먼저 배포를 하고 나면 github page 때와 같은 문제가 발생한다.
이제 public 폴더에 _redirects 파일을 생성하고 아래와 같이 작성해준다.
/* /index.html 200이는 어떠한 경로로 진입하든 (/*)
index.html 을 200 상태코드와 함께 반환하겠다는 의미이다.
이렇게 하면 문제가 해결된다.
🤔 굳이 Github Page로 하고 싶다면,,
Github Page로 위의 문제를 해결 할 수 있는 방법이 두 가지가 있다. 하지만 이 글에서 다루기엔 꼼수스러운 방법이라는 생각이 들어서 키워드만 남겨두겠다.
react-router-dom의 HashRouter 사용하기404.html를 반환하는 것을 이용하기
