[ReactJS] React에서 Github으로 배포하고 주소 따오기 !! (총정리) _ gh pages

1. Node JS 설치

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

2. 터미널에서 버전 확인

node -v

npx

 

3. 새 폴더 만들기

npx create-react-app 폴더명

 

 

4. 해당 폴더로 들어가서 npm start 치면 웹페이지 생성됨

 

5. 불필요한 파일 다 제거

 

.....

 

6. 배포 

gh pages 

- gh pages 설치 (깃허브 페이지에 업로드하기 쉽게 만드는 패키지다)

npm i gh-pages

 

- package.json 으로 가서 추가 (맨 뒤 대괄호들 사이에)

 },
"homepage": "http://내깃허브이름.github.io/레포지터리이름"
}

 

- packages.json 에서 deploy, predeploy 추가해주기

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    
    
	"deploy": "gh-pages -d build",
	"predeploy" :  "npm run build"
  },

 

npm run build를 해주면 deploy 할 시 자동으로 빌드해줌, 그리고 deploy를 하면 깃헙 페이지에 그 빌드한 폴더를 표출하게 해줌

npm run deploy

 

이렇게 하고 github.io 페이지로 들어가보면 그 사이트가 표출됨 !!!