스프링 + 리액트 연동 질문이 있습니다

[익명(39.121)]

지금 현재 AWS ec2 서버에 스프링 프로젝트는 올려 둔 상태인데요

협업 상황에서 리액트와 연동하는 방법을 찾아보니

스프링 프로젝트 파일에 같이 두는 방식이 있고

Nginx로 서빙하는 방법이 있고 

스프링 static 파일에 두는 방식이 있던데

보통 사용하는 방식이 어떻게 되나요 ?

[익명(211.209)]

일단 스프링프로젝트에서 랜더링 서버 + 백 서버까지 같이 겸업하고있나요?

[익명(211.209)]

랜더링서버라고하면 리액트를 실행할 기초 html을 스프링에서 관리하고 있냐는 소리입니다.

[익명(211.209)]

거기에 백앤드의 로직 (DB처리)등을 같이 수행하고있을까요?

[익명(39.121)]

아니요 model controller 2가지만 있고 view는 하나도 없습니다 리액트와 rest api로 통신할 생각인데 생각보다 연동이 어렵네요

[익명(211.209)]

그럼 연동할게 없는데 왜 연동시키시는걸까요>

[익명(39.121)]

일단 테스트용으로 메모리DB 사용하고 있고 연동이 끝나면 차차 바꿀 예정입니다

[익명(39.121)]

기본적인 서버와 프론트 구현만 하는게 목적입니다

[익명(211.209)]

여러가지 방식이 있습니다. 선택해서 사용하시면 됩니다. (1) 님이 사용하시고계시는 스프링과 별도의 랜더링 전용 서버를 하나 만드시는것도 방법입니다. 이 서버는 순수하게 html만 컨트롤 하는 영역입니다.

[익명(211.209)]

이렇게 되면 장점은 프론트와 백앤드를 완전히 분리할 수 있습니다. 분리의 개념은 서로의 배포 과정에 침범을 안할 수 있습니다. 보통 FE/BE분리된 경우 대게 이렇게합니다.

[익명(211.209)]

그럼 랜더링서버에서는 1) Client코드 관리(리액트) + 사용자가 요청했을 때 내려줄 html과 리액트 코드 관리. 서버쪽 코드에서는 1) 원래 하시던 코드 관리 이렇게 할 수 있겠죠.

[익명(39.121)]

둘 다 초보인 프론트 백 두명이서 하고있는데 일단 기본적인 생성 조회만 구현해서 배포하고 되는 지 확인만 하고싶습니다

[익명(211.209)]

(2) 굳이 랜더링 서버를 끼고 싶지 않을때는 아래와 같이 할 수 있습니다. - 리액트 결과물을 빌드합니다. 그리고 그것을 spring의 static resource나 cdn에 껴둡니다. - 스프링의 view에다가 리액트가 랜더링 할 수 잇는 기초 html을 그려줍니다. 이렇게 되면 장점은 스프링 하나로 모든것을 다 처리할 수 있지만 리액트 코드를 -> 스프링에 껴넣는 과정이 추가되어야됩니다.

[익명(39.121)]

현재 스프링 프로젝트를 back, front로 브랜치해서 서로 작업한 뒤 merge해서 ec2 서버에서 실행시키는 게 목적입니다..

[익명(211.209)]

(3) 이것도 하기싫으면 아래와 같이 할 수 있습니다. aws같은 클라우드서비스(s3)에 리액트 빌드 결과물을 올립니다. 그리고 그 클라이언트 코드 내에서 서버와 소통시키면 되겠네요

[익명(39.121)]

spring의 static에 껴 두는 방식을 git을 사용하고 싶은데 프론트 단에서 따로 이 작업을 git을 이용해 수행할 수 있나요 ?

[익명(211.209)]

말씀하신 시나리오를 보시면 (2)에 가까운데요. 리액트의 빌드 결과물을 스프링 리소스로 껴넣는것을 하셔야겠습니다. 하는 방법은 여러가지가 있지만 보통 spring의 gradle이나 maven의 스크립트를 사용하곤 합니다. 두 작업자의 작업환경이 깃으로 연결되어있다면, 스크립트 사용만으로 해결 할 수 있겠네요.

[익명(39.121)]

제가 이해했던 바로는 스프링에서 기본적인 api를 구현하고 리액트에서 view를 띄워 사용자가 url을 요청하면, get,postmapping등 컨트롤러에 의해 스프링에게 json과 같은 데이터를 받고 그 json을 기반으로 리액트가 데이터를 화면에 띄우는 방식 아닌가요 ?'

[익명(211.209)]

만약 두 작업자의 소스가 멀리 떨어져있다면 maven private repository등을 활용하거나 해볼 수 있겠습니다. 프론트 작업자가 작업 다하고 빌드해서 deploy (maven) 백 개발자가 배포하기전에 maven에서 최신버전 내려받아서 병합.

[익명(211.209)]

그 view를 어디서 관리하냐에 따라서 (1), (2), (3)으로 나뉘는거구요. 이 부분이 작업책임영역과 관련되어있어서 중요한거랍니다.

[익명(39.121)]

