카테고리 없음

[개발공부 58일차] React & Spring 배포방법

BigSik 2023. 5. 10. 17:21

배포란, 로컬에서 개발한 React 코드를 압축한 파일로 AWS 서버에 띄워서 웹에서 접속할 수 있게 하는 것

 

npm run build 명령어를 통해 작성한 코드를 하나의 파일로 압축(build)

이 과정에서 트랜스파일링하여 ES5 문법으로 변환하는 역할을 한다.

 

클라이언트에서 서버로 요청을 보낼 때, 웹 브라우저에서 http request를 보내면 웹 서버인 nginx가 요청을 리액트 서버로 전달하고, 리액트에서 백엔드로 요청을 보낼 때는 nginx가 요청을 백엔드 서버로 전달한다. 

 

서버1. (nginx 웹서버 + react)

서버2. spring boot tomcat 서버

서버3. mysql 서버

이렇게 3개 띄움

 

상대방이 서버에 띄운다는 것은 React 프로젝트를 build 폴더로 빌드하고,

서버에 해당 폴더를 복사한 후, 서버에서 React 앱을 실행하는 것을 의미합니다.

이때, node 서버를 실행한 후, 서버에서 톰켓을 사용하여 8080 포트에 접속할 수 있습니다.

추천하는 방법은 백엔드와 연결이 잘되는 것을 확인한 후, nginx 서버를 사용하여 더 가볍고 리버스 프록시 등 다양한 기능을 사용하는 것입니다.

 

리엑트+스프링 둘 다 하나의 서버에서 톰캣으로 띄우지 않고,

리엑트는 nginx로 띄우고 스프링은 톰캣으로 별도로 띄우는 이유는

아파치가 nginx보다 실제 성능이 더 안좋은 이유도 물론 있긴 하지만,

(tmi: 아파치는 동기로 처리, nginx는 비동기로 처리하기 때문..)

프론트 서버랑 백엔드 서버를 나눠서 띄워서,

만약에 백엔드 서버가 터져도 프론트 서버는 남아서 404 에러를 안띄우기 위해 나눠서 띄우는 것

보통 React 프로젝트는 빌드 후, 해당 파일들을 별도로 서버에 배포하고, 백엔드와 연결하여 사용합니다.

 

프론트 서버와 백엔드 서버를 나누는 이유

서비스가 나중에 커져서 동접자수가 수만명대로 늘어나게 되면, 백엔드 서버가 혼자로 몇만개의 http 요청을 견디기 버거워합니다.

 

따라서 http 요청이 많이 올 땐 백엔드 서버의 갯수를 예를들어 10개로 늘려서 10000개의 요청을 1000개씩 1/10로 쪼개서 개별로 보냅니다.

 

그런데 프론트 서버는 백엔드 서버처럼 heavy한 작업이 없고 그냥 html 뿌려주는거라 한 2~3개만 서버증설하면 되겠네요.

그럼 프론트 서버 2개, 백엔드 서버 10개, 디비도 한 2개로 늘어나겠네요.

이걸 scale out 한다 라고 표현합니다. 수평으로 서버를 늘리는거요.

 

근데 만약에 프론트, 백엔드 서버가 하나의 서버에 붙어있었다면,

서버를 10개로 늘리고 싶으면, 프론트는 2개밖에 안필요한데 8개 더 만들어야겠죠?

그래서 프론트랑 백엔드 서버 따로 쪼개는거임

 

출처 :https://okky.kr/questions/1357368