React Github Pages 배포하기!

전에 JS와 동일하게 Github Pages를 배포하였는데 ReadMe가 나와서 당황하셨죠?

기본적으로 pages는 최상위 폴더(root)의 index.html을 가리킵니다. 해당 파일이 존재하지 않으면 README.md를 띄워주게 됩니다.

React는 기존 JS때와 달리 Github Pages를 배포하기 위해서는 몇가지 단계가 필요합니다!!

1. GitHub Pages 배포하기

JS에서 했던것과 같이 new repository를 만들고 Github Pages를 배포 합시다!
Github Pages를 만들 었다면 3분정도 후 다음과 같이 주소가 뜹니다.

2. github page 패키지 설치

VScode실행후 터미널에 밑의 코드를 입력한후 패키지를 추가합니다!

npm install gh-pages --save-dev

3. package.json 파일에 홈페이지 주소 추가

1번에서 만들었던 Github Pages주소를 다음과 같이 추가합시다!

"homepage" : "배포할 주소"

4. script 부분에 deploy, predeply 추가

계속해서 package.json에 밑의 코드를 다음과 같이 추가합니다!

"scripts" : {
	"predeply" : "npm run build",
    "deploy" : "gh-pages -d build"
},

위와 같이 추가를 다하셨다면 GIthub에 지금까지 한 수정사항을 push해줍시다!!

5. npm 배포

git push를 하셨다면 터미널에 밑의 코드를 입력해줍시다!!

npm run deploy

잘 되었다면 위와같이 나옵니다!

6. github setting pages Branch 수정하기

다음과 같이 순서대로 해주세요!

7. 완료!!

6번까지 잘 따라오셨다면 페이지가 정상적으로 배포가 되어 있을 겁니다!
배포후 다시 수정사항을 github page에 적용하고 싶으시다면 기존 JS에서 했던 방법에서 한가지 추가사항이 있습니다!
JS에서는 수정사항을 git push만 해주면 자동적으로 수정사항이 적용 되었습니다.

React에서는 git push를 한후에 5번에서 했던 npm run deploy을 터미널에 입력해야 수정사항이 배포한 사이트에 적용됩니다!