[React] React 작업물을 github.io (github page)로 배포하기

개인용 프론트엔드 개발 포트폴리오를 만들다 보니 배포에 문제가 있어, 간단하게 github page를 활용하여 배포해보기로 했다.

이전에 포트폴리오를 작업할때는 react build 파일을 js, css형식으로 수정하여 github 새폴더안에 넣고 배포하는 방식으로 작업하였으나, react-router를 사용하여 작업한 포트폴리오라 해당 방법은 작업이 수월하지 않았다.

1. git에 작업한 파일이 있을 경우 => git clone <appname>으로 복제 

(새로 생성 => terminal 에서 npx create-react-app <appname> 생성 후 git init)

2. 새 repository 생성

:github >repositories > new버튼 클릭 > repository 이름 생성 후 guide를 따라 생성된 폴더에 git 주소를 remote 해준다.

=>git remote origin already exits 에러 발생시 (git remote rm origin) 기존 remote 주소를 끊어주고 다시 실행한다.

git add . // 변경 코드 add

git commit -m "commit message"  // 커밋 메시지추가

git branch -M main  // main branch 만들기

git remote add origin [github repository 주소] // 본인 github repository 연결

git push -u origin main // push

3.npm start로 작동 여부 확인한후, github 의 github pages 페이지에서  branch를 main으로 설정 후 save 

 5~10분 정도 기다리면 상단에 https://사용자아이디.github.io/ 이 생성 된다.

4.React 프로젝트로 돌아와 gh-pages 패키지 설치하고,

package.json에 명령어 입력 및 3에서 생성된 hompage주소와 scrits 명령어 2가지를 추가 기입한다. (하단 참고)

npm i -save gh-pages

{
  "homepage": "https://xxx.github.io/yyy/",
  "name": "yyy",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
[...]
  },
  "scripts": {
	[...]
    "predeploy":"npm run build",
    "deploy":"gh-pages -d build"
  },
[...]
}

5.npm run deploy 로 배포후 5~10분 정도 기다린 후 배포한 github.io 주소로 들어가면 화면을 확인할 수 있다.

***참고: 

-배포 후 read.me 파일만 불러오는 경우 => read.me 삭제

-routes를 읽지 못하는 경우 : BrowserRouter를 HashRouter로 변경 ( github 는 브라우저 기록을 지원하지 않음)