리액트로 GitHub Pages에 배포하는 방법

1. GitHub 저장소 생성 및 클론

→ GitHub에 새로운 저장소를 생성한 후 로컬 환경으로 클론 한다.

 

2. 리액트 애플리케이션 생성

→ 리액트 애플리케이션을 생성하고 개발을 진행한다

 

3. GitHub Pages 설정

'package.json' 파일에 "homepage" 속성을 추가한다. 이것은 배포된 애플리케이션이 호스팅될 주소를 지정하는 것이다. 예를 들어, Github 사용자명이 'my-username'이고 저장소 이름이 'my-repo'인 경우에 다음과 같이 추가한다.

"homepage": "https://my-username.github.io/my-repo/"

 

4. 빌드 스크립트 설정

'package.json' 파일의 "scripts" 항목에 배포 스크립트를 추가한다. 배포 스크립트는 'gh-pages' 패키지를 사용하여 'build' 폴더를 GitHub pages에 업로드한다. 이때, 'gh-pages -d build' 명령은 'build' 폴더를 GitHub pages에 배포하는 명령이다.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "deploy": "gh-pages -d build", // 추가
  "predeploy": "npm run build" // 추가
},

 

5. 애플리케이션 빌드

터미널에서 아래 명령을 실행하여 애플리케이션을 빌드한다. 이 명령은 최적화된 production ready 코드를 생성하고 'build' 폴더에 저장한다.

npm run build

 

6. 배포

빌드된 애플리케이션을 GitHub Pages에 배포한다. 터미널에서 아래 명령을 실행한다. 이 명령은 빌드된 애플리케이션을 'gh-pages'패키지를 사용하여 'gh-pages' 브랜치에 업로드하고 GitHub Pages에 호스팅 될 수 있도록 설정한다.

 

7. 확인

배포가 성공적으로 완료되면, GitHub 저장소의 설정에서 GitHub Pages의 URL을 확인할 수 있다. 해당 URL로 접속하여 애플리케이션을 확인할 수 있다.