[React] Github Pages (github.io)를 이용해 리액트 프로젝트 배포하기

깃허브에서 제공하는 웹 호스팅 서비스인 Github Pages를 이용해 리액트 프로젝트를 배포하는 방법을 포스팅해보겠습니다.

항상 localhost, 서버 ip로 된 웹서버에만 접속했었는데, 도메인으로 된 웹페이지를 다룰 수 있게 되었네요.

프로젝트를 개인 도메인에 배포해보고 싶다면 포스트를 참고해보시길 바랍니다!

1-1. 리액트 프로젝트를 생성하기

npx create-react-app deploy-ghpages

npx create-react-app {프로젝트 이름} 명령으로 프로젝트를 생성합니다.

1-2. gh-pages 패키지 설치하기

프로젝트가 성공적으로 생성되었다면, 해당 디렉터리로 이동하여 gh-pages 패키지를 설치해줍니다.

yarn add gh-pages --save-dev

정상적으로 gh-pages가 설치되었다면 package.json 파일에 패키지가 추가되었을 것입니다.

github 웹 호스팅을 사용하기 위해 package.json 파일에 몇 가지 설정을 해주어야 합니다.

1-3. "homepage" 주소 작성하기

주소는 http://{사용자이름}.github.io/{저장소 이름}의 형식으로 작성하면 됩니다.

1-4. "scripts"에 predeploy, deploy 추가하기

predeploy와 deploy를 추가합니다.

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

리액트 프로젝트 설정이 완료되었습니다! 다음으로 저장소를 생성해보겠습니다.

2-1. Github Repository 생성하기

저는 리액트 프로젝트와 마찬가지로 deploy-ghpages로 생성하였습니다.

2-2. 프로젝트를 git repository에 연결하기

다음 명령들을 차례대로 실행하며 프로젝트와 저장소를 연결해줍니다.

git init

git remote add origin https://github.com/{사용자 이름}/{저장소 이름}.git

git add .

git commit -m "commit message"

git push origin master

저장소에 소스코드가 올라왔다면 정상적으로 연결된 것입니다.

마지막으로 프로젝트를 배포해보겠습니다.

3-1. 프로젝트 빌드하기

배포를 위한 빌드를 수행합니다.

yarn run deploy

3-2. 저장소에서 github pages 확인하기

저장소에 접속하여 Settings -> Pages를 클릭하면 다음과 같이 배포된 링크를 알려줄 것입니다.

3-3. 배포 완료!

배포된 주소로 접속하니, 정상적으로 리액트 프로젝트가 실행되고 있네요!

PEKAH