React 프로젝트 사이트 Github Pages 에 배포하기

Github Pages?

Gtihub Pages는 정적 웹페이지를 호스팅 해주는 서비스이다. 쉽게 말해서 깃허브 저장소의 내용을 서버를 구축해서 웹페이지로 보여주는 것이다. 그것도 무료로... 하하^_^

---

React 프로젝트 깃허브에 배포하기

React 프로젝트를 깃허브에 배포하려고 했는데 뭔가 이상했다. http://이름.github.io/프로젝트명/ 으로 들어가면 내가 만든 사이트가 떠야 하는데 README.md 파일이 떴다. 예전에 html, css, js 파일만 올렸던 것은 정상적으로 되었는데 왜 이러는 것인지 찾아보았는데 React 프로젝트는 깃허브에 배포할 때 특정한 과정을 거쳐야 가능했다.

 

1. React 프로젝트 터미널에서 gh-pages 패키지 설치하기

npm i gh-pages --save-dev

 

2. package.json 파일에 문장 추가

 

"scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "deploy": "gh-pages -d build"
},
"homepage": "http://사용자아이디.github.io/프로젝트명/",
"eslintConfig": { //~~~~생략

"scripts" 안에 "deploy": "gh-pages -d build" 추가하고

"scripts"와 "eslintConfig" 사이에 "homepage": "http://사용자아이디.github.io/프로젝트명/" 추가

다른 사람들 보니까 "predeploy": "npm run build"도 추가하는 것 같던데 나는 안 했다.

굳이 만들지 않아도 그냥 npm run build를 쓰면 돼서 굳이 만들어야 할 필요성을 느끼지 못했다.

 

3. React 프로젝트 터미널에서 npm run build 실행

npm run build

그러면 저렇게 build 폴더가 생긴다.

 

4. React 프로젝트 터미널에서 npm run deploy 실행

npm run deploy

npm run deploy는 gh-pages -d build를 실행하는 것과 동일한 기능을 한다. json 파일에 deploy를 추가해줬기 때문이다.

이것을 실행하면 gh-pages라는 브랜치가 생성되고 그 브랜치 안에 방금 만들었던 build 폴더 안의 파일이 업로드된다.

아래의 gh-pages로 이동

build 폴더에 있던 파일들이 프로젝트의 gh-pages 브랜치에 저장됨

 

5. 깃허브 페이지에서 해당 프로젝트의 설정 변경

깃허브 홈페이지에서 해당 프로젝트로 들어가면 위에 code, issues, pull request .... 같은 메뉴들이 있을 텐데 맨 마지막에 있는 Settings로 들어가서 Pages 메뉴 들어간 다음에

Branch를 gh-pages로 변경하고 save를 누른다.

 

그리고 몇 분 있다가 https://사용자아이디.github.io/프로젝트명/ 으로 들어가면 잘 될 것이다.