search

Chaeyeon0 / GreenDay_Study

여은개의 공부 일지
0 stars 0 forks source link

[20240526] 백엔드-프론트 배포, 연동에 관하여 #29

Open janghw0126 opened 1 month ago

janghw0126 commented 1 month ago

백엔드-프론트 배포와 연동에 관해서 머리가 느으무 복잡시리하여 이번 이슈에 한번 끄적거려 보았습니다,,내일이 두렵네여

파앗팅...

먼저 백엔드-프론트가 서로 배포된 상태에서 연동이 어떻게 되는지 챗지피티한테 물어보았습니다. 근데 일단 밥 좀 먹구 올께여,,훟,,😋

리액트 배포

일단 이 부분이 제일 궁금한 점이였다.

프론트와 백엔드는 하나의 프로젝트 내에서 작업하는 건가? 나눠서 작업하는 건가? 그러면 배포는 파일을 하나로 합쳐서 하는 건가? 이 둘은 어떻게 통신하는 건가? 저번에 스프링 MVC 패턴을 공부했었는데 그러면 V인 view는 프론트개발자가 우케 담당하는 건가?

챗지피티한테 일단 물어보니,

개발이 서로 완료되면 백엔드 개발자는 API를 백엔드 서버에 배포하고, 프론트엔드 개발자는 React 앱을 빌드해서 정적파일로 만들고, 이 파일들을 웹 서버에 배포한다고 한다.

요약하자면, React와 Spring Boot를 함께 사용하는 경우

또한 백엔드는 @RequestMapping(”/api”) 애노테이션으로 “/api” 경로를 사용해서 사용자 정보를 제공하고, 프론트엔드는 axios를 사용하여 백엔드의 API를 호출하고, 사용자 정보를 화면에 출력하고, 새로운 사용자를 추가하며 이 과정이 RESTful API를 통해서 데이터를 주고 받는다.

그러면 각각은 어떻게 배포되는 건가?

  1. 백엔드 API 서비스 배포 : 백엔드 API 서비스는 독립적인 웹 서버로 배포되며, 클라우드 서비스인 AWS를 이용해서 배포한다.
  2. 프론트 웹 빌드 : React 앱은 빌드 과정을 거쳐서 정적 파일로 생성한다. 이 정적 파일을 웹 서버에 호스팅하여 클라이언트 측에서 접근할 수 있도록 한다.
  3. 프론트 앱 배포 : 빌드된 정적 파일을 웹 서버에 배포한다.

찾아보니까, 리액트의 경우 nginx의 reverse proxy를 써서 /는 3000번 포트를 부르고, /api/ 는 8000 포트를 부르도록 하는 방법이 깔끔하다고 한다.

-> 웹서버인 nginx에 리액트로 짠 코드들을 넣고 nginx가 스프링부트 서버를 호출한다는 것이다..아니 이게 뭔말임?

이때 프론트에서 백엔드를 바라보는 주소는 동일하기 떄문에 nginx가 리버스 프록시로 알아서 처리해줌 그니까 쉽게 생각하면, 사용자가 직접 주소입력해서 요청을 보내는 것 대신에 프론트가 백엔드에 날린다고 생각하면 됨

뭔 쌉소리...