inflearn logo
강의

講義

知識共有

React + API Server プロジェクト開発とデプロイ (CI/CD)

04. ドメイン登録とHTTPS設定

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

433

sloththth

投稿した質問数 2

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 경로로 수업때 해주신 것 처럼 라우팅 해뒀습니다), 프론트쪽 작업에서 해둔 라우팅이 로컬에서는 잘 먹고, 프로덕션에서는 안먹고 있는 것 같아요.

혹시 이 문제의 해결 방법이 있을까요? 해결하기 위해서 더 필요한 정보가 있으시다면 말씀주시면 감사하겠습니다!

ci/cd spa

回答 1

0

kenuheo

혹시 가능하면

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

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

0

sloththth

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

0

kenuheo

image이렇게 나오네요.

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

 

0

sloththth

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

0

sloththth

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

0

kenuheo

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

https://github.com/kenu/backfront

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

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

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

(강의 6분 50초 부분) Workspace 안에 index.html이 비어있음

0

34

2

강의순서가 바뀌어 있습니다.

0

36

1

build.zip 퍄일이 없습니다.

0

41

1

무중단 배포

0

58

2

workflows/deploy.yml 궁금증

0

53

2

33강 도커 빌드 강의의 docker file

0

35

1

.git-credentials 파일이 없이 배포가 성공한 이유가 궁금

0

57

1

(해결 - 정보공유) /home/runner/work/_temp/6be6e~0.sh: line 1: ./gradlew: Permission denied 오류

1

63

2

(확인 완료) git config --global creadential.helper store 후에도 비밀번호 물어보는 현상

1

73

2

2강에서 express npm run dev하다가 오류빨간글씨 나오는 분들 참고하세요

0

119

3

nginx 에러 질문

0

254

2

https 인증서 설정과정 설치 문제 질문

0

176

2

AWS EC2와 로컬 PC에서의 차이가 이해가 안되고 nginx의 필요성이 궁금합니다.

0

185

1

curl localhost 에서 404 not found

0

777

2

https 인증서 발급 에러

0

538

3

vite 사용 안하고 CRA 프론트 백 분리시켜서 하고있는데 질문있습니다.

0

457

2

https 인증서 받을 때 Type: unauthorized

0

493

1

왜 서버의 루트 디렉토리에 node관련 파일을 설치하는 게 아니라 local디렉토리를 만들어서 설치하는지 알 수 있을까요?

0

378

1

삽질 내용 공유드려요.. (혹시 도메인 접속 안되는 분들)

0

446

1

무한 build

0

369

1

CI/CD를 제가 잘 이해한게 맞는지와 merge관련해서 질문이 있습니다!

0

431

1

빌드 오류

1

515

2

강의자료 (Source Code ) 는 어디서 다운 로드 받나요?

1

755

2

`GLIBC_2.28' not found 오류

2

3148

3