스프링부트 + 리액트 조합 개발

Question

스프링부트의 정적데이터를 리액트 빌드파일로 적용시켜 jar 파일을 구동하려고 합니다!그래서 controller 단에서 모든 api 경로를 리액트 빌드파일의 index.html 로 forward 시키고 리액트 route 를 사용하여 페이지 이동 처리를 하려고 합니다. 아니 이렇게 해야한다고 하더라구요.근데 이렇게 하면 restapi 즉 데이터를 반환하는 api도 index.html 를 forward 하니 문제가 될 것 같더라구요.그래서 restapi 는 /api/ 로 시작하도록 개발하고 /api/ 로 시작하는 경로를 제외하고는 index.html 를 forward 시키도록 개발하려고하는데 보통 다른분들은 어떻게 개발하시나요..? 그리고 리액트 &#43; 스프링부트 조합 프로젝트에서 404 에러 처리는 보통 어떻게들 하시나요..?

kenu,전독시 · Accepted Answer

이 소스가 도움이 되면 좋겠습니다.https://github.com/eGovFramework/egovframe-template-simple-backendhttps://github.com/eGovFramework/egovframe-template-simple-react

kenu,전독시 · Answer

RESTful API에 index.html이 왜 나와요?#형이여기서왜나와요?#누구한테배웠나요?

팩트폭행범 · Answer

프론트 / 백 이렇게 나눠서 만듭니다프로젝트가 2개인것이죠인텔리제이로 프론트 켜서 서버 구동시키고인텔리제이로 백 켜서 서버 구동시키고 2개가 각각 돌아가는거임

저지능자 · Answer

react로 빌드 된 파일을 jar에 묶어서 배포하면, 여러 환경에 배포할 때 유리 할 수 있을지도 모르겠습니다.하지만 그렇게 하면 프론트 쪽만 변경이 일어나도 jar로 빌드를 다시 해야하니, 어쩌면 불필요한 과정이 추가된 느낌을 가질 수 도 있습니다.Nginx 같은 웹서버를 따로 두면 처리하기 간편합니다.화면 요청 시사용자 (GET /example) ----> Nginx ----> 정적파일 <--(응답)--┘ <--(찾음)--┘사용자 (GET /없는페이지) ----> Nginx ----> 정적파일 <--(index.html 응답)--┘ <--(못찾음)--┘API 요청 시사용자 (GET /api/examples) ----> Nginx --(GET /examples)--> WAS <--(응답)--┘ <--(응답)--┘이 예시에서는 WAS에 요청할 때 /api를 떼고 요청하고 있습니다.안 떼고 요청 해도 되지만, 그러면 스프링 부트로 개발 할 때 살짝 귀찮지 않겠나 싶습니다.Nginx에서는 rewrite라는 기능을 써서 요청한 주소를 변경하여 WAS에 전달할 수 있습니다.404에 대해서는...스프링 부트에서는 RestControllerAdvice를 통해 404일 때 json으로 응답 해주면 되고,React에서는 이런 식으로 처리할 수 있습니다: https://v5.reactrouter.com/web/example/no-match

ansdbduf · Answer

restapi 는 /api/ 로 시작하도록 개발하고 /api/ 로 시작하는 경로를 제외하고는 index.html 를 forward 시키도록 개발하려고하는데네 그렇게 하면됩니다

스프링부트 + 리액트 조합 개발

5개의 답변

Q&A 목록