백엔드 프론트엔드 배포 흐름을 잘 모르겠습니다.

Question

안녕하세요.최근 AWS, Docker, CI/CD 강의를 수강하며, Spring Boot 프로젝트를 Docker 이미지로 패키징하고 무중단 배포하는 과정까지 직접 구축해보았습니다.Spring 서버를 EC2에 자동으로 배포하고 무중단으로 교체하는 구조는 충분히 이해하고 구현도 해보았지만, 이번 프로젝트에서 프론트엔드까지 함께 연동하려다 보니 새로운 고민이 생겼습니다.프론트 지식이 전무한 상태에서, 프론트엔드 팀원이 React로 만든 프론트 화면까지 백엔드와 함께 배포해달라는 요청을 주셨는데, 여기서부터 개념적으로 막히기 시작했습니다.React에서 api/login 같은 요청을 보내면 Spring 서버가 응답하고, 이 데이터를 바탕으로 React가 화면을 렌더링한다는 구조를 이해하고, AWS강의를 들으며 S3, CloudFront로 프론트를 배포하는 과정도 실습하였는데 Spring과 React를 동시에 배포하려니까 흐름이 잘 이해가 가지않습니다..ㅠㅠ https://velog.io/@jwo0o0/AWS-S3%EB%A1%9C-React-%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0https://velog.io/@jwo0o0/AWS-S3-%EB%B2%84%ED%82%B7-Github-Action%EC%9C%BC%EB%A1%9C-CICD위의 블로그 포스팅을 참고해서 이해하려고 하는데 제가 이해한 흐름이 맞는 지 확인해주실 수 있나요? 현재 프로젝트에서 백엔드와 프론트를 분리해서 각각 repository에 올리고있는데요!Spring에서 workflow에 Github에 올라와있는 React 프로젝트를 S3에 업로드하고 CloudFront로 배포하도록 자동화이후 workflow에 백엔드 Spring 프로젝트를 Docker 이미지로 패키징하여 ECR에 이미지를 Push.workflow에 SSH로 EC2에 접속하는 코드를 작성. EC2에서 ECR에 올린 이미지를 Pull받은 뒤 해당 이미지로 docker run 하여 spring server를 띄움.이렇게 흐름을 이해하고 github Actions workflow를 작성해도 괜찮을까요?react는 3000포트를 사용하고, Spring은 8080포트를 사용하는걸로 아는데, 포트번호가 달라도 알아서 잘 통신이 되나요..??또 Spring workflow에서 프론트 Git 레포지토리까지 왔다갔다 하면서 S3 업로드 자동화를 해주는게 맞나요...?? 제가 프론트 지식이 아예없어서 S3에 프론트 프로젝트를 업로드하면 어떻게 백엔드와 어떻게 통신을 하는건지 잘 이해가 가지않습니다. 홈화면의 페이지가 있다면, 로그인이라는 버튼을 눌렀을 때 백엔드에 api/login이라는 요청을 보낸다고 했을 때 아무런 작업을 안해줘도 알아서 서로 통신을 하는지... 인프라 개념이 아직 미숙하다 보니 글도 장황한 것 같습니다 죄송합니다.. 😢정리해보면서도 스스로 구조를 잡고자 하는 중인데, 혹시 제가 놓치고 있는 개념이 있다면 알려주시면 정말 감사하겠습니다!

ㅇㅅㄱ · Answer

프론트엔드에 대한 지식이 없는게 문제가 아니라 운영체제와 네트워크에 대한 지식이 없는게 근본적인 문제인 것 같습니다.3000번포트로 제공되는 데이터들은 사용자에게 js/css/html + asset의 형태로 날라갑니다.그리고 이후 사용자의 브라우저에 도착한 js코드에 의해 같은 IP의 8080번 포트로 api 요청을 보내게 됩니다.즉, 3000번 포트 <=> 8080번 포트의 통신이 아니고(아마 이렇게 오해하고 계신 것 같습니다.)3000번 포트를 통해 전달받은 js 코드와 그를 충실히 따르는 브라우저 <=> 8080번 포트의 통신입니다.이는 github actions와도 크게 관련이 없는 문제인 것 같습니다. 두 개의 서비스는 별도로 생각되어야 하고 그것을 의도한게 rest api입니다.제공해주신 블로그 글은 안봐서 좀 다른 얘기를 하고 있을 수도 있는데... 너그러히 양해 바랍니다

'코딩두잇' · Answer

전문가와 원포인트 레슨으로 학습 상담을 해보세요

NullOps · Answer

운영 배포시 cors 잘 해결하기면 될듯..화이팅

adkb · Answer

Spring에서 workflow에 Github에 올라와있는 React 프로젝트를 S3에 업로드하고 CloudFront로 배포하도록 자동화이후 workflow에 백엔드 Spring 프로젝트를 Docker 이미지로 패키징하여 ECR에 이미지를 Push.workflow에 SSH로 EC2에 접속하는 코드를 작성. EC2에서 ECR에 올린 이미지를 Pull받은 뒤 해당 이미지로 docker run 하여 spring server를 띄움.이렇게 흐름을 이해하고 github Actions workflow를 작성해도 괜찮을까요?react는 3000포트를 사용하고, Spring은 8080포트를 사용하는걸로 아는데, 포트번호가 달라도 알아서 잘 통신이 되나요..??또 Spring workflow에서 프론트 Git 레포지토리까지 왔다갔다 하면서 S3 업로드 자동화를 해주는게 맞나요...??CloudFront Component를 사용해본 경험이 없지만 약간 AWS RDS처럼 일정부분 service로 제공해주는 과금형 컴포넌트 같군요. 2, 3번은 종종 그런방식으로 씁니다.깃헙 액션을 그렇게 작성하시면 되고, react 3000번 포트로 서빙 하고 - spring은 8080포트로 서빙을 합니다. 일반적으로 프론트 서버와 백엔드 서버는 직접적으로 통신할 일이 거의 없습니다. (프론트 서버의 자원을 수집하는 용도의 모니터링 서버가 아니라면)프론트 서버와 백엔드 서버가 직접 통신하는게 아니라 프론트를 서빙받는 사용자의 클라이언트 (JS를 해석하는 브데스크톱, 모바일의 브라우저 또는 앱)이 백엔드 서버와 통신을 하게 됩니다. 그래서 ephemeral port (client) 와 8080이 커넥션을 맺어 통신하겠지요!또한 프론트 서버 3000번과 ephemeral port(client)가 커넥션을 맺어 정적 파일등을 받을것같습니다.왠지 저도 면접준비해야할것 같아서 정리해봤습니다.

백엔드 프론트엔드 배포 흐름을 잘 모르겠습니다.

4개의 답변

Q&A 목록