ISSUE

---

CRA(Creat React App)+SpringBoot로 간단하게 쇼핑몰 프로젝트 진행을 하고 있습니다. 로컬에서 npm run start로 개발 및 테스트를 진행하고 있던 중,
npm run build를 통해 생성된 build파일로 실행을 해보고 싶었습니다.
처음 시도해본 방법은 SpringBoot인 백엔드 프로젝트 static에 CRA build파일은 옮겨놓고 서버를 올려 index.html을 열어보았습니다.

http://localhost:9090

그 상태에서 CRA BrowerRouter(as router)가 정상작동하는 것처럼 보였지만, 변경된 주소로 직접 접근을 해보거나 새로고침을 한 경우에 404에러가 발생되는 이슈를 발견하였습니다.

검색을 해보았지만, 주로 CRA프로젝트를 eject하여 별도에 서버렌더링 관련하여 수정하는 글들이 많았습니다. 하지만 간단하게 react 공부를 해보고자 시간날 때마다 해보는 스터디로 eject방법은 택하고 싶지 않았습니다.
간단하게 node서버로 CRA를 띄울 수 있는 방법을 찾다가 저와 같은 방법을 찾고자 하는 분들을 위해 작성해 봅니다.

node 기반인 express로 CRA를 띄워보도록 하겠습니다.
구성은 아래와 같으며 public디렉토리에 server.js를 생성하여 코드를 작성해 보았습니다.

CRA Project

|- package.json
|- /public
   |-- index.html
   |-- server.js
|- /src
   |-- index.js
 .
 .
 .

/public/server.js

const express = require("express");
const path = require("path");
const app = express();
app.use(express.static(__dirname));
app.get("*", function(req, res) {
  res.sendFile(path.resolve(__dirname, "index.html"));
});
function handleListenLog() {
  console.log("Server Starting...");
}
app.listen(9000, handleListenLog);

그런 다음, build를하고 build된 위치에 가보면 방금 생성한 server.js도 같이 배포되었습니다. 터미널에서 server.js를 실행해봅니다.

$ node server.js

express로 띄운 CRA에서는 변경된 주소 및 새로고침을 해보아도 라우터가 정상 작동되는 것을 확인해 볼 수 있습니다.