깃허브에서 리액트 프로젝트 버전관리 및 배포방법

다른 사람 저장소의 react프로젝트를 내 로컬 작업환경으로 가져올때

​

1- 내 작업폴더에 다른 사람 저장소 클론으로 복사

git clone 원격저장소주소

2- 저장소를 복사하고 나면 작업폴더안에는 node_module이 설치되어 있지 않음, --> 터미널창을 열어 모듈 설치

(package.json파일 안에 react개발환경 세팅을 위한 모든 기록이 담겨있으므로 npm install만 입력하면 해당 개발환경이 자동 설치되면서 세팅완료)

npm install

3- node_modules설치가 완료되면 npm start로 프로젝트 구동시작

npm start

---

 

해당 리액트 작업을 다시 내 원격 저장소에 새로 업로드할때

1- 다른사람의 원격 저장소 정보를 삭제

git remote remove origin

2- 내 원격저장소 새로 등록

git remote add origin 저장소 주소

---

 

원격 저장소에 있는 작업물 버전이 더 최신일때 로컬 저장소 동기화하기

1-내 로컬 저장소 작업물에서 원격저장소의 추가된 부분만 pull로 당겨 받으면 됨

git pull origin master

---

 

깃허브에 있는 리액트 프로젝트 빌드해서 깃허브 페이지로 배포

1- 로컬에서 깃허브 페이지 관련 모듈을 설치

npm install gh-pages --save-dev

2- 로컬에 있는 package.json파일을 넣어 깃허브 페이지 주소 등록

"homepage": "https://깃허브아이디.github.io/저장소이름",

3-다시 package.json파일에 깃허브 페이지 build 명렁어 등록 (하단 "Scripts"부분아 아래 코드 추가")

"predeploy": "npm run build", "deploy": "gh-pages -d build"

4- 기존 작업변경점 커밋찍어서 깃허브에 업로드 하고 터미널창에 아래 명령어 실행해서 배포

npm run deploy

5- 해당 깃허브페이지 주소로 접속하면 배포된 리액트 프로젝트를 확인가능