gh-pages 배포 시 새로고침 404 Error가 뜨는 문제[React]

이전 문제 포스트

gh-pages 배포 시 빈 화면 나오는 문제 수정 [React]

 

1. 문제 배경

• 문제 발생 상황: gh-pages를 활용해 git hub page에 바로 배포 후 서브 경로에서 새로고침을 하거나 직접 입력으로 해당 페이지에 접근하면 404 에러가 발생하는 문제
• 기술 스택:
  
  •  
            "react-dom": "^18.3.1",
            "react-router-dom": "^6.25.1",
            "gh-pages": "^6.1.1",
  •         "react": "^18.3.1",

 

gh-pages를 이용해 배포까지는 어찌어찌 성공하고 나서 링크를 통해 서브페이지로 이동이 잘되는거 까지는 확인했는데, 새로고침을 한다거나 url을 직접 입력하기만 하면 404 에러가 떠버린다. 새로고침하면서 확인을 해야 성미가 풀리는 직업병 덕분에 저건 우선 반드시 해결을 해야겠다고 마음을 먹었다.

 

 

 

2. 문제 분석

 찾아보니 새로고침 시 404에러가 뜨는 것은 라우터 설정에 의한 문제인 것으로 보였다.

리액트 라우터 방식에서 CSR(Client Side Routing) 방식으로는 크게 'Browser Router'와 ' Hash Router'가 있는데,

세팅할 때 사용했던 'react-dom-router'는 Browser Router 방식이었다. 둘의 차이를 간단히 비교해 보자면 이렇다.

 

---

 

• BrowserRouter:
  • 기본 URL 구조: 브라우저의 기본 URL 구조를 사용하여 /about, /contact와 같은 형태로 라우팅 합니다.
  • 정적 파일 제공: 서버에서 라우팅을 지원해야 하며, 서버에서 모든 라우트에 대해 기본 HTML 페이지를 제공해야 합니다. 서버가 적절한 설정을 하지 않으면 404 오류가 발생할 수 있습니다.
  • SEO: 서버 측에서 모든 URL에 대해 적절한 HTML 콘텐츠를 제공하면 검색 엔진 최적화(SEO)에 유리합니다. URL이 클린하고 SEO 친화적입니다.
  • 페이지 새로 고침: 새로 고침 시 서버에서 요청된 URL에 대한 페이지를 제공해야 합니다.
  • 예시: https://example.com/about
• HashRouter:
  • 기본 URL 구조: URL에 해시(#)를 사용하여 라우팅 합니다. 해시 이후의 부분이 클라이언트 측 라우터에 의해 처리됩니다. 예를 들어, https://example.com/#/about와 같은 형태로 라우팅합니다.
  • 서버 설정: 서버에서 별도의 설정이 필요 없으며, 모든 요청은 동일한 HTML 파일로 라우팅 됩니다. 해시는 서버와는 상관없이 클라이언트 측에서만 처리됩니다.
  • SEO: 해시 기반 URL은 검색 엔진에서 인식되지 않을 수 있으며, SEO에 불리할 수 있습니다. 해시는 서버에 전달되지 않으므로 SEO 최적화에 적합하지 않습니다.
  • 페이지 새로 고침: 해시 부분은 클라이언트 측에서 처리되므로 새로 고침 시 문제가 발생하지 않습니다.
  • 예시: https://example.com/#/about

 

---

 

Browser Router의 경우 github pages에서 요청된 URL에 대한 페이지가 제대로 제공되지 않기 때문에 라우팅 된 페이지 경로에서 새로고침을 할 때 404 에러가 뜨는 것 같다.

 

3. 해결 방법

일반적인 케이스에서는 1. 서버 측의 설정 값을 변경하는 방법(Apache, Nginx 등)이나 2. 다른 라우터(Hash Router)로 변경하는 방법을 쓸 수 있다고 하는데, 1번은 github pages 기능을 활용하는 거다 보니 패스였고, 2번의 경우 SEO문제가 있다는 점에서 별로 선택하고 싶지 않은 방법이었다.

 

검색하다가 발견하게 된 블로그에서 알려준 방법은 404 에러 페이지가 뜨는 점을 이용하여, 404에러 페이지에서 원래 페이지로 리다이렉트를 시켜주는 방법이었는데, 간편하면서도 효과적인 방법이라는 생각에 적용하게 되었다.

 

참조한 블로그 링크

gh-pages 배포 시 URL 새로고침/직접 입력 문제

 

 

위 블로그에 나온 대로 404.html 파일과 index.html 에 스크립트를 추가해주고 나면 정상적으로 작동하게 되는데, 위 과정을 따라 했는데도 되지 않는다면 포스팅 상단에 있는 이전 수정내용을 확인해서 App.js의 Router basename 처리하는 것을 확인해 보길 바란다.

 

---

간단한 해결방법이긴 하지만, 일반적으로 서버에 호스팅 해서 쓰는 방식이라면 이런 식으로 해결하진 않을 거 같긴 하다.

어디까지나 서버에서 처리할 수 없어서 땜빵으로 하는 느낌이랄까

 

FE 해결 완료된 이슈

CSS display:flex가 가지는 한계...해결책은 Grid