[React] create-react-app github 저장소에 푸시 & 배포 하기

 

github 저장소에 푸시하기

 

1. github에서 새로운 repository 생성 (이때 repository 이름은 리액트 폴더 이름과 동일해야 한다.)
   repository를 생성하면 기존 저장소를 푸시하는 방법이 설명되어 있다.

   

2. visual studio에서 새 터미널을 열고 npx create-react-app <폴더 이름> 생성
3. 생성한 폴더 열기 (이때 필요 없는 파일들은 삭제 후 커밋해 줘도 된다.)
4. 터미널을 열고 git remote add origin https://github.com/(본인 깃헙 아이디)/(저장소 이름).git 입력한다.
5. 만약 원격 브랜치인 main이 아니라 로컬 브랜치인 master로 설정되어 있다면,
   default 브랜치명을 main으로 변경해 주기 위해 git branch -M main명령어를 입력한다.
   (해당 포스팅에서 얘기한 데로 진행했다면 main브랜치로 되어있을 것이다.
   main 브랜치로 되어있다면 5번은 건너뛰기) 
6. git push -u origin main 명령어를 입력하면 저장소에 create-react-app이 올라간 걸 확인할 수 있다.

github 저장소에 배포하기

 

1. gh-pages란 gitnub pages에 업로드할 수 있게 해주는 패키지다. 
   터미널에 해당 명령어를 입력해 설치한다. (설치가 완료되면 package.json에서 확인할 수 있다.)
   

   npm install gh-pages --save-dev​

2.  package.json파일을 열고 다음과 같이 파일을 수정한다.
   현재 레포지토리의 이름을 확인하려면 git remote -v 명령어로 확인할 수 있다.
   "homepage": "https://(깃헙아이디).github.io/(저장소명)"
   

   

   아래 문구 그대로 추가( build 디렉터리를 배포하기 위한 설정)
   "predeploy":"npm run build",
   "deploy":"gh-pages -d build"
   
   

   

3. 프로젝트 배포: npm run deploy
   해당 명령어는 빌드가 완료된 후, package.json 파일에 정의된 스크립트를 실행한다.
   (predeploy 스크립트는 deploy 스크립트가 실행되기 전에 자동으로 실행되며, 프로젝트를 빌드한다.
   gh-pages -d build는 build 디렉터리의 내용을 gh-pages 브랜치로 배포한다.)
   이 과정을 통해 gh-pages 브랜치에 빌드된 파일이 배포되고,
   GitHub Pages에서 호스팅 된다.
   배포된 사이트는 https://(깃헙아이디).github.io/(저장소명) URL에서 확인할 수 있다.

URL로 접속해 페이지가 뜨는지 확인할 경우
3분에서 10분 정도 소요되니 조급해하지 말자:)

 

이후 프로젝트 코드를 수정하거나, 업데이트가 필요한 경우

npm run deploy를 입력하여 자동빌드&배포하면 된다.