리액트로 만든 포트폴리오 Github로 배포하기

※ 필수조건 : 처음 만들때 반드시 npx create-react-app [앱 이름] 으로 만들것. 만약 이미 만들어둔 프로젝트가 CRA(create-react-app)을 이용하여 만든 것이 아닐 경우 검색을 통해 다른 방법으로 배포하자.

 

(이미 만들어 둔 repository가 있을 경우 단계 4로)

 

 

1. react 프로젝트 생성

$ npx create-react-app [폴더명]

$ cd [폴더명]
$ npm run start   # 앱 작동 되는지 확인

 

2. Github repository 생성

Github으로 들어가 빈 repository를 생성

 

 

3. Github 연결

$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin [repository주소]
$ git push -u origin master

 

4. gh-pages 배포

$ npm install -g gh-pages  # gh-pages 설치. 안될시 sudo

 

5. package.json 수정

// script에 아래 두 줄 추가
"deploy": "gh-pages -d build",
"predeploy": "npm run build"

// script 끝난 후 아래에 hompage 추가
"homepage": "http://[github 계정].github.io/[프로젝트 이름]"
"homepage:: "http://ksy9926.github.io/Portfolio-study"

 

6. 빌드

$ npm run deploy

완료시 Published라고 뜬다.

 

7. 배포 확인

github로 이동후 branch에 gh-pages가 추가되었는지 확인

8. pages 연결

repository에서 Settings 클릭.

스크롤을 내려 Github Pages 부분을 찾는다.

Source의 Branch가 gh-pages의 root로 되어있지 않다면 설정을 해준 후 save 버튼을 누른다.

초록색 체크표시가 뜬다면 성공적으로 배포된 것이다!

 

9. 사이트 확인

이제 실제 배포된 사이트로 들어가 확인해보자!