리액트 SPA 쉽게 공유해보기

내가 만든 리액트 앱을 친구들에게 공유하기 위한 간단한 방법을 소개한다
방법은 2가지가 있다

• nodejs express
• github pages

방법1. nodejs express

• 집에서 포트포워딩을 통해 공유할 때나,
• AWS EC2를 통해 공유할 때 사용할 수 있는 방법이다
• https://github.com/chinsun9/serve-spa-expressjs

terminal

git clone https://github.com/chinsun9/serve-spa-expressjs.git
cd serve-spa-expressjs
npm i

• 위 저장소를 클론하고, 종속성을 설치한다
• index.js 에서 port와 staticDir을 내 상황에 맞게 수정한다

port

index.js:5

const port = 5000; // 원하는 포트로 수정

staticDir (spa path)

index.js:7

const staticDir = path.join(__dirname, '../build'); // 빌드된 spa 경로, index.js를 기준으로 빌드된 리액트앱 상대경로를 path.join 두번째 인자에 넣어준다

소스코드

• https://github.com/chinsun9/serve-spa-expressjs

방법2. github pages

• 깃허브 페이지를 통해 배포할 수 있다
• 하지만 깃허브 페이지에서는 SPA를 지원하지 않는다
• 1페이지짜리 리액트 앱이면 상관없지만,
• react-router-dom을 사용하면서 url이 변화하는 경우
• index.html과 404.html에 스크립트를 추가해줘야 한다
• github pages에서 spa처럼 동작하게 해주는 마법 ; https://github.com/rafgraph/spa-github-pages#usage-instructions
• demo page

gh-pages 설치

terminal

yarn add -D gh-pages

package.json 수정

package.json

{
  // ...
  "scripts": {
    // ...
    "deploy": "gh-pages -d build"
  },
  // ...
  "homepage": "https://chinsun9.github.io/hello-react/"
}

• deploy 스크립트 추가, homepage 필드를 추가한다
• 이때 homepage필드의 값은
• https://{username}.github.io/{repo}/로 한다

Router에 basename 추가

index.js

ReactDOM.render(
  <React.StrictMode>
    <Router basename={process.env.PUBLIC_URL}>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

• 최상위 Router에 basename={process.env.PUBLIC_URL}을 추가한다

404.html 추가

• https://github.com/rafgraph/spa-github-pages/blob/gh-pages/404.html
• public/404.html을 만들고 위 내용을 추가한다
• 이때 다른점은 pathSegmentsToKeep 값을 1로 한다

index.html 수정

• https://github.com/rafgraph/spa-github-pages/blob/gh-pages/index.html
• public/index.html head 부분에 위 <!-- Start Single Page Apps for GitHub Pages --> 에 해당하는 스크립트 부분을 추가한다

build && deploy

terminal

yarn build
yarn deploy

• gh-pages 브랜치가 생성되어 있고,
• 깃허브 페이지 기능이 활성화되어있는 것을 확인할 수 있을 것이다

소스코드

• https://github.com/chinsun9/hello-react

참고

• https://github.com/rafgraph/spa-github-pages#usage-instructions
• github pages로 자랑하기 ; https://github.com/chinsun9/hello-react
• nodejs express로 자랑하기 ; https://github.com/chinsun9/serve-spa-expressjs