Express 서버에 React 프로젝트를 합쳐서 같이 서버를 돌리고 싶고,
딱히 Express 서버와 React 간의 Data 송수신이 일어나지는 않는 상황.
라우팅만 제대로 해서 localhost:8080/couponPage 에 react 페이지를 띄우고 싶었음..
굉장히 오래 걸렸다.. 하고나니 별 거 아닌데..
그리고 나는 메인 페이지("/") 에서 react를 띄우고 싶었던 게 아니라 서브 디렉토리("/couponPage") 에 띄우고 싶었고..
Express에서도 Routing을 이미 사용하고 있으며, React에서도 react-router-dom 으로 Routing을 하고 있었기에
이것을 해결하는 과정도 필요했다.. ^ㅁ^
아무튼 시작
1. React 프로젝트 Build
우선 서브 디렉토리(나의 경우 /couponPage)에서 react 페이지를 띄울 생각이기에
React 프로젝트의 package.json 에다 "homepage": "/couponPage" 를 넣어 주자.
{
"name": "milk4cup_coupon",
"homepage": "/couponPage", // 추가
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
...
}
}
이런 식으로!
그 후에 React로 만든 것들을
$ npm run build
로 build한다. 그러면 build 폴더에 배포용 완성 파일이 뿅하고 생긴다.
이제 이 build 폴더를 Node-Express 서버의 root 폴더에 그대로 복붙 해주자.
React 프로젝트 전체를 복붙해도 사용 가능하지만,
하나의 React 프로젝트는 아무리 작은 프로젝트라도 기본적으로 수 백MB가 넘어가므로
Github 원격 저장소에 push되지 않는 경우가 발생한다.. 따라서 build폴더만 넘기도록 하자.
2. Node-Express 서버 단에서 Routing 처리 해주기
우선 내가 작업하는 Express 서버에서의 경우 아래와 같은 방식으로 이미 URL마다 Routing이 되어 있는 상태였다.
const A_Router = require("./routes/A");
const B_Router = require("./routes/B");
const app = express();
// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "jade");
app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());
app.use("/", express.static(path.join(__dirname, "public")));
app.use("/couponPage", express.static(path.join(__dirname, "./build")));
app.use("/", indexRouter);
app.use("/A", A_Router);
app.use("/B", B_Router);
코딩애플 강의 페이지의 서브디렉토리에 리액트앱 발행하고 싶은 경우 를 참고하며 따라오면 될 것 같다.
Node
일단 cors라는 놈을 설치해 주고.. (아마.. 삽질하다가 이것저것 해보면서 깔아뒀는데 일단 없으면 오류날 것 같으니..써둠.. React와 Express간 ajax 요청을 할 때 필요한 친구인 것 같은데)
$ npm install cors
그리고 상단에 집어넣어 준다.
var cors = require('cors');
app.use(cors());
그런 다음 이제 라우팅.
app.use('/couponPage', express.static( path.join(__dirname, './build') ))
app.use("*", function (req, res) {
res.sendFile(path.join(__dirname, "/build/index.html"));
});
이렇게 하면 이제 Express 서버를 켰을 때
localhost:8080/couponPage/(react 프로젝트에서의 Routing url) 로 접속하면 페이지가 잘 뜬다!
만약 오류가 난다면,
build > index.html 파일에서 js, css 파일을 불러오는 부분인
<script defer="defer" src="/couponPage/static/js/main.b77ed1f3.js"></script>
<link href="/couponPage/static/css/main.41928ca7.css" rel="stylesheet" />
이 부분의 주소 앞에 .을 붙여 보자.. ^ㅁ^
<script defer="defer" src="./couponPage/static/js/main.b77ed1f3.js"></script>
<link href="./couponPage/static/css/main.41928ca7.css" rel="stylesheet" />
Reference
https://codingapple.com/unit/nodejs-react-integration/