[AWS] React와 Django 배포 방법 생각하기

ARA JO·2021년 2월 20일
0

Simtime 개발일지

목록 보기
4/7

S3 + cloudfront + EC2

  • FE는 S3, cloudfront를 통해 static site(정적 사이트)로 배포되어 장고와는 완전히 별개로 호스트된다. REST API를 통해 백엔드로부터 데이터를 얻어온다.

  • BE는 뷰가 없는 Django rest API이다. API server라고 할 수 있다.

  • FE와 BE가 다른 서버이기 때문에 서로 다른 도메인 이름을 갖게된다.

  • 두개의 git repo가 필요하다.

장점

  • BE와 FE의 완벽한 분리
    - 권한을 FE, BE 각각 나누어 부여할 수 있다.
    - 한쪽에서 단순한 변경이 필요할 때 빠르고 간결하게 배포할 수 있다.
    - BE가 죽어도 FE는 살아있으므로 사이트 자체가 죽지 않는다.

  • s3는 저장 용량이 무한대이다. 즉, scaling이나 load balancing에 신경쓰지 않아도 된다.

  • s3는 수천대 이상의 성능 좋은 웹서버로 구성되어 있어 성능이 매우 좋다. 즉, ec2와 함께 사용시 성능 향상과 비용 절감 효과를 기대할 수 있다.

단점

  • 각각의 배포 과정을 따로 관리해야한다.
  • 크로스 도메인

Only EC2

ec2만 이용하는 방법에도 두가지 경우를 생각할 수 있다.

1. django로 전부 처리

  • 웹팩을 이용해서 빌드하고, django의 template을 이용해 배포한다.
  • 하나의 git repo만 필요하다.

장점

  • 간단한 인프라를 갖게 된다.
  • 백엔드-프론트엔드가 잘 통합되어 있어 데이터 전달, 서버사이드렌더링에 유리하다.

단점

  • 통합과정이 복잡하다.
  • BE와 FE의 완벽한 분리가 불가능하다.
  • BE 또는 FE 한쪽에서의 작은 변화를 반영하기 위해 전체를 재배포해야한다.

2. django + nginx(웹서버)

  • FE를 별개로 static site로 배포하지만, 하나의 서버(ec2)에서, 하나의 도메인 네임하에 배포한다.

  • 배포 과정은 독립적이다.

장점

  • 독립적인 배포
  • FE와 BE의 분리

단점

  • nginx 설치

Simtime?

nginx로 EC2안에 웹서버를 둘 것인가, S3를 활용해볼것인가...

처음에는 정말 단순하게 AWS의 다양한 자원을 활용해보고 싶어 s3 + ec2를 써야지 룰률~ 하고 생각했었다. (ElasticBeansTalk도 좋아보였지만 우선 학습자로서 고전적인 설정(?!)을 해보고 응용해보는 것이 좋을 것 같다. 후에 dev와 prod용을 나누면서 시도해보겠다) 이를 목표로 두고 FE와 BE를 소스를 완전히 분리시키는 것은 성공했지만 막상 직접 AWS로 ec2를 만들고 이것저것 찾아보니 고민이 된다. nginx를 사용하는 것도 서버 구성에 대한 좋은 공부가 될 것 같다.

결론적으로 nginx쪽으로 기울고있다.
일단 하나의 도메인을 사용하고 싶고, 개발해왔던 환경(배포따위 고려하지도 않던...)을 크게 바꾸지 않아도 바로 적용할 수 있을 것 같다.

마음이 90%이상 기울지 않으면 시작 못하는 병이 있다. 하지만 이제 방황을 멈추고 시작해야 할 것 같다. 돌이켜보면 고민한다고 결정은 못하고 맘만 불편하던 시간에 두 케이스 다 한 번씩 만들어 봤겠네😂

추가)

prod와 dev 각각 다르게 구성해 보기로 결정했다!

  • prod: Elastic beanstalk
  • dev : ec2-> nginx + uwsgi

진행상황

  • dev 완료.
  • prod ing

해당 포스팅은
3 ways to deploy a Django backend with a React frontend by Matthew Segal
주로 참고하여 작성했습니다.

profile
Sin prisa pero sin pausa (서두르지 말되, 멈추지도 말라)

1개의 댓글

comment-user-thumbnail
2022년 10월 10일

안녕하세요. 질문이 있습니다!
React 와 django로 프로젝트를 하고 있는데, nginx를 설치하여 conf파일에 react 빌드파일의 경로 그리고 let‘s encrypt에서 인증서 경로도 설정해주고 443포트로 디다이렉트 시켜주게 하였습니다. EC2에 인바운드 설정도 해주었습니다.. 근데 runsslserver로 장고 서버를 구동시켜도 웹과 통신할 수가 없는 상황입니다.. 웹에서 유효한 인증서라고 나와있고 문제는 없어 보이는데 제가 wsgi를 설정하지 않아서 ssl통신이 되지 않는 것인지 여쭙고 싶습니다

답글 달기