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-dev2) 설치가 완료 후 프로젝트에 있는 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')
);
도움받은 사이트