GitHub / React 배포 / gh-pages 사용하기

기존에 리엑트로 작업중인것을 깃헙페이지에 배포를 했는데 자꾸 흰화면만 뜨는것이다.

그래서 CRA를 새로 만들어 배포 했다. 기존 프로젝트에서 흰 화면만 뜨는것은 라우팅 설정 때문이였다.

라우팅 해결방법은 다음 포스팅에 적어볼 예정이다.

 

gh-pages 사용하여 react github에 배포하기

1. 깃헙 레포지터리 만들기

 

2. 프로젝트 업로드

vscode 프로젝트열고 터미널에 실행

git init 깃설치
git add * 스테이트 올리기
git commit -m 'first commit' 커밋메시지
git remote add origin https://github.com/drrd100/test.git 저장소연결
git push -u origin master 마스터로 푸쉬

업로드 확인

 

3. 프로젝트에 gh-pages 패키지 설치 후 빌드해준다.

 

프로젝트에 gh-pages 설치

npm install gh-pages --save-dev

/package.json

"homepage": "http://JIHYE-P.github.io/react-github-pages"

/package.json

"scripts": {
  //...
  "predeploy": "npm run build", 
  "deploy": "gh-pages -d build" 
}

후 터미널에서 npm run deploy 을 실행해준다.

빌드 후 게시하는 명령어인데 빌드 된 후에 깃헙에도 자동업데이트가 된다.

published 가 뜨면 완료 ~ 폴더트리에는 빌드 폴더가 생긴다.

깃헙 액션에 들어가면 업로드가 되고있는것을 확인 할 수있다.

 

깃헙액션에서 업로드가 완료되면 gh-pages 브랜치가 하나 더 생긴것을 확인할 수 있다.

자 이제 완성된 페이지에 들어가보자.

셋팅에 페이지를 들어가면 원래는 master 브랜치가 기본설정인데 자동을 gh-pages로 변경되어 있다.

밑에 나오는 URL이 완성된 페이지의 URL이다.

사륜안이 잘돌고 있다. 도메인도 신청하여 설정할 수있는것 같지만 나중에 해보도록하겠다.

중요한것은 이렇게는 잘되었는데 내 프로젝트를 올리면 안되는것이다.

대부분 글이 js,css 경로가 잘못됐다고 하던데 라우팅문제다. 처음에 검색을 잘못했다..젠장 ㅋㅋ

우리가 프로젝트를 만들때 react-router-dom 을 써서 흰 화면만 나온것이다.

react-router-dom 해결하려고 한참 찾았더니 나는 conneted-router도 쓰고 있던것.. 방법이 다르다..

라우팅 해결하고도 이미지도 안나오고 난리부르스였다.

다음 포스팅에 써야징 ㅎ-ㅎ