[React] Github Pages를 이용해 React 프로젝트 배포하기

React로 만들어진 정적 웹사이트를 Github Pages를 이용해 무료로 배포해보겠습니다.

 

정적 웹사이트만 배포가 가능하다는 점이 단점이지만, 간단한 페이지나

 

이력서 등을 배포하기에 매우 적합하다고 생각합니다.

 

저도 실제로 Github Pages를 이용해 이력서를 배포하였습니다.

 

https://lee-minhoon.github.io/

Resume

 

Github Pages를 사용하기 때문에 Github 계정과, React를 사용하기 위해 Node.js가 설치돼 있어야 합니다.

 

npm install create-react-app

 

위와 같이 npm을 통해 create-react-app을 설치할 수 있습니다.

 

create-react-app는 리액트를 통해 웹앱을 개발할 수 있도록 도와주는 도구라고 생각하시면 됩니다.

 

create-react-app을 설치하셨다면 "create-react-app 프로젝트명"을 통해

 

디렉터리 어디에서든 간편하게 React 개발을 시작하실 수 있습니다.

 

프로젝트를 생성할 폴더로 이동한 뒤 아래의 명령어를 통해 새로운 React 프로젝트를 생성해보겠습니다.

 

create-react-app new-project

 

아래처럼 Z:\new-project 라는 폴더가 만들어지고 React 프로젝트를 시작하기 위한 구성요소들이

 

알아서 설치되는 모습입니다.

 

 

 

React Project가 생성되었습니다.

 

 

그런 다음 Github Repository를 하나 만들어주겠습니다.

 

 

React Project를 생성함과 동시에 add와 commit은 되어있기 때문에 생략하고

 

원격저장소와 연결한 뒤 push를 해줍니다.

 

 

아래를 보시면, push가 된 모습입니다.

 

 

하지만 React Component 파일들은 웹페이지가 해석할 수 없는 형태(JSX 문법)라,

 

build 후 생성된 웹 파일(html, css, js 등)들을 저장소에 올려줘야 하는데 그 과정이 매우 귀찮습니다.

 

웹 파일들이 올라갈 브랜치를 하나 만든 후 매번 build하고 거기에 푸쉬를 해야 합니다.

 

이 과정들을 한 번에 해주는 gh-pages라는 라이브러리가 존재하기 때문에

 

설치 후 사용하도록 하겠습니다.

 

npm install gh-pages

 

 

그런 다음 pacakage.json 파일을 열어 필요한 몇 개의 키-값을 추가하도록 하겠습니다.

 

 

루트 디렉터리를 나타내는 homepage 키를 위와같이 적어줍니다.

 

값은 도메인/저장소명/ 으로 적어주시면 됩니다.

 

만약 저장소명을 아래와 같이 생성해주신다면

 

 

https://lee-minhoon.github.io/ <-와 같은 기본 도메인 주소를 루트디렉터리로 사용할 수 있습니다.

 

Github Pages는 여러 개 만들 수 있기 때문에, 취향 따라 혹은 필요한 대로 하시면 됩니다

 

 

그런 다음 scripts에 위 두 명령어를 적어줍니다.

 

npm run deploy

 

정의해놓은 명령어를 아래처럼 사용해주시면..

 

 

 

생성했던 저장소에 gh-pages라는 브랜치가 생성되고, 웹 파일들이 push 되어있는 것을 확인할 수 있습니다.

 

 

그리고 아래 화면처럼 보여줄 Page가 gh-pages 브랜치로 설정되어있는 것을 볼 수 있습니다.

 

만약 main 브랜치로 되어있다면 gh-pages로 수정해주시면 됩니다.

 

 

site 주소는 도메인/저장소명/ 으로 되어있으니,

 

접속해서 확인해보면 React 프로젝트가 배포된 것을 보실 수 있습니다.