React 프로젝트 깃허브 페이지로 배포하는 방법

1. 깃허브 저장소 만들기

GitHub에 로그인 후 .github.io로 새로운 저장소를 생성한다.

 

2. 리액트 프로젝트 생성 및 패키지 설치

npx create-react-app 프로젝트명
cd my-app

위에 코드로 리액트 프로젝트를 생성한다

이미 리액트 프로젝트가 있으면 생략 가능

npm install gh-pages --save-dev

React 프로젝트에서 GitHub Pages로 배포하려면 gh-pages 패키지를 설치해야 한다.

위에 코드를 터미널에 적어 패키지를 설치해준다

 

3. 프로젝트 설정 파일 수정

"homepage": "https://<username>.github.io"

package.json 파일의 맨 위에 homepage 속성을 추가한다.

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

package.json 파일의 scripts에 predeploy와 deploy 스크립트를 추가한다

 

4. Github에 프로젝트 푸시하기

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/<username>/<repo-name>.git
git push -u origin main

프로젝트 폴더에서 Git을 초기화하고, 파일을 GitHub에 푸시한다.

npm run deploy

deploy 명령어를 실행하여 빌드된 파일을 GitHub Pages에 배포한다.

 

5. Github Pages 활성화

GitHub에서 저장소로 이동한 후, Settings 탭을 클릭

Pages 섹션으로 스크롤하여 Source를 gh-pages 브랜치로 설정하면 끝

 

6. 수정 후 재배포시

git add .
git commit -m "수정 사항을 추가했습니다"
git push origin main

프로젝트 수정 후 재배포하려면 먼저 수정사항 깃에 올려서 커밋해준다

 

npm run deploy

그리고 gh-pages 브랜치에 배포해야 한다.

build 명령어는 predeploy 스크립트에서 자동으로 실행되기 때문에 따로 수동으로 실행할 필요는 없다.

즉, npm run deploy만 실행하면 빌드 후 배포까지 한 번에 진행된다