https://create-react-app.dev/docs/deployment/#building-for-relative-paths
클릭 한대로 따라하면 새로고침 404오류 해결해줌.
https://github.com/rafgraph/spa-github-pages/blob/gh-pages/index.html 참고.
사용법
이것은 GitHub Pages를 사용하여 단일 페이지 앱을 배포하는 간단한 솔루션입니다. React Router의 와 같은 방식으로 React 단일 페이지 앱을 쉽게 배포하거나 다른 프론트엔드 라이브러리 또는 프레임워크로 개발된 단일 페이지 앱을 배포할 수 있습니다.
필요한 이유:
GitHub Pages는 단일 페이지 앱을 기본적으로 지원하지 않습니다. 예를 들어, example.tld/foo와 같은 주소로 새로고침이 발생하면, GitHub Pages 서버는 /foo에 대한 정보를 알지 못하기 때문에 404 오류를 반환합니다.
작동 방식:
GitHub Pages 서버가 frontend routes로 정의된 경로(example.tld/foo와 같은)로 요청을 받으면, 커스텀 404.html 페이지를 반환합니다. 이 커스텀 404.html 페이지에는 현재 URL을 가져와 경로와 쿼리 문자열을 쿼리 문자열로 변환하고, 그런 다음 브라우저를 쿼리 문자열과 해시 프래그먼트만 포함하는 새 URL로 리다이렉트하는 스크립트가 포함되어 있습니다. 예를 들어, example.tld/one/two?a=b&c=d#qwe은 example.tld/?/one/two&a=bandc=d#qwe으로 변환됩니다.
GitHub Pages 서버는 새로운 요청인 example.tld/?/...을 받아들이고, 쿼리 문자열을 무시하고 index.html 파일을 반환합니다. index.html 파일에는 단일 페이지 앱이 로드되기 전에 리다이렉트가 있는지 확인하는 스크립트가 포함되어 있습니다. 리다이렉트가 있으면 적절한 URL로 변환하여 window.history.replaceState(...)를 사용하여 브라우저의 기록에 추가하지만, 브라우저는 새로운 URL을 로드하지 않습니다. 단일 페이지 앱이 로드되면 index.html 파일에서 정상적인 URL이 브라우저의 기록에 남아 있으며, 단일 페이지 앱이 이에 따라 라우팅됩니다. (이러한 리다이렉트는 새로고침으로 페이지를 로드할 때에만 필요하며, 로드된 후에는 단일 페이지 앱 내에서 이동할 때는 필요하지 않습니다).
사용 방법:
본 레포지토리에서 404.html 파일을 그대로 사용하기 위해 복사합니다.
만약 프로젝트 페이지 사이트를 설정하고 커스텀 도메인을 사용하지 않는다면 (예: 사이트 주소가 username.github.io/repo-name인 경우), 404.html 파일에서 pathSegmentsToKeep를 1로 설정해야 합니다. 이렇게 하면 리다이렉트 후에도 /repo-name이 경로에 유지됩니다. 또한 React Router를 사용하는 경우 BrowserRouter에 basename="/repo-name"과 같이 리포지토리 이름을 basename으로 설정해야 합니다.
index.html 파일에 있는 리다이렉트 스크립트를 복사하여 index.html 파일에 추가합니다. 리다이렉트 스크립트는 반드시 index.html 파일 내의 단일 페이지 앱 스크립트보다 앞에 위치해야 합니다.
자세한 사용 방법은 다음과 같습니다.
React 단일 페이지 앱을 GitHub Pages로 호스팅하기 위해 이 레포지토리를 보일러플레이트(초기 구조)로 사용합니다. 이 보일러플레이트는 TypeScript로 작성되었지만 JavaScript 파일도 지원합니다. 이전에 JS로 작성되었으며, JS 전용 보일러플레이트를 원한다면 버전 6을 사용할 수 있습니다.
이 레포지토리를 클론합니다. ($ git clone https://github.com/rafgraph/spa-github-pages.git)
.git 디렉토리를 삭제합니다. (spa-github-pages 디렉토리로 이동한 다음 $ rm -rf .git 명령을 실행합니다.)
레포지토리를 초기화합니다.
새 레포지토리로서 이 보일러플레이트를 사용하는 경우:
spa-github-pages 디렉토리에서 $ git init 명령을 실행한 다음 $ git add .와 $ git commit -m "Add SPA for GitHub Pages boilerplate" 명령을 실행하여 새 레포지토리를 초기화합니다.
기존 레포지토리의 gh-pages 브랜치로서 이 보일러플레이트를 사용하는 경우:
기존 레포지토리에서 새로운 gh-pages 브랜치를 만들고 이동합니다. ($ git checkout --orphan gh-pages) 이 단계에서는 gh-pages 브랜치가 브랜치 목록에 표시되지 않습니다. 첫 번째 커밋을 수행해야 브랜치가 목록에 나타납니다.
기존 레포지토리의 디렉토리에서 .git 디렉토리를 제외한 모든 파일과 디렉토리를 삭제합니다. ($ git rm -rf .)
클론한 spa-github-pages 디렉토리의 모든 파일과 디렉토리(숨겨진 점 파일 포함)를 기존 프로젝트의 빈 디렉토리로 이동합니다. ($ mv path/to/spa-github-pages/{.[!.],}* path/to/your-projects-directory)
$ git add .와 $ git commit -m "Add SPA for GitHub Pages boilerplate"를 실행하여 gh-pages 브랜치를 초기화합니다.
(선택사항) 커스텀 도메인 설정하기 - GitHub Pages에서 커스텀 도메인 설정 방법을 따릅니다.
커스텀 도메인을 사용할 경우 CNAME 파일을 커스텀 도메인으로 업데이트합니다. https://를 포함하지만 서브도메인은 필요에 따라 추가합니다. 예를 들어 www 또는 your-subdomain을 사용합니다.
DNS 제공자에서 CNAME 및/또는 A 레코드를 업데이트합니다.
$ dig your-subdomain.your-domain.tld 명령을 실행하여 DNS 설정이 제대로 되었는지 확인합니다. (https://는 포함하지 않습니다.)
(선택사항) 커스텀 도메인을 사용하지 않을 경우:
CNAME 파일을 삭제합니다.
User 또는 Organization Pages 사이트를 만드는 경우, 더 이상 할 필요가 없습니다.
Project Pages 사이트를 만드는 경우 (예: 사이트 주소가 username.github.io/repo-name인 경우):
404.html 파일에서 pathSegmentsToKeep를 1로 설정합니다.
index.html의 자산에 repo-name을 절대 경로에 추가합니다. 예를 들어, bundle.js의 src를 "/repo-name/build/bundle.js"로 변경합니다.
React Router에서 basename을 /repo-name으로 설정합니다. 예:
package.json의 start 스크립트에서 --open을 --open-page repo-name으로 변경합니다.
webpack.config.js에서 publicPath에 '/repo-name/build/'를 추가합니다.
historyApiFallback 리다이렉트를 rewrites: [{ from: //repo-name/[^?]/, to: '/404.html' }]로 변경합니다.
npm install 명령을 실행하여 React 및 기타 종속성을 설치하고, npm run build 명령을 실행하여 빌드를 업데이트합니다.
$ git add .과 $ git commit -m "Update boilerplate for use with my domain" 명령을 실행한 다음 GitHub에 푸시합니다. (Project Pages의 경우 $ git push origin gh-pages, User 또는 Organization Pages의 경우 $ git push origin main)
이제 원하는 대로 당신의 사이트를 만들어 보세요.
자신만의 React 컴포넌트를 작성하고, 자신만의 라우트를 생성하며, 스타일을 추가하세요.
index.html의 title과 404.html의 title을 사이트의 제목으로 변경하세요.
index.html의 favicon 링크와 favicon 디렉토리를 삭제하세요.
필요에 따라 robots.txt와 sitemap.txt를 업데이트하거나 삭제하세요. (SEO 섹션 참조)
readme, license, package.json을 원하는 대로 수정하거나 삭제하세요.
변경 사항을 로컬에서 테스트하려면 개발 환경 정보를 참조하세요.
변경 사항을 GitHub Pages에 게시하려면 $ npm run build (이는 프로덕션용으로 webpack -p를 실행합니다) 명령을 실행하여 빌드를 업데이트한 다음 $ git commit 및 $ git push를 실행합니다.
메인 브랜치의 /docs 폴더에서 호스팅하기 - 루트 폴더 대신 /docs 폴더에서 사이트를 제공하면서 소스 코드는 루트 폴더에 유지할 수도 있습니다.
위의 지침을 따른 후 /docs 폴더를 루트에 만들고, index.html, 404.html 및 /build 폴더를 /docs로 이동합니다.
package.json의 start 스크립트에 --content-base docs/를 추가합니다.
webpack.config.js에서 output 경로를 path: ${__dirname}/docs/build로 변경합니다.
GitHub에서 레포지토리 설정으로 이동하여 GitHub Pages의 소스로 /docs 폴더를 선택합니다.
개발 환경:
로컬에서 변경 사항을 테스트하기 위해 webpack-dev-server를 포함하였습니다. 이를 실행하려면 $ npm start를 실행하세요. webpack-dev-server는 소스 파일이 변경될 때마다 자동으로 새 번들을 만들고 메모리에서 번들을 제공하여 파일로 디스크에 저장된 번들을 볼 수 없습니다.
$ npm start는 package.json의 start 스크립트를 실행합니다. 이 스크립트는 $ webpack-dev-server --host 0.0.0.0 --disable-host-check --open을 실행합니다.
--host 0.0.0.0 --disable-host-check를 사용하면 다른 장치에서 http://[YOUR COMPUTER'S IP ADDRESS]:8080으로 로컬 네트워크에서 사이트에 접근할 수 있습니다.
--open은 자동으로 브라우저에서 사이트를 엽니다.
webpack-dev-server는 index.html을 http://localhost:8080에서 제공합니다. (포트 8080은 기본값입니다). 번들은 메모리에서 제공되며 브라우저에서 직접 열리지 않습니다. 서버에서 index.html을 로드해야 스크립트가 로드됩니다.
