gh-pages로 react 작업물 배포하는 법

 

gh-pages로 react 작업물 배포하는 법

 

 

---

 

 

 

 

 

 

---

👇 간단한 페이지는 요 방법으로 배포!

 

https://0119eunji.tistory.com/70

깃 페이지에서 배포하는 법

---

 

 

 

들어가기 전에

 

 

작업물과 깃이 반드시 연결 되어있어야하고

레포 설정은 꼭 public !

 

 

 

 

 

 

 

 

깃 배포하는 법

 

 

 

Github Pages는 쉽게 배포할 수 있도록 gh-pages 라이브러리를 제공한다.

 

 

로컬에서 모든 작업이 끝난 main 으로 이동 후

요 명령어를 이용해 라이브러를 먼저 설치한다

 

npm install gh-pages --save-dev

 

 

후에 package.json 파일로 들어간다

 

 

 

 

 

 

👇 페이지 url 설정

 

"homepage": "https://깃아이디.github.io/해당레포이름",

 

 

❗️반드시 해당 깃 아이디와 레포 이름 적어야 배포됨! 

 

 

 

 

 

👇 빌드 설정

 

    "build": "react-scripts build && cp build/index.html build/404.html",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"

 

 

 

 

 

 

 

👇 react-router 사용시 라우터에 basename 설정

 

 

basename 을 추가하면서 기본 url 설정한다.

라우터에게 기본 url을 제공하여 “/”이 “/loginTodo”로 이동시키는 것!

 

이렇게 하면 react 프로젝트 배포시 생기는 라우팅 오류를 없앨 수 있다

 

 

 

 

 

 

저장 후 터미널에 차례대로

 

npm run build
npm run deploy

 

명령어를 입력한다

 

 

 

 

 

 

후에 에러 코드 없이 success 되었다는 메세지가 뜨면 성공!

 

이제 package.json 파일의 homepage 값으로 넣어주었던 url 에 들어가서 배포가 완료 되었는지 확인하면 된다 🤗

 

 

 

 

 

 

 

 

❗️ 배포가 잘 되었는지 깃에서 확인하려면

 

 

 

배포한 해당 레포에 들어가서

 

 

 

 

 

1. 브랜치 gh-pages 생성되었는지 확인

 

2. action에 들어가 build 잘 되었는지 확인

 

 

 

 

 

 

3. setting -> pages 에서 branch 가 gh-Pages 로 잘 설정 되어있는지 확인

 

 

 

 

안 되어 있을시 

 

gh-pages 로 설정 후 save 버튼을 누르면

빌드 후, 같은 페이지에서 새로 고침하면 url 이 상단에 뜬다 :)