[React] Deploy React App

1. SPA 프로젝트 배포 이해하기

• npm run build
  • Production 모드로 빌드되어, ‘build’ 폴더에 배포를 위한 파일 생성
    • 이렇게 만들어진 파일들을 웹서버를 통해 사용자가 접근할 수 있도록 처리
  • build/static 폴더 안에 JS, CSS 파일들이 생성
    • 파일 이름에 hash 값이 붙음
    • long term caching techniques
• 특징
  • 모든 요청을 서버에 하고 받아오는 형태가 아님
  • 라우팅 경로에 상관없이 React App을 받아 실행
  • 라우팅은 받아온 React App을 실행 후 적용
  • static 파일을 제외한 모든 요청을 index.html로 응답해 주도록 작업
• serve -s build
• AWS S3에 배포
• node.js express
• NginX

2. serve 패키지로 React App 배포

# terminal

$ npm install serve -g
$ serve -s build  # -s옵션은 어떤 라우팅으로 요청해도 index.html 응답

3. AWS S3에 React App 배포

3. NginX로 React App 배포

• 추후 업로드

4. node.js express로 React App 배포

# terminal

$ npm i express
$ code .

// server.js

const express = require("express");
const path = require("path");

const app = express();

app.use(express.static(path.join(__dirname, "build")));

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "build", "index.html"));
});

app.listen(9000);

# terminal

$ node server.js

5. Server Side Rendering 이해하기

• 서버에서 응답을 가져올 때, 기존처럼 static file만을 가져오는 것이 아니라, 먼저 서버에서 응답 값을 만들어서 내려주고, 그 후에 static file을 내려줌
• static file을 다 내려받고, React App을 브라우저에서 실행한 뒤에는 SPA처럼 동작
• React Component를 브라우저가 아니라 Node.js에서 사용
• ReactDOMServer.renderToString(<App/>);
  • 결과가 문자열
  • 이것을 응답으로 내려줌
• 라우팅, 리덕스와 같은 처리를 서버에서 진행하고 내려줌
• JSX가 포함된 React 코드를 서버에서 읽을 수 있도록 babel 설정을 해야 함

// server.js

const express = require("express");
const path = require("path");
const ReactDOMServer = require("react-dom/server");
const React = require("react");
const fs = require("fs");

// <div>Hello</div>
console.log(
  ReactDOMServer.renderToString(React.createElement("div", null, "Hello"))
);

const app = express();

app.use(express.static(path.join(__dirname, "build")));

app.get("/test", (req, res) => {
  const ssr = ReactDOMServer.renderToString(
    React.createElement("div", null, "Hello")
  );
  const indexHtml = fs
    .readFileSync(path.join(__dirname, "build", "index.html"))
    .toString()
    .replace('<div id="root"></div>', `<div id="root">${ssr}</div>`);
  res.send();

  console.log(indexHtml);

  res.send(indexHtml);
});

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "build", "index.html"));
});

app.listen(9000);