[React] 리액트 프로젝트를 깃허브에 배포하는 방법 (GitHub Pages)

[React] 리액트 프로젝트를 깃허브에 배포하는 방법 (GitHub Pages)

 

 

create-react-app을 이용해 리액트 프로젝트를 제작하였다면 이제 이 프로젝트를 배포하여 다른 사람에게도 알려보자.

 

오늘 알려주는 방법은 별도의 서버 없이 GitHub Pages를 이용하여 리액트 앱을 배포하는 방법이다.

이를 따라하기 위해서는 깃허브 계정만 있으면 되며 별도의 비용은 들지 않는다.

 

 

 

1.

깃허브에 로그인한 뒤 repository를 하나 생성한다.

나의 경우 리액트를 이용해 영단어 애플리케이션을 미리 만들어 놨으므로 리파지토리명을 voca_app으로 지었다.

 

 

2.

깃을 이용해 깃허브에 리액트 프로젝트 파일들을 올린다.

깃허브에서는 repository를 하나 만들면 친절하게도 파일을 어떻게 올리는지 알려준다.

아래의 세 가지 방법이 있다는데, 이중 첫 번째 방법을 이용해보자.

 

아래의 명령어를 터미널에서 차례대로 입력한다.

vscode를 사용하는 나는 vscode 터미널을 이용했으며,

리액트 프로젝트 디렉터리로 이동한 뒤 아래의 명령어를 실행해야한다.

git add .    // 변경된 전체 소스코드를 add한다
git commit -m "커밋 메시지"    // 커밋 메시지를 작성한다
git branch -M main    // main branch를 생성한다
git remote add origin https://github.com/깃허브ID/voca_app.git    // 저장소를 연결한다
git push -u origin main    // 푸시한다

 

깃허브 리파지토리를 새로고침 해서 파일들이 잘 올라갔는지 확인한다.

 

 

3.

깃허브 리파지토리에서 Settings > Pages 탭으로 이동한다.

Source의 None으로 되어있는 부분을 클릭하여 main 브랜치로 변경한 후 Save를 눌러 저장한다.

사이트가 publish될 준비가 되어있다는 문구가 뜨면 해당 주소로 이동해본다.

아직 배포 전이므로 기본값인 readme 페이지가 뜰 것이다.

 

 

4.

GitHub Pages로 프로젝트를 배포하기 위해서는 gh-pages 모듈을 설치해야한다.

vscode 터미널에서 gh-pages 모듈을 설치해준다.

npm install -save gh-pages

 

 

5.

이제 package.json 파일을 손봐야 한다.

 

package.json 파일에 들어가서 홈페이지를 아래와 같이 추가한다.

이때 프로젝트 네임은 소문자여야 한다. 나의 경우 voca_app을 적으면 된다.

"homepage": "https://깃허브유저네임.github.io/프로젝트네임/"

 

package.json의 scripts에 predeploy와 deploy 요소를 추가한다.

아래의 빨간 부분을 추가하면 된다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",    // build script를 호출하여 build 디렉터리 생성
    "deploy": "gh-pages -d build"    // gh-pages를 호출하고 build 디렉터리를 업로드
}

 

 

6.

리액트 프로젝트를 deploy하기 위해 터미널에서 아래 명령을 실행한다.

npm run deploy

 

그러면 build 디렉터리가 만들어졌을 것이다.

 

 

7.

깃허브 Pages 탭으로 다시 이동하여 Source의 Branch를 main에서 gh-pages로 변경하고 Save를 누른다.

이제 완료됐다. 아까 만든 주소로 이동하면 잘 작동하는 것을 볼 수 있을 것이다.