React 프로젝트 깃허브 배포(gh-pages)

리엑트 프로젝트의 배포를 위해 평소처럼 깃허브에서 deploy를 시키면 README파일이 나오는 걸 볼 수 있는데, 이번에는 깃허브에서 리엑트 프로젝트를 배포하는 방법에 대하여 포스팅을 해볼 것이다.

1. 우선, vs코드의 cmd창을 열어 배포에 필요한 gh-pages를 install해준다.
   npm i gh-pages -D
   

2. package.json파일에 "scripts"부분에

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

해당 코드를 추가해준다.

반점, 까먹지 말고 제대로 찍어주자!!

3. 아래로 내려보다보면

"devDependencies" :{
"gh-pages": "6.0.0"
}

이런 식으로 gh-pages의 버전 정보가 나와있는데, 이 이후에

,
"homepage": "http://아이디명.github.io/레포지토리명"

해당 코드를 추가해준다.
아이디명에는 자신의 깃허브 아이디, 레포명에는 자신의 프로젝트를 올린 레포지토리 명을 추가해주자.

4. 그 다음, 다시 cmd창을 열어 npm run deploy를 입력한다.
   
   위 이미지처럼 Published가 뜬다면 성공한 것..!

5. 이후부터는 기본적으로 깃허브 배포하는 것과 똑같이 Deployments에 github-pages클릭하여 확인해주면 된다.

+) 최신화 해주려면 github에 코드 업로드 후 npm run deploy 해주면 된다.