[React] 리액트 사이트 Github Pages로 배포하기

우리가 만든 Movie App을 다른 사람들도 구경할 수 있도록 Github Pages로 배포해보도록 하겠습니다! Gtihub Pages에 무료로 프로젝트를 업로드 해주는 gh-pages 패키지를 먼저 설치하겠습니다.

1) gh-pages 패키지 설치

npm i gh-pages

#gh-pages는 github pages에 업로드할 수 있게 해주는 패키지이며 github에서 무료로 제공하고 있습니다. html, css, javascript를 업로드하면 웹사이트로 만들어서 전세계에 무료 배포해줍니다. 

2) npm build 

*서비스 배포 전, build를 해야하는 이유는 웹브라우저는 HTML CSS JS 세 가지의 언어만 해석할 수 있고 리액트의 state, JSX는 전혀 알아듣지 못합니다. 리액트 프로젝트를 build하면 브라우저 친화적인 HTML CSS JS 파일로 바꿔줍니다. 그리고 그걸 웹에 올려야 사용자들이 우리의 사이트를 구경할 수 있습니다. 

npm run build

 

#npm run build를 실행하면 웹사이트의 production ready code를 생성하게 되고 build라는 폴더가 생성됩니다. production ready란 코드가 압축되고 모든게 최적화 된다는 의미입니다. 

3)package.json에서 homepages라는 key값 추가

package.json 이라는 파일을 오픈한 후, 마지막에 homepages라는 key값을 추가하고 여러분이 배포할 사이트 경로를 입력합니다.

4) 두 개의 script를 만들겠습니다.

#deploy는 gh-pages가 build폴더를 homapage에 적은 웹사이트에 업로드하도록 합니다.

#predeploy는 deploy전 먼저 build를 실행시켜줍니다.

 

그리고 homepage에 적은 링크로 이동하면 movie app 프로젝트가 업로드 된 것을 확인할 수 있습니다.

homepage와 script 두개만 작성했을 뿐인데 웹사이트를 deploy 했습니다!! 배포 후 업데이트 하고 싶다면, npm run deploy만 하면 됩니다!

 

+npm run build한 후 빈화면 나올 시 경로를 아래와 같이 바꿔주시면 제대로 작동합니다. 

 <Route  path={`${process.env.PUBLIC_URL}/`}  element={<Home />} />
 <Route  path={`${process.env.PUBLIC_URL}/movie/:id`} element={<Detail />} />