How to deploy React SPA by github pages

 

What is SPA(Single Page Application)?

단일 페이지 어플리케이션이란, 겉으로 보기에는 여러 페이지들로 이루어진 웹 앱이지만, 실제 페이지 이동시 서버로부터 새 페이지를 전달받는 것이 아니라, 현재 클라이언트 측의 HTML과 JS 코드를 사용하여 현재 페이지의 내용을 변경하여 출력하는 방식의 어플리케이션입니다. 즉, 실제로 존재하는 페이지는 단 하나(index.html)이며, 각 논리적인 페이지마다 필요한 데이터는 API 등을 사용하여 불러오게 됩니다.

따라서 페이지 간 전환이 빠르고 통신 비용이 적다는 장점이 있지만, 앱의 모든 데이터를 초기에 확보해두어야 하므로 초기 로딩 속도가 증가할 수 있다는 단점이 있습니다. 이러한 단점은 코드 스플리팅 등의 기법으로 어느 정도 완화할 수 있습니다.

 

github pages 배포하기

1) gh-pages 패키지를 설치

npm install gh-pages --save-dev

2) 설치가 완료 후 프로젝트에 있는 package.json 파일에 "homepage" 주소를 추가

 

"homepage": "https://jaykim88.github.io/J-cafe-deploy"

형식은 http://{사용자 이름}.github.io/{저장소 이름}로 작성합니다.

 

3) script 부분에 predeploy, deploy 를 추가

"predeploy": "npm run build", 
"deploy": "gh-pages -d build"

4) 저장하고 터미널창을 열어 npm run deploy를 실행합니다. 자동으로 레파지토리의 gh-pages 브랜치에 업데이트가 됩니다.

 

.env 를 사용하는 경우

package.json 의 script start 뒷부분에 .env 를 작성합니다.

"scripts": {
"start": "react-scripts start .env",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

* create-react-app에서는 보안이 필요한 환경변수의 유출을 미연에 방지하기 위해 REACT_APP으로 시작되지 않는 환경변수는 무시합니다.

 

** .env 파일 결정 및 우선순위

package.json의 script에 따라 불러오는 .env 파일이 결정되는데 왼쪽으로 갈수록 우선 순위가 높습니다.

• npm start: .env.development.local, .env.development, .env.local, .env
• npm run build: .env.production.local, .env.production, .env.local, .env
• npm test: .env.test.local, .env.test, .env

.env 파일을 사용하므로 start 에 .env 를 기입합니다.

 

Browser Router 사용하기

import { BrowserRouter, Route, Switch } from 'react-router-dom';

ReactDOM.render(
<BrowserRouter basename="/react">
    <Switch>
       <Route exact path="/"  component={List}/>
       <Route exact path="/Add"  component={Add}/>
    </Switch>
</BrowserRouter>,
document.getElementById('root')
);

 

도움받은 사이트

• velog.io/@ausg/gh-pages-react-router
• www.python2.net/questions-160107.htm