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

시작하기

리액트 프로젝트를 github pages를 이용해서 배포해보도록 하겠습니다.
프로젝트 생성방법은 이전포스트(create-react-app 타입스크립트 사용하기)를 참고하면 됩니다.

깃헙에서 저장소를 하나 만듭니다.
저는 react-deploy-pages라는 이름의 저장소를 만들었습니다.

저장소

create-react-app react-deploy-pages --typescript
프로젝트를 생성합니다.

프로젝트를 저장소에 업로드 해줍니다.

프로젝트폴더로 이동하고, 프로젝트에 gh-pages 패키지를 설치해줍니다.

package.json

json 파일내부에 홈페이지 주소를 넣어줍니다.
깃헙 유저이름과 저장소의 이름을 다음과 같이 넣어주면 됩니다.
양식은 http://{username}.github.io/{repo-name} 입니다.

package.json

스크립트 부분에 predeploy와 deploy를 추가해줍니다.
그리고나서 npm run deploy를 실행합니다.

사이트 주소 url을 확인하고 싶을때 저장소의 setting > options로 가면 확인할 수 있습니다.

URL

사이트로 접속하면 다음과 같이 리액트 프로젝트 화면이 나옵니다.

결과물

 

[출처] https://flamingotiger.github.io/frontend/react/create-react-app-deploy/

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