[React] 프로젝트를 Github Pages에 배포하는법

이번 시간에는 그 동안 다루지 못한 Github Pages를 React에서 배포하는 방법을 알아보도록 하겠습니다.

 

제가 지금 현재 Windows버전으로 진행중인데 방식은 동일하니 참고하시면 되겠습니다.

 

우선 먼저 배포할 프로젝트를 준비해주세요.

 

1. Github 저장소 만들기

먼저 자신의 Github 저장소를 하나 생성해줍시다.

저장소 이름, 설명을 작성후 Create repository 클릭

 

첫번째 comman line 부분을 오른쪽상단 아이콘을 클릭해 복사 or 아래 명령어대로 차례대로 입력

git init 
git add *
git commit -m "first commit"
git remote add origin https://github.com/Koras02/react-github-pages.git
git push -u origin master

명령어에 간단한 설명을 붙이자면

 

git init - 프로젝트에 git설치

git add * - .gitnore에 있는 파일 제외한 모든 파일 올리기

git commit -m "first commit" - commit 메시지 작성

git remote add origin https://github.com/Koras02/react-github-pages.git - git 저장소 연결

git push -u origin master- git master으로 push

 

 

push 가 완료되면 github 페이지로 돌아가서 새로고침하면 소스들이 올라가 있습니다.

 

2. Github 페이지 배포하기

먼저 프로젝트 gh-pages 패키지를 설치해주세요

npm install gh-pages --save-dev && yarn add gh-pages

설치가 완료되면 프로젝트 내 package.json 파일을 열어 "homepage" 주소를 추가해줍니다.

// ....
"homepage" : "http://Koras02.github.io/react-github-pages

형식은 http://{사용자 이름}.github.io/{저장소 이름} 으로 작성합니다.

 

그다음 script 부분에 predeploy, deploy 를 추가해줍니다.

 

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

저장후 터미널 창을 열고 npm run deploy & yarn deploy 를 실행해 줍니다.

 이렇게 deploy가 성공했습니다. 직접 github pages를 확인하기 위해 본인이 push 했던 레포지토리로 가서

 Settings -> Options에서 Github Pages 에서 확인하실수 있습니다.

 (사이트에서 README.md 파일 내용이 나올 경우 Github Pages의 Source 부분 gh-pages branch로 변경시

 사이트가 정상적으로 배포됨

 이렇게 뜬다면 배포 성공!

3. 배포시 주의사항 ( 2021.10.08 )

다른 프로젝트를 배포하는 과정에서

homepage : "http://{사용자 이름}.github.io/{저장소 이름}"로 설정된 주소로 접속시 404 페이지가 나올 경우

http://{사용자이름}.github.io/{저장소이름}/index.html 로 접속하면 이상없이 페이지가 나온다.

참고

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