[React] github pages 배포

학습일 : 2023. 03. 22

---

github pages 배포를 해볼까 한다.

---

 

1. 깃허브 프로젝트가 있는 repo를 public으로 만든다

 

 

2. 터미널에서 gh-pages 설치

npm install gh-pages --save-dev

 

 

3. package.json으로 가서
마지막에서 두번째 중괄호 다음에 , 를 찍고
"homepage": "https://깃허브유저네임.github.io/repo이름/"
를 적어준다.

그 다음은
다른 script를 하나 만들어 줄건데,

package.json 파일의 "scripts" 부분 맨 밑에
"eject": "react-scripts eject" 다음에 , 를 찍고

"deploy": "gh-pages -d build",
"predeploy": "npm run build"

를 적어준다.

deploy가 하는 일은
우리가 방금 설치한 gh-pages를 실행시키고
build라는 디렉토리를 가져가는 역할을 한다.
predeploy는 npm run build를 실행시킨다.

 

 

 

 

4. npm run deploy 엔터

 

 

 

5. 그 repo 안 setting 안 pages 에서 Branch를 gh-pages로 하고 /(root) 로 설정한 후 save 해주기

---

 

 

 

터미널에 다시
npm run deploy 엔터치면

gh-pages가 build 폴더를 "https://깃허브유저네임.github.io/repo이름/"
여기 적어놓은 웹사이트에 업로드시킨다.

 

404가 뜨겠지만
5~10분 정도 기다리면 배포가 완료된다. :)

 

 

배포 완 :>