스프링 부트 리액트 배포할 땐 어떻게 하는거에요?

Question

스프링부트 디렉터리 내에 리액트 프로젝트생성했어야 하는건가요?

신도림산당 · Answer

백엔드 프론트 서로 분리하여 배포합니다. 같이 묶어서 하나의 프로젝트로 배포를 하면 프론트나 백엔드 둘중 하나만 배포를 안하고 두개다 배포를 하게 되겠죠?

더미 · Answer

스프링 부트와 리액트를 분리해서 배포하는 방식은 각각의 기술 스택을 독립적으로 관리하고 확장할 수 있다는 장점이 있습니다. 주로 다음과 같은 방법을 사용합니다.1. Nginx (또는 다른 웹 서버)를 이용한 분리 배포개념:스프링 부트는 백엔드 API 서버로, 리액트는 프론트엔드 정적 파일 서버로 각각 독립적으로 운영합니다.Nginx와 같은 웹 서버를 프록시 서버로 사용하여 요청에 따라 적절한 서버로 라우팅합니다.장점:각 서버의 역할 분리로 인한 효율적인 자원 관리서버별 확장성 및 유연성 증대프론트엔드와 백엔드 개발 및 배포 과정의 독립성 확보단점:Nginx 설정 및 관리에 대한 추가 학습 필요초기 설정 복잡성 증가2. 클라우드 서비스 (AWS, Azure, GCP 등)를 이용한 분리 배포개념:각 클라우드 서비스 제공 업체의 서비스 (예: AWS S3, EC2, Lambda 등)를 활용하여 스프링 부트와 리액트를 각각 배포합니다.클라우드 서비스의 자동화된 배포 기능을 활용하면 더욱 효율적으로 배포할 수 있습니다.장점:손쉬운 확장 및 관리클라우드 서비스의 다양한 기능 활용 가능 (예: 로드 밸런싱, CDN 등)단점:클라우드 서비스 이용 비용 발생클라우드 환경에 대한 이해 필요3. 도커 컨테이너를 이용한 분리 배포개념:스프링 부트와 리액트 프로젝트를 각각 도커 이미지로 빌드합니다.도커 컴포즈를 사용하여 컨테이너 간 네트워크 설정 및 실행을 관리합니다.장점:개발 환경과 운영 환경의 일관성 유지컨테이너 기반의 이식성 및 확장성단점:도커 및 컨테이너에 대한 학습 필요컨테이너 관리 오버헤드분리 배포 시 고려 사항CORS (Cross-Origin Resource Sharing) 설정:스프링 부트 API 서버에서 리액트 프론트엔드 서버의 요청을 허용하도록 CORS 설정을 해야 합니다.API Gateway (API 게이트웨이) 활용:여러 개의 마이크로서비스로 구성된 백엔드 시스템에서 API Gateway를 사용하여 API 요청을 효율적으로 관리할 수 있습니다.참고 자료Spring Boot와 React를 분리해서 연동해보자: https://sundries-in-myidea.tistory.com/125[Spring Boot + React]배포#2. 구성 이해: https://yenjjun187.tistory.com/924위 내용들을 참고하여 프로젝트 상황에 맞는 최적의 분리 배포 방식을 선택하시기 바랍니다.

lazymode · Answer

서버 두개에 각각 배포하면 됩니다.

oo스파이크oo · Answer

하나로 배포하려면 webpack 이용하시면 됩니다.

내발은삼각형 · Answer

대충 만든 사내 시스템의 경우 nginx 로 리버스 프록시 구성해서 https://url 로 들어온 요청은 react, /api 로 들어온 요청은 spring 으로 보내고 있습니다.마음대로 해도 된다고 해서 제 기준 가장 편하게 구성했습니다.=> 결론은 나눠서 구성함장단점은 윗분이 설명해주신거 같군요.

하얀뼈 · Answer

빌드 스크립트 안에 두개 다 빌드하는거 넣어놓고프론트는 nginx에 root를 build나 dist로 잡아놓으면둘 다 한 번에 배포되길 할껄요

스프링 부트 리액트 배포할 땐 어떻게 하는거에요?

6개의 답변

기술 목록