REACT 프로젝트 GitHub Pages로 배포하기

REACT 프로젝트 GitHub Pages로 배포하기

 

1. GitHub 저장소 만들기

 

우선, GitHub에 repository를 생성해줍니다.

노란색으로 표시한 명령어를 잘 복사해둡니다.

 

 

2. 프로젝트에 GitHub 원격 저장소 연동하기

 

create-react-app 으로 프로젝트를 생성할 경우 자동으로 git init이 되어 버전관리가 되어있지만, 아닐 경우 git init으로 버전관리를 시작해줍니다. 그런 다음, 터미널에 아까 복사해둔 노란색 명령어를 입력 후 엔터를 누르면, 원격 저장소와 프로젝트가 연동됩니다.

 

git remote add origin 원격 저장소 주소

 

3. GitHub pages로 배포하기

 

GitHub pages는 gh-pages를 설치해야 사용할 수 있습니다.

설치하기 전에 먼저 git commit 을 해주고 원격 저장소에 push를 해줍니다.

 

git add .
git commit -m '커밋 메세지'
git push -u origin master

그런 다음, gh-pages를 아래와 같이 설치해줍니다.

npm i gh-pages --save-dev

 

설치가 진행될 동안 GitHub 저장소에서 Settings 를 누르고 맨 아래로 스크롤을 내려 GitHub Pages 라고 되어있는 곳의 'Check it out here!'를 눌러줍니다.

 

Source로 사용할 브랜치를 master로 설정하고 Save 해주면 배포용 페이지 주소가 생깁니다.

 

Your site is published at https://~

 

노란색 부분이 주소이므로, 복사를 해줍니다.

 

 

gh-pages의 설치가 완료되면 프로젝트의 package.json 파일을 열어 맨 아래에 "homepage" : "배포용 페이지 주소" 와 같이 추가를 해줍니다.

 

 

그리고 package.json 파일의 scripts 부분에 아래 명령어를 추가해주고 저장합니다.

 

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

 

다시 터미널에 npm run deploy를 실행하면 조금 기다린 후 root 폴더 내에 build 폴더가 생긴 것을 확인할 수 있습니다.

그런 다음, 다시 GitHub로 돌아와 Settings => GitHub Pages 'Check it out here!'에 가보면 Source 경로로 gh-pages가 생긴 것을 볼 수 있습니다. gh-pages로 변경 후 저장한 뒤 몇 분 기다리면 배포용 페이지가 나옵니다.