그럼 현업에서 가장 많이 사용하는 방식은 어떤 방식인가요 ?

[익명(211.209)]

위에서 말했듯이 (1)입니다. (1) : 백앤드 개발자는 백앤드개발만, 프론트 앤드 개발자는 프론트앤드개발만 가능함. (2): 백앤드, 프론트앤드 둘다 겹치는 부분에 관리해줘야함 (지금의 spring view어케 관리할거고 어떻게 빌드파일 넘길것인지 고민해야하는것처럼요) (3): 간단한 토이프로젝트 만들 떄 좋습니다. 모든 과정을 클라우드에 일임하기때문에 보안등의 커스텀 처리하는데 까다롭습니다.

[익명(211.209)]

앞으로 서로 상관안하고 배포하면서 운영하실거면 (1)이 편하실거구요. 그냥 우리는 서로 상관안해도 되니까 간단하게 배포하고싶어 하면 (2)가 나으실거구요.

[익명(39.121)]

그럼 1번으로 해보고 싶은데요 AWS ec2 서버에서 git pull로 제 깃헙에 있는 스프링 프로젝트를 당겨오지 않고 다른 방식으로 해야하나요 ? 프론트 개발자는 여기서 어떤 일을 해주어야 하나요 ?

[익명(211.209)]

https://d2.naver.com/content/images/2020/06/step2.png
요기
사진에서 설명이 잘 나와있네요.

[익명(211.209)]

프론트 개발자도 별도로 스프링이나 node.js로 유저의 요청에 따른 html을 반환해줄 수 있는 서버를 만들어야합니다. 사진의 Node.js/Infrastructure부분입니다.

[익명(211.209)]

도메인까지 있다고 예시를 들면.. api.example.com 같은것으로 도메인을 파시면 되겠고. 프론트 갲발자분은 example.com으로 도메인을 파겠네요. 유저는 example.com으로 접속할거구요. 프론트 개발자분은 그 접속에 맞춰서 view를 내려주면됩니다.

[익명(211.209)]

근데 보시다시피 두개의 인프라스트럭처(프론트의 노드나 스프링쪽, 백앤드의 스프링쪽)를 관리해야하는 부담이 있습니다. 그래서 현업을 경험해보고싶다하면 (1)을 추천드리지만요. 그냥 빠르게 결과물을 내고싶다 하시면 (2)에서 적당한 방법을 찾으시는것도 방법입니다.

[익명(39.121)]

그럼 프론트 단에서도 aws ec2 인스턴스를 한개 구해서 연동하라는 말씀이실까요 ?

[익명(211.209)]

(2)의 방법은 여러가지가 있어서 딱 하나만 꼽기가 어려운데요. 결과적으로 리액트의 빌드 결과물이 -> static 폴더로만 들어가기만 하면 되는 부분이라서요. maven의 도구를 쓰던, 프론트쪽의 shell script를 쓰던 어떤 방식으로든 되게만 하면 됩니다. 일단 추천드리는건 단순 빌드 결과물을 수동으로 카피 페이스트 해보시는것도 추천드립니다. (그래야 어떻게 뭘 추가해야할지 감이 잡히기 때문..)

[익명(39.121)]

레포지토리도 한 스프링 프로젝트에서 branch하지 않고 각각의 레포지토리, 서버를 구현한다 이 말씀이시죠

[익명(211.209)]

정말 엄밀한 분리를 원하시면 그렇게 하셔도 되구요. 아니면 포트를 분리하셔도 되구요. 어떻게 구성하는지는 자유;; 근데 애초에 대화하시다보니까 인프라자체에 대한 이해가 없으신것같은데 그냥 (2)로 하시죠. 일단 서버에 대한 개념이 잡혀야지 뭐라도 말씀드릴 수 있을 것 같아요.

[익명(211.209)]

프론트 개발자에게 이렇게 가이드 주시면 될 것 같습니다. (1) 리액트 코드를 빌드하여서 (npm run build) (2) 스프링 내 특정 폴더로 붙여넣고 (3) 푸쉬하라 (4) 테스트 해보고 배포 시작하겠다. 라고 운영해보시면 되겠습니다^^

[익명(39.121)]

네 첫 프로젝트이다보니 서버사이드렌더링만 하다가 2인 협업에서는 감이 안잡히네요 그래도 뭔가 주로 많이 사용하는 방식으로 하고싶은데..

[익명(211.209)]

그 폴더는 스프링 개발자인 님께서 정해서 알려주시면 되겠습니다. 어디에 복사 붙여넣기하면되는지.

[익명(39.121)]

일단 친절히 도와주셔서 너무 감사드립니다

[익명(211.209)]

많이 해보시는것도 중요하지만 진화하기 전의 방향(대표적으로 (2)와 같은 방향)을 해보고 왜 사람들이 (1)로 이동해나갔는지 경험하시고 본인만의 언어로 정리해두는게 정말 큰 도움이 될겁니다. 지금 아니면 나중에는 시간없어서 못해요 ^^;; 취업할때도 도움되지만 현업에서 더 큰 도움이 된답니다.