[GitHub] Github Pages (github.io)를 이용해 React JS 배포하기

🍀 Github Pages (github.io)를 이용해 React 프로젝트를 배포해보자.
우선, 나는 노마드코더 커리큘럼을 따라 수강했기 때문에 이미 github.io가 만들어진 상태였고, 이미 레포지토리도 생성해놨었다.
이미 홈페이지를 만든 상태에서 추가를 하려니 경로가 이상하게 꼬여서 예전에 포기했었는데 해결방법을 알게 되어 글을 작성해본다!

1. Github page 생성

✨ 메인 디렉토리 URL : https://{본인아이디}.github.io/
✨ 서브 디렉토리는 Repository를 새로 생성해도 되고, 원하는 Repository에 코드를 추가해도 된다. 나는 기존의 레포지토리에 코드를 추가해서 배포하였다.

반드시 {본인아이디}.github.io로 Repository 생성

2. Github page 패키지 설치

배포하고자하는 서브 디렉토리에 패키지를 설치하면 된다.

npm install --save gh-pages

3. Package.json에 코드 추가

폴더내에 있는 package.json 파일에 코드를 추가해준다.

✨ 1) "homepage": "https://본인아이디.github.io/"
✨ 2) "script" 하위에 "deploy": "gh-pages -d build","predeploy": "npm run build"

"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"
  },

4. 배포하기

npm run deploy 명령어를 입력하여 build 파일을 만든다.

Published 문구가 뜨면 성공적으로 배포가 완료된 것!

5. Build 폴더 내 파일 업로드

처음부터 github.io 페이지를 만든다면 이 과정은 안해도 되지만, 나는 이미 깃허브에 폴더가 올려져 있어서 다음과 같은 과정을 따랐다.

🍀 4번 명령어를 입력하면 build 파일이 생기는데, 파일 전체가 아닌 폴더 들만 모두 github.io Repository에 올리면 된다.

6. github.io 페이지 확인

github.io Repository에 push 한 후 https://본인아이디.github.io/ 에 접속해서 페이지가 제대로 배포 되었는지 확인해보자🔥

바로 반영은 안되고, Published 될 때까지는 시간이 조금 소요되므로 기다렸다가 접속하면 된다!