[Git] React 프로젝트 Github Pages 배포하기

리액트 CRA로 만든 프로젝트를 Github Pages 이용해 배포하는 방법을 기록하려 한다.

 

gh-page 플러그인을 이용하면 웹 사이트에 접속하는 것처럼 프로젝트를 웹 화면으로 접속할 수 있다.

 

아직 Github에 회원가입이 되어있지 않다면,

Github 가입 후 Github Page를 생성할 수 있다.

🔹 Github Page 생성

1. New repository

오른쪽 상단 + 버튼을 클릭하면 New repository를 생성할 수 있다.

 

📍 Repository name은 반드시 본인 아이디.github.io로 한다.

 

나의 경우에는 Github Page가 이미 존재하기 때문에 경고 메시지가 뜬다.

 

Github Page를 만들었다면,

리액트 프로젝트를 올릴 새로운 리포지토리를 생성한다.

🔹 Project Upload 

1. New repository

 

리포지토리를 만들면 아래와 같은 화면을 확인할 수 있다.

 

2. 파일 업로드

git init
git add README.md
git add .
git commit -m "커밋 메시지"
git branch -M master
git remote add origin https://github.com/깃허브 아이디/깃허브 저장소 이름
git push -u origin master

프로젝트의 터미널에서 명령어를 하나씩 입력한다.

push가 완료되면 저장소에서 파일이 잘 반영되었는지 확인한다.

 

3. gh-pages 모듈 설치

npm install gh-pages --save-dev

Github Pages로 프로젝트를 배포하려면 gh-pages 모듈을 설치해야 한다.

프로젝트 경로의 터미널에서 gh-pages 모듈을 설치한다.

 

4. package.json 수정

"homepage": "https://깃허브 아이디.github.io/깃허브 저장소 이름/",
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build", # build script를 호출해서 build 디렉토리 생성
    "predeploy": "npm run build" # gh-pages를 호출하고 build 디렉토리 업로드
},

package.json 파일에서 homepage와

scripts 부분에 predeploy와 deploy 요소를 추가한다.

 

5. 배포

npm run deploy

명령어를 실행하여 리액트 프로젝트를 배포한다.

 

6. 확인

리포지토리의 Settings > Pages에 들어간다.

Build and deployment > Branch가 master로 되어있다면 gh-pages 변경해 준다.

 

나의 경우는 gh-pages로 잘 바뀌어 있었다.

 

아까 만든 깃허브 페이지(https://깃허브 아이디.github.io/깃허브 저장소 이름/)에

접속해 보면 정상적으로 배포가 된 것을 확인해 볼 수 있다 !

 

 

배포 완료 ! 🔥