[React] Github Pages로 배포하고 새로고침시 404 에러 해결

Notice

Recent Posts

Recent Comments

Link

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

Ann's log

[React] Github Pages로 배포하고 새로고침시 404 에러 해결 본문

React

[React] Github Pages로 배포하고 새로고침시 404 에러 해결

-Ann- 2022. 5. 30. 17:57

😱 문제

GitHub Pages로 배포한 React 페이지에서 새로고침을 하면 404 에러가 뜬다는 것을 발견했다.

Homepage에서는 새로고침해도 아무런 문제가 없는데, 서브 디렉토리로 이동하고 새로고침을 하면 문제가 발생한다..

이유를 찾아보니 깃허브 페이지는 SPA(Single Page Applications)를 인식하지 못하는 문제가 있다고 한다!

SPA는 일반적으로 웹 브라우저에서 액세스 할 수 있는 하나의 index.html 파일만 사용하기 때문에, Github Pages로 배포를 하게 되면 homepage url 하나만 인식하게 된다.

그래서 hompage url 뒤에 경로가 더 붙으면 그 경로에서 해당 페이지의 파일을 찾으려 하기 때문에 에러가 발생하게 된다.

😄 해결 방법

구글에 검색해 보니까 해결 방법은 여러 가지가 있는 것 같다.

Create React App 문서에서는 2가지 방법에 대해 알려주고 있는데, 나는 404.html을 사용하는 방법을 써보려 한다.

404.html을 사용하는 방법

CRA 문서에서는 spa-github-pages 가이드를 참고하라고 나와있다.

(이 글을 한국어로 번역해 주신 깃허브 저장소가 있어서 이 글을 참고하였다.)

이 방법은 알 수 없는 경로에서는 404.html 페이지를 반환한다는 것을 이용하여 404 페이지를 우회하는 방법이다.

404.html 파일에 스크립트를 작성해서 query와 hash로 구성된 새로운 URL을 반환하여 redirection하게 된다.

만약에 URL이 example.tld/one/two?a=b&c=d#qwe인 경우, example.tld/?p=/one/two&q=a=b~and~c=d#qwe로 변경된다고 한다.

public/404.html

1. React 프로젝트 폴더의 public 폴더 안에 404.html 파일을 생성한다.

2. 다음 내용을 그대로 복사해서 붙여 넣는다.

(출처: https://github.com/rafgraph/spa-github-pages/blob/gh-pages/404.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Single Page Apps for GitHub Pages</title>
    <script type="text/javascript">
      // Single Page Apps for GitHub Pages
      // MIT License
      // https://github.com/rafgraph/spa-github-pages
      // This script takes the current url and converts the path and query
      // string into just a query string, and then redirects the browser
      // to the new url with only a query string and hash fragment,
      // e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
      // https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
      // Note: this 404.html file must be at least 512 bytes for it to work
      // with Internet Explorer (it is currently > 512 bytes)

      // If you're creating a Project Pages site and NOT using a custom domain,
      // then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
      // This way the code will only replace the route part of the path, and not
      // the real directory in which the app resides, for example:
      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
      // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
      // Otherwise, leave pathSegmentsToKeep as 0.
      var pathSegmentsToKeep = 0;

      var l = window.location;
      l.replace(
        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
        l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
        l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
        l.hash
      );

    </script>
  </head>
  <body>
  </body>
</html>

이 파일은 404.html이 반환될 때 현재 URL을 새로운 URL로 변경시키고 브라우저를 redirect 해주는 script를 포함하고 있다.

만약 커스텀 도메인을 사용하지 않고 username.github.io/repo-name 형식의 주소를 사용할 경우, pathSegmentsToKeep 변수의 값은 0이 아닌 1로 바꿔줘야 한다!

public/index.html

1. public 폴더 안의 index.html 파일의 </head> 태그 바로 전에 다음 내용을 추가한다.

(출처: https://github.com/rafgraph/spa-github-pages/blob/gh-pages/index.html#L58)

<!-- Start Single Page Apps for GitHub Pages -->
    <script type="text/javascript">
      // Single Page Apps for GitHub Pages
      // MIT License
      // https://github.com/rafgraph/spa-github-pages
      // This script checks to see if a redirect is present in the query string,
      // converts it back into the correct url and adds it to the
      // browser's history using window.history.replaceState(...),
      // which won't cause the browser to attempt to load the new url.
      // When the single page app is loaded further down in this file,
      // the correct url will be waiting in the browser's history for
      // the single page app to route accordingly.
      (function(l) {
        if (l.search[1] === '/' ) {
          var decoded = l.search.slice(1).split('&').map(function(s) { 
            return s.replace(/~and~/g, '&')
          }).join('?');
          window.history.replaceState(null, null,
              l.pathname.slice(0, -1) + decoded + l.hash
          );
        }
      }(window.location))
    </script>
    <!-- End Single Page Apps for GitHub Pages -->

이 script는 쿼리 스트링에 리다이렉트가 존재하는지 확인해서 다시 올바른 URL로 변환시키는 역할을 한다.

그리고 window.history.replaceState()를 사용하여 브라우저 히스토리에 추가하게 되는데, 브라우저는 새로운 URL을 로드하지는 않는다고 한다.

MDN 문서를 찾아보니, replaceState()를 사용하게 되면 URL 표시줄에는 새로운 URL이 표시 되지만, 브라우저가 그 파일이 있는지 확인하지는 않는다고 한다.

2. 프로젝트를 Github Pages로 재배포 한다.

테스트 해보니까 이제는 새로고침 해도 404 페이지가 보이지 않고 정상적으로 작동하게 되었다!! 😆

비록 내가 직접 코드를 작성해서 해결한건 아니지만, 이번에 사용한 코드에 대해 공부해서 나중에 활용할 수 있도록 해봐야겠다.

참고:

https://velog.io/@superstardanwoo/SPA%EC%97%90%EC%84%9C-%EB%92%A4%EB%A1%9C%EA%B0%80%EA%B8%B0-%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8-%EC%8B%9C-404-Not-Found-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0

https://chinsun9.github.io/2021/07/30/serve-react-app-simply/

저작자표시

'React' 카테고리의 다른 글

[React] sessionStorage 사용하기 (0)	2022.06.20
[React] npm-check-updates 사용하기 (0)	2022.06.07
[React] Naver 지역 API 사용하기 (0)	2022.04.30
[React] GitHub Pages로 배포하기 (0)	2022.04.15
[React] security vulnerabilities 보완하기 + GitHub Dependabot alerts 제거하기 (0)	2022.04.13

'React' Related Articles

Comments

Ann's log

[React] Github Pages로 배포하고 새로고침시 404 에러 해결 본문

[React] Github Pages로 배포하고 새로고침시 404 에러 해결

404.html을 사용하는 방법

'React' 카테고리의 다른 글

티스토리툴바