React - Github-pages에 배포하기

목차

 

• Github pages
• 생성 방법
• 마무리

 

Github pages

 

 

Github-pages는 정적 사이트 호스팅 서비스로 HTML, CSS, JavaScript 파일을 깃허브 레포지토리에서 바로 가져와 빌드 과정을 거치고 웹 사이트를 배포하는 서비스이다.

 

개발한 프로젝트를 누구나 접속해서 볼 수 있도록 호스팅 서비스를 제공한다.

 

 

 

 

생성 방법

 

1. 레포지토리에 pages 생성

 

배포하려는 프로젝트 레포지토리 상단 우측에 settings 클릭

 

 

settings -> pages

 

 

우선 main 브랜치로 설정 후 'save' 클릭

 

 

새로고침하면 사이트가 배포된 주소가 나옵니다.

 

 

사이트를 배포하였으나 프로젝트와 연동되어 있지 않아 404에러가 뜨거나 Readme 파일이 출력됩니다.

 

 

2. 프로젝트와 연동

 

React 프로젝트에 gh-pages 설치

 

npm install gh-pages --save-dev

 

package.json 설정

 

homepage, predeploy, deploy를 작성한다.

 

hompage : 배포할 주소

predeploy : 배포 전 빌드

deploy : 실제 gh-pages에 배포

 

 

package.json을 모두 작성했으면 npm run deploy 실행

 

npm run deploy를 실행할 경우 'npm run build'가 먼저 실행되어 배포에 필요한 파일들이 생성되고 github-pages에 배포까지 됩니다.

 

 

 

Github-pages 브랜치 변경

 

배포가 완료되었으면 Github-pages 사이트가 gh-pages에서 빌드되도록 브랜치를 변경해야합니다.