[React] 깃허브 페이지(gh-pages)에 배포 하기

깃허브 페이지(gh-pages)에 배포 하기

1. gh-pages 설치

npm i gh-pages

2. 빌드 말기 (=브라우저가 이해할수 있는 코드로 최적화)

npm run build

- build 폴더 생성이 되고
- 이제 build 폴더를 github 페이지에 push 해야함

3.  package.json 막줄에 홈페이지 주소 추가

"homepage": "https://[깃허브 아이디].github.io/movie-app/[깃허브 레파지토리 명]"

 

4. package.json에 배포 script 추가

"deploy": "gh-pages -d build",    //빌드 한것(build폴더)을 gh-page에 배포해라
"predeploy": "npm run build" //배포 전에 빌드를 해라

 

-predeploy 스크립트를 만들면 deploy 스크립트를 실행 할때 predeploy 스크립트를 실행한 다음에 배포한다.

 

 

5. 배포 
npm run deploy

 

6. 5~10분 정도 기다렸다가  3번에서 입력한 주소로 접속

 

 

*참고

https://nomadcoders.co/react-for-beginners/lectures/3293

All Courses – 노마드 코더 Nomad Coders