9월 30일 (목) 배포 (react)

Southbig·2021년 9월 30일

TIL

Github Pages

repository 생성
remote로 repository에 추가

or push an existing repository from the command line
git remote add origin <레파지토리 이름>
Gitbub에 있는 원격의 주소를 나의 로컬에 있는 Git 파일과 연결 시켜준다
git add . 또는 git add *
모든 파일 추가
git commit -m<메세지>
git push origin <branch>

open ~/.gitconfig
user 정보 확인 가능

github page의 settings
GitHub Pages목론에서 branch 설정 후 저장,
배포해서 얻게될 주소를 받을 수 있다

Step 1: Add homepage to package.json

Open your package.json and add a homepage field for your project:

"homepage": <"홈페이지 이름">,

Step 2: Install gh-pages and add deploy to scripts in package.json

Now, whenever you run npm run build, you will see a cheat sheet with instructions on how to deploy to GitHub Pages.

npm install --save gh-pages

yarn add gh-pages

Add the following scripts in your package.json:

"scripts": {
추가 -> + "predeploy": "npm run build",
추가 -> + "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",

yarn strt - 프로젝트 실행
yarn build - 사용자에게 배포할 수 있는 소스코드가 만들어 진다

만들어진 build를 github에 배포하게 된다

Step 3: Deploy the site by running npm run deploy

npm run deploy

Step 4: For a project page, ensure your project’s settings use gh-pages

Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:

<이미지 출처 react 공식 홈페이지>

이 브렌치에는 내가 빌드한 것이 올라가 있기때문에 설정이 필요

master -> gh-pages 로 변경

주의사항

Notes on client-side routing
GitHub Pages doesn’t support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42, where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:

You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Read more about different history implementations in React Router.

Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your index.html page with a custom redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in this guide.

즉, 현재는 리엑트라우터에서 제공하는 브라우저 히스토리가 지원되지 않는다
히스토리 api를 hash로 바꾸거나,
에러페이지를 만들어서 수동적으로 redirection을 해줘야 한다