[React] React를 GitHub Page에 무료 호스팅하기(페이지 만들기)

오늘은 React JS로 작성한 코드를 어떻게 github page에 무료로 배포할 수 있는지에 대해서 공부해보았다.

가끔 블로그나 사이트들을 볼때 주소가 github.io라고 작성되어있는걸 많이 봤었는데, 이 호스팅에 대해 알기 전까지는 그냥 깃헙에서 만들어놓은 블로그인줄만 알았었다.

솔직히 이걸 알고나니 지금 완전 신세계다😲

지금 너무 삘꽂혀서 피곤한데도 블로그 포스팅을 하고 있다.

 

내가 오늘 깃헙 페이지를 사용해서 만든 웹사이트는 영화소개 웹이다. 

위의 링크를 달아놓은것과 같이 내가 만든 사이트를 일시적으로 yarn(npm) start로 켜서 만든 사이트가 아닌 계속해서 볼 수 있는 사이트를 만들 수 있다.

웹에 들어가보기 귀찮은 분들은 아래 움짤을 보면 됩니당

 

 

---

 

GitHub Page

github page는 무엇일까 알아보기 위해 나는 깃헙유튜브에서 깃헙페이지에 대한 동영상을 보았다.

웹사이트의 코드를 작성해서 배포하기까지는 아래의 사진처럼 굉장히 많은 과정을 거쳐야한다.

 

오픈소스 등 개발자에게 굉장히 양질의 정보를 공유할 수 있게 도와주는 깃헙은 보다 더 편리한 서비스를 위해서 database와 서버가 따로 필요하지 않고 다른 사람의 컴퓨터에 어떻게 배포가 될까 걱정하는 것보다 그 사이트의 콘텐츠에 더욱더 집중할 수 있도록 만들어졌다고 한다.

간단히 말해서, 사이트의 부가적인 것에 힘쏟지 않도록 도와준다는 것이다.

그리고 Git을 통해서 계속해서 코드를 관리하기 때문에 안정적이라는 장점도 있다.

 

---

 

GitHub Page 호스팅하기

1. 리액트 앱을 생성해준다

$ npx create-react-app appname
$ cd appname

 

 

2. Github에 새 레포지토리를 만들어준다

 

레포지토리를 만들었으면 http://username.github.io/reponame 으로 들어갈 수 있게 된다.

하지만, 저 상태로 들어가면 404에러가 뜰 것이다.

 

코드와 이 페이지를 연결해주는 과정이 필요하다!

 

3. npm을 사용해서 gh-pages 패키지 설치

$ npm i gh-pages

 

4. package.json으로 가서 추가

package.json하단에 홈페이지 url을 추가해준다.

"homepage": "http://minjoo-park01.github.io/movie_app"

http://username.github.io/reponame 이런식으로 홈페이지 주소를 작성해주면된다.

 

5. package.json에서 scripts 수정하기

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
  },

 

predeploy => npm run build를 하고, 여기서 실행된 build는 build script를 호출해서 그 스크립트가 build폴더를 제공

deploy => gh-pages를 호출하고 build 폴더를 업로드

 

6. React JS앱을 deploy하기

$ npm run build

build 폴더를 얻게됨

위 명령어를 작성하면 npm은 predeploy를 먼저 호출해준다.

 

$ npm run deploy

---

 

이런 얘기하면 웃기겠지만, 이번 영화 웹사이트를 만들면서 너무 재밌었다.

더 열심히 해보고 공부해서 좋은 사이트를 만들고싶다🥴