React 프로젝트 github-pages로 배포하기

1. github 레파지토리 생성

github-pages로 만들 레파지토리를 생성해 줍니다.

 

2. 프로젝트 생성 및 git push

# 설치
npx create-react-app [프로젝트 명] --template typescript

# 이동
cd 프로젝트명

# git push
git init # git 초기화
git status # 프로젝트 상태보기
git add . # 프로젝트 전체 추가하기
git commit -m "내용" # 프로젝트 "내용"으로 커밋하기
git remote add origin [github 레파지토리 주소] # 깃헙 저장소 등록하기
git push origin main # 깃헙에 푸쉬하기

 

3. gh-pages 설치

npm install gh-pages --save-dev

 

4. package.json 파일 수정

  "version": "0.1.0",
  "private": true,
  "homepage": "https://사용자명.github.io/github레파지토리명",  # 1번
  "dependencies": {
    ...
  },
  "scripts": {
	...
    "predeploy": "npm run build",  # 2번
    "deploy": "gh-pages -d build"  # 3번
  },

 

5. deploy 로 배포하기

npm run deploy

 

6. 사이트 접속해보기

package.json 의 homepage에 적은 주소로 접속하면 배포된 깃헙페이지가 보여집니다.

(배포하는데 시간이 걸리기 때문에 2~3분정도 후에 접속을하면 정상적으로 페이지가 로드됩니다.)