인프런 커뮤니티 질문&답변

sloththth님의 프로필 이미지
sloththth

작성한 질문수

React + API Server 프로젝트 개발과 배포 (CI/CD)

04. 도메인 등록과 HTTPS 설정

로컬과 프로덕션 환경에서 동작이 좀 다르네요

작성

·

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

Kenu 허광남님의 프로필 이미지
Kenu 허광남
지식공유자

혹시 가능하면

private으로 repo 공유, 멤버 추가 되실지요.

kenu id로 추가하시면 됩니다.

sloththth님의 프로필 이미지
sloththth
질문자

네 했습니다! 감사합니다~

Kenu 허광남님의 프로필 이미지
Kenu 허광남
지식공유자

image이렇게 나오네요.

서버 호출을 위해서 설정할 것이 더 필요할까요?

 

sloththth님의 프로필 이미지
sloththth
질문자

아 네네 저기는 작업 안했고, 하는 와중에 이 강의를 발견하고 듣고있던 중이었습니다!

sloththth님의 프로필 이미지
sloththth
질문자

근데 로컬에서는 저렇게 접근이 되는데, binggo.me 에서는 /challenge/new 같이 path로 접근하는 게 되지 않네요 ㅠㅠ

Kenu 허광남님의 프로필 이미지
Kenu 허광남
지식공유자

혹시 제 샘플과 비교해 보시는 것 어떨까요?

https://github.com/kenu/backfront

강의 자료도 다시 읽어 보시면 좋을 것 같습니다.

spa frontend에서 서버 호출은 포트가 다른데, 현재 알려주신 코드에서는 backend 서버 주소가 빠져 보입니다.

빨리 잘 해결되시면 좋겠습니다.

sloththth님의 프로필 이미지
sloththth

작성한 질문수

질문하기