고물상
44
2021-02-22 21:58:31
5
181

프론트엔드와 백엔드 분리 배포에 관한 질문입니다.


요즘 프론트엔드와 백엔드를 분리해서 개발하고 배포한다고 알고있는데 그 방식이 궁금해서 질문드립니다..

개발을 spring+jsp 이용해서 하나로(?) 개발을 해봤는데

요즘 공부하기 위해 React + Spring Boot를 이용해 프론트와 백을 분리해서 개발중에 있습니다.

개발할 때는 리액트는 3000포트로 스프링 부트는 8080포트로 이용하게 되는데요

만약 이 프로젝트를 실제 서비스한다고하면 어떻게 배포를 하는건가요?

하나의 서버가 아닌 두 개의 서버에 각각 프론트와 백을 배포해서 사용해야 하나요?

아니면 하나의 서버에 프론트와 백을 포트만 다르게해서 배포하는건가요?

아니면 다른 방식으로 이루어지는건가요?

답변 주시면 감사하겠습니다!

0
  • 답변 5

  • 피자7
    530
    2021-02-22 22:52:09

    서버 두개를 두고 배포합니다

    하나는 프론트 서버로 웹페이의 정적파일(html,js 등등)만 제공하고

    스프링 서버를 따로둬서(api 서버라고 부릅니다)

    프론트에서 스프링서버 주소 호출해서 여러가지 로직 처리합니다

    그리고 리액트라면 보통 SPA를 쓸텐데(사실 저도 리액트 안써봐서 모름)

    spa에 관해서도 한번 검색해보세요 대충 어떤식으로 동작하나 알수있습니다

  • Hide_D
    567
    2021-02-23 01:22:37 작성 2021-02-23 01:22:43 수정됨

    방법이야 여러가지가 있겠지만..


    nginx의 reverse proxy를 써서

    / 는 3000번 포트를 부르고,

    /api/ 는 8080 포트를 부르도록 하는 방법이 깔끔하긴 해요. 

  • 니르바나
    1k
    2021-02-23 09:08:01 작성 2021-02-23 09:15:34 수정됨

    1. 전체적인 설명입니다.

    nginx django vue 기반으로 배포까지 끝냈습니다.

    django나 스프링도 비슷하다 생각하고 결론부터 이야기드릴게요.

    실제로 유저와의 통신은 스프링 8080포트로 하는겁니다.

    8080포트에서 요청이 들어가고 static 파일이 필요하면 리액트 3000포트에서 가져와서 쓰는거구요.

    webpack 번들링 통해서 핫스왑 적용했더라면 그게 메모리에 올라가서 바로바로 적용이 되겠죠.

    이걸 배포할때는 8080포트에서 static 파일을 가져오는 정의부가 있을건데,

    제 경우는 그 경로를 요청하는걸 nginx쪽에서 reverse proxy를 써서 가져올 수 있도록 했습니다.

    static 파일은 aws s3에 올렸구요. 그쪽에 안올리고 프로덕트 서버 특정 경로에 올려도됩니다.


    하나씩 찾아가면서 하셔야될거에요. django vue 기반으로는 배포까지 완벽하게 설명해둔 곳이 없더라구요.. vue보다는 react는 자료가 많을것 같긴한데,아무래도 레거시 스택보다는 자료가 적어서 조언 받을 만한 곳도 많지 않습니다.

    스프링은 서버를 어떻게 띄우는지 모르겠지만 장고는 gunicorn으로 배포할때도 특정 포트로 배포하는게 아니고, 리눅스 소켓을 쓰는게 여러가지로 장점이 있어 그렇게 배포했습니다.

    참고로 배포시에 민감한 설정 파일에 대한 보안은 신경쓰세요.. 
    또 웹팩 사용하시고 번들링 파일이 커진다면 모듈별로 파일을 나누는 것도 고려하시구요.

    쉽게 생각하세요.

    spring= django
    vue = react
    를 동일시하고 전체적인 설명을 한번 더 드리면요.
    nginx로 모든 client 요청이 들어옵니다.
    정의에 따라서 처리되는데, 제경우는 특별한 요청 외에는 다 django 쪽으로 들어갑니다.
    django 쪽에서 static 파일이 필요하면 다시금 nginx쪽으로 요청이 들어가고, static 정의에 따라 파일을 가져옵니다.
    다만 django 쪽에서 static 파일 경로 설정을 잘못하면 제대로 못가져오는 경우가 있으니 잘 맞춰줘야되요~

  • 니르바나
    1k
    2021-02-23 09:09:57 작성 2021-02-23 09:14:49 수정됨
    2. 하나의 서버에서 해도되고, 따로 서버를 둬도되고 마음대로 하시면됩니다. static 파일도 내부 폴더 만들어서 넣어두시면되요. nginx는 정의해둔 경로에 따라서 파일만 가져올뿐이에요.

    상용화 하실거면 처음부터 aws s3 같은 정적파일 서버를 따로 두시는게 나을거에요.
    내부서버에 정적 파일이나 미디어 파일이 쌓이면 s3 서버 따로 쓰는것보다 비용이 더듭니다..
    s3보다 ec2 instance의 저장 비용이 훨씬 비싸요~

    정적/동적파일을 한서버에서 다 처리하는 것도 비효율 적이구요.
    테스트나 어느시점까지는 한서버에서 해도됩니다.
    다만 다시 다 옮길거면 그 어느시점이라는게 aws 프리티어로 충분히 커버할 수 있는거면 그냥 처음부터 s3 쓰는게 낫죠. s3 이용 비용이 많이 나올정도면 이미 서비스 이용자가 엄청나게 많을거고 ec2 인스턴스 내부저장소로는 커버하기 힘든 수준일겁니다. 너무 비싸서요~
  • 고물상
    44
    2021-02-23 20:29:46

    @피자7

    @Hide_D

    @니르바나
    모두 친절한 답변 감사합니다^^

    어느정도 이해가 되네요!

    조금 더 공부좀 해봐야겠습니다!


  • 로그인을 하시면 답변을 등록할 수 있습니다.