작성
·
348
0
binggo.me 라는 도메인으로 작업하는 중인데요, 리액트 라우트는 아래와 같이 작성이 되어있습니다.
return (
<BrowserRouter>
<Routes>
<Route element={<App />}>
<Route path="/" element={<Navigate replace={true} to="/home" />} />
<Route path="home" element={<UserHomePage />} />
<Route path="challenge/new" element={<MakeChallengePage />} />
<Route path="bingos/:bingoId" element={<BingoPage />} />
<Route path="challenge/:challengeId" element={<ChallengePage />} />
</Route>
<Route path="*" element={<NotFoundPage />} />
</Routes>
</BrowserRouter>
);
'/'로 접근하면 '/home'로 리디렉션은 잘 되는데, '/home'로 바로 접근할 때 로컬에서는 잘 되고 프로덕션에서는 에러가 뜨네요. 다른 페이지들도 마찬가지로 접근이 안됩니다. 에러 내용은 아래와 같은데
NotFoundError: Not Found
at /home/ubuntu/local/bingo/bingo/server/app.js:45:8
at Layer.handle [as handle_request] (/home/ubuntu/local/bingo/bingo/server/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/ubuntu/local/bingo/bingo/server/node_modules/express/lib/router/index.js:317:13)
at /home/ubuntu/local/bingo/bingo/server/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/home/ubuntu/local/bingo/bingo/server/node_modules/express/lib/router/index.js:335:12)
at next (/home/ubuntu/local/bingo/bingo/server/node_modules/express/lib/router/index.js:275:10)
at SendStream.error (/home/ubuntu/local/bingo/bingo/server/node_modules/serve-static/index.js:121:7)
at SendStream.emit (node:events:513:28)
at SendStream.error (/home/ubuntu/local/bingo/bingo/server/node_modules/send/index.js:270:17)
at SendStream.onStatError (/home/ubuntu/local/bingo/bingo/server/node_modules/send/index.js:421:12)
app.js 45번째 라인은 접근할 수 없는 경로에서 404를 뱉게하는 부분인 것 같습니다.
app.use(function (req, res, next) {
next(createError(404));
});
근데 또 db랑 연결해둔 api부분은 잘 접근이 되어요.
잘은 모르지만 서버쪽의 app.js파일에서 라우팅을 한 경우에는 잘 되고(/api 경로로 수업때 해주신 것 처럼 라우팅 해뒀습니다), 프론트쪽 작업에서 해둔 라우팅이 로컬에서는 잘 먹고, 프로덕션에서는 안먹고 있는 것 같아요.
혹시 이 문제의 해결 방법이 있을까요? 해결하기 위해서 더 필요한 정보가 있으시다면 말씀주시면 감사하겠습니다!
답변 1
0
혹시 제 샘플과 비교해 보시는 것 어떨까요?
https://github.com/kenu/backfront
강의 자료도 다시 읽어 보시면 좋을 것 같습니다.
spa frontend에서 서버 호출은 포트가 다른데, 현재 알려주신 코드에서는 backend 서버 주소가 빠져 보입니다.
빨리 잘 해결되시면 좋겠습니다.
네 했습니다! 감사합니다~