Github-Pages에 React 웹 앱 호스팅하기

GitHub-Pages에 React 웹 앱 호스팅 방법

Git & GitHub

리액트 개발환경 구축은 리액트 포스팅에서 정리할 예정입니다. 이번 글은 리액트 웹 앱을 구축한 뒤 이를 호스팅하는 방법에 대해서 정리하는 내용입니다.

---

GitHub-Pages란

GitHub를 통해 정적 웹페이지를 배포할 수 있도록 하는 호스팅 서비스

React뿐만 아니라 다양한 웹 앱을 구축하면 이를 프로토타입 혹은 데모 페이지로서 결과물을 확인할 수 있도록 하는 서비스이다.

 

React에 gh-pages 환경 설정 방법

순서대로 코드를 작성하시는 것을 추천합니다.

• gh-pages 패키지 설치

# react 웹앱 경로에서

$ npm i gh-pages

 

• Package.json 파일에 내용 추가

// 별표(***)로 표시한 내용을 작성하여 주세요.

{
  "name": "<YourProjectName>",
  "version": "0.1.0",
  "private": "true",
  "main": "src/main.js",
   .
    .
    .
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",	// ***
    "predeploy": "npm run build"	// ***
  },
   .
    .
    .
  "homepage": "https://<userName>.github.io/<RepoName>"	// ***
}

"homepage"를 작성할 때 "https://깃헙아이디.github.io/리포지토리이름"로 작성해주셔야 합니다.

 

$ npm run deploy

• 위의 코드를 터미널에서 실행하면 predeploy로 선언된 내용이 deploy이전에 먼저 실행됩니다.
• npm run build를 통해 작성된 react 웹앱을 번들링하고 이를 build라는 폴더로 반환해줍니다.

 

• 확인 방법

github repository

작성한 GitHub Repository로 들어가면 오른쪽 아래에 Environments에 github-pages가 Active 상태로 업데이트된 것을 확인할 수 있다. 저 부분을 클릭하여 view deploymet를 다시 클릭해주면 웹앱이 호스팅되고 있는 것을 확인할 수 있다.

 

gh-pages를 통해 데모 웹페이지를 호스팅하고 이를 포트폴리오로 활용하기에는 훌룡한 방법이라고 생각합니다.