인프런 커뮤니티 질문&답변
작성한 질문수
백엔드 프론트엔드 배포 흐름이 이해가 안갑니다.
작성
·
143
·
수정됨
0
글을 작성하고 조금 더 공부해봤는데 저는 프론트(3000번 포트)와 백엔드(8080번 포트)간의 통신으로 웹이 배포되고 운영되는걸로 알았는데, 3000번 포트와 8080번 포트간의 통신을 하는 게 아니라고 하는 것 같아서 댓글에 다시 정리해보았습니다.
글의 내용처럼 서버가 배포되는것이 아닌, 댓글에 남긴 흐름으로 배포가 되는 게 맞는건지 궁금합니다.🥹
안녕하세요.
최근 재성 강사님의 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%B0
https://velog.io/@jwo0o0/AWS-S3-%EB%B2%84%ED%82%B7-Github-Action%EC%9C%BC%EB%A1%9C-CICD
강사님이 AWS 강의에 react 배포하는 방법으로 올려주신 블로그 포스팅을 참고해서 이해하려고 하는데 제가 이해한 흐름이 맞는 지 확인해주실 수 있나요?
현재 프로젝트에서 백엔드와 프론트를 분리해서 각각 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이라는 요청을 보낸다고 했을 때 아무런 작업을 안해줘도 알아서 서로 통신을 하는지...
인프라 개념이 아직 미숙하다 보니 글도 장황한 것 같습니다 죄송합니다.. 😢
정리해보면서도 스스로 구조를 잡고자 하는 중인데, 혹시 제가 놓치고 있는 개념이 있다면 알려주시면 정말 감사하겠습니다!
답변 3
0
안녕하세요 냠냠님 ~ 질문 너무 잘해주셨어요 ㅎㅎ
말씀하신 흐름과 고민들, 그리고 정리까지 너무 잘 하셨어요!
제가 조금만 더 보완해서 정리드릴게요~
"Spring에서 workflow에 Github에 올라와있는 React 프로젝트를 S3에 업로드하고 CloudFront로 배포하도록 자동화"
(Spring 서버 workflow에서 프론트 git repo까지 접근해 S3 배포까지 하는 게 맞는가?)
-> 꼭 Spring 프로젝트 workflow에서 프론트 빌드 & 배포까지 함께할 필요는 없습니다 ~
배포 주기가 서로 다르기 때문에 보통은 다음처럼 프론트와 백엔드 각각의 workflow를 따로 관리해요 !!
[프론트 repo의 GitHub Actions]
- npm install, npm run build 후
- S3에 업로드 CloudFront 캐시 무효화
[백엔드(Spring) repo의 GitHub Actions]
- Docker 이미지 build & ECR push
- EC2에 SSH 접속 → ECR pull → 컨테이너 run
백엔드 코드만 바뀌었는데 프론트까지 빌드할 이유가 없기 때문이죠 ~
"react는 3000포트를 사용하고, Spring은 8080포트를 사용하는걸로 아는데, 포트번호가 달라도 알아서 잘 통신이 되나요..??"
-> 포트가 달라도 전혀 문제습니다 ~
댓글로 다시 정리하며 말씀해 주신대로, 운영환경에서는 포트가 사용자에게 노출되지 않아요 :)
"(최종 댓글)이렇게 이해해도 괜찮을까요?"
-> 네 !! 정확하게 완전히 이해하셨습니다 !!
특히 개발 환경과 운영환경의 차이를 명확히 구분하시며 정리하신 점 너무 좋습니다 ~~
추가로 궁금한 점 또는 협업하시면서 더 궁금한 점 생기시면 언제든지 질문 주세요~
지금처럼 스스로 구조를 정리해보는 습관은 진짜 좋은 태도예요🔥
응원합니다 😄
0
백엔드와 프론트엔드 통신 구조를 찾아보며 좀 더 공부해보았는데 아래와같이 이해해도 괜찮을까요?
3000번 포트는 React 앱을 실시간으로 보여주기 위한 개발 전용 서버에서만 사용되며, 운영 환경에서는 React 앱을 build한 후 생성되는 정적 파일(index.html, CSS, JS 등)을 S3, Nginx, CloudFront 등에 업로드하여 정적 호스팅을 사용한다.
사용자가 www.home.com과 같은 도메인에 접근하면
1. 브라우저는 해당 서버(S3/Nginx)로부터 index.html을 다운로드한다.
2. index.html은 내부에서 main.js(React 번들)를 로드한다.
3. 브라우저는 이 js를 실행하여 React 앱을 시작한다.
4. 이후 페이지 이동은 모두 React가 브라우저 내에서 js로 동적으로 전환한다.
사용자 액션(버튼 클릭 등)으로 인해 https://api.home.com/api/find 와 같은 백엔드 API 요청이 발생하면,
5. 브라우저에서 React 앱이 백엔드(Spring, 8080 포트)로 API 요청을 보내고,
6. Spring 서버가 응답을 반환한다.
7. React가 그 결과를 화면에 렌더링한다.
즉 사용자요청 → 3000번 포트로 화면 띄워줌 → 8080포트로 API 요청 후 응답 반환 → 3000번 포트로 화면 띄운 뒤 브라우저에 전달 → 브라우저가 사용자에게 보여줌
이 아니라
사용자 요청 -> https://www.home.com (포트는 443, HTTPS) -> CloudFront or S3 or Nginx (정적 파일 호스팅) -> index.html + main.js + CSS 등 React 정적 파일 다운로드 -> 브라우저가 main.js 실행 → React 앱 구동 -> React 앱이 필요할 때 백엔드 API (예: https://api.home.com/api/user) 요청 -> Spring 서버 (8080포트) 응답 -> React가 받은 데이터를 화면에 렌더링
React가 3000번 포트를 쓰는 이유
npm start로 실행할 때, React는 Webpack Dev Server라는 개발용 서버를 띄운다.
이 서버는 HTML/CSS/JS를 실시간으로 제공하며, 코드가 바뀔 때마다 자동 리로드되는 기능이 있다(Hot Reload).
이 서버는 프론트 개발자 편의를 위한 것이지, 실제 서비스용 서버가 아니다. 기
본적으로 3000번 포트를 사용하지만, 다른 포트로 바꾸는 것도 가능합니다.
즉 운영 시점에서는 3000번 포트가 존재하지 않는다.
Spring이 8080번 포트를 쓰는 이유
Spring Boot는 기본적으로 8080 포트를 사용해 API 서버를 연다.
이 서버는 클라이언트(브라우저, React 앱 등) 의 요청을 받아서 데이터를 주거나 비즈니스 로직을 처리한다.
운영 환경에서도 API 서버는 그대로 8080번 포트를 사용한다.
[개발 중]
브라우저 → localhost:3000 → React 개발 서버
↘ 요청시 ↘
localhost:8080 → Spring API 서버
[운영 중]
브라우저 → www.home.com (S3/Nginx) → 정적 파일(index.html 등)
↘
브라우저 안에서 JS → api.home.com (8080 포트) → Spring 서버이렇게 이해해도 괜찮을까요?
0
안녕하세요, 인프런 AI 인턴입니다. 냠냠님.
백엔드와 프론트엔드를 각기 다른 서버에 배포하면서도 상호 연동하는 과정은 처음에는 혼란스러울 수 있습니다. 질문해주신 내용을 바탕으로 공동 배포 및 통신 과정에 대한 설명과 함께 흐름을 정리해보겠습니다.
프로젝트의 배포 및 설계 흐름
프론트엔드(React)의 배포
- React는 빌드 후 정적 파일 형태로 S3에 업로드됩니다.
- CloudFront를 통해 전 세계에 배포되어 사용자에게 빠르게 전달됩니다.
- 사용자가 브라우저에서 React 앱에 접속하면, API 요청이 필요할 때 지정된 백엔드 서버로 요청을 보냅니다.
- React는 빌드 후 정적 파일 형태로 S3에 업로드됩니다.
백엔드(Spring Boot)의 배포
- Spring Boot는 Docker를 활용하여 EC2에 배포됩니다.
- AWS ECR에 Docker 이미지를 올린 뒤, 이 이미지를 EC2에서 pull하여 실행합니다.
- Spring Boot는 Docker를 활용하여 EC2에 배포됩니다.
프론트엔드와 백엔드 간 통신
API 요청: React 앱에서 API 호출을 할 때, 예를 들어
api/login과 같은 요청 경로가 사용됩니다. 이 요청은 환경 설정 파일이나 브라우저 코드에서 설정한 서버 주소가 포함된 URL로 요청을 보낼 수 있도록 구성해야 합니다.- 환경 변수 또는 설정 파일에서 백엔드의 도메인/IP와 포트를 미리 지정하여, 전역적으로 이 주소로 API 요청이 이뤄지도록 합니다.
- 환경 변수 또는 설정 파일에서 백엔드의 도메인/IP와 포트를 미리 지정하여, 전역적으로 이 주소로 API 요청이 이뤄지도록 합니다.
CORS 설정: 프론트엔드와 백엔드가 다른 도메인에 배포되어 있을 때, CORS(Cross-Origin Resource Sharing) 설정이 필요합니다. Spring Boot에서는 CORS 설정을 통해 허용된 도메인에서 API 요청이 가능하게 설정해야 합니다.
가능한 문제와 대응 방안
포트 문제: 각기 다른 포트를 사용하는 것은 문제가 되지 않습니다. React는 클라이언트 측이므로 브라우저에서 실행되고, 백엔드(Spring Boot)는 EC2 상에 실행됩니다. React에서 백엔드로 요청 시, 브라우저의 환경설정에서 지정된 서버 주소로 API 호출이 가능하다면 문제 없이 동작합니다.
통신 설정: 프론트엔드 코드에서 API 요청 시 정확한 서버 주소를 명시하는 것이 중요합니다. 특히 클라이언트 쪽 코드에서 환경변수를 활용하여 개발과 운영 환경을 분리하는 것이 좋습니다.
관련 자료와 응용 정보
유사한 문제와 대응 방법에 대한 인프런의 기존 사례를 참고하시면 도움이 될 수 있습니다:
- 실무 개발 환경: 백엔드 및 프론트엔드 연동에 대한 사례
- 프론트엔드 애플리케이션 EC2 배포 관련 질문: 프론트엔드와 백엔드 배포 시 고려해야 할 사항 및 사례
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.