frontendreact

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

create-react-app, deploy, frontend, react
Views: 231

시작하기

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

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

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

1
2
3
4
5
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/{username}/{repo-name}.git
git push -u origin master

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

1
2
cd react-deploy-pages 
npm install gh-pages --save-dev

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

package.json
1
2
//...
"homepage": "http://flamingotiger.github.io/react-deploy-pages"

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

package.json
1
2
3
4
5
"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

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

1
2
3
4
5
6
git add .
git commit -m "React 프로젝트 GitHub Pages로 배포"
git push origin master

// 한줄로 쓰기
git add . && git commit -m "React 프로젝트 GitHub Pages로 배포" && git push origin master

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

만약 사이트에서 readme.md 파일 내용만 나올 경우에 GitHub Pages의
Source부분에서 gh-pages branch로 변경하면 사이트가 정상적으로 배포됩니다.

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

Share