리액트 프로젝트 배포를 리버스 프록시 구조로 개선하기

 

http 완벽 가이드 책을 공부하면서

 

http 2.0과 1.1의 차이를 학습했고

 

현재 제가 진행중인 최근 프로젝트에서 썸네일 같은 이미지들을 많이 다룰 일이 생겼고

 

슬슬 배포도 진행중인 상황이라 http 2.0이 많이 필요한 상황이었습니다.

 

스터디를 통해 알게된 것은 http 2.0은 https 위에서만 돌아간다는 것입니다. (브라우저 정책)

 

그래서 프로젝트에선 이미 웹서버와 let's encrypt를 이용해 인증서를 발급받고 https를 구축한 상태이기 때문에

 

문제가 없지 않을까 토론하던 중

 

문제를 발견하게 됩니다...!

 

 

바로 위 사이즈의 as-is 상태처럼 프론트 빌드 파일이 있는 웹서버하고는 https가 적용되지만

 

js가 브라우저에서 돌아가면서 api 서버와 직접적으로 통신하게 되는 구조여서

 

이 api 서버하고는 https가 적용되지 않는 것입니다.

 

만약 적용이 된다고 해도 인증서를 두 번 발급해야 하고 

 

다시 생각해보니 보안에도 취약하며 향후 로드밸런싱에도 문제점이 많이 보이게 되었습니다.

 

 

그래서 to-be처럼 변경하고 있습니다.

 

to-be처럼 구현하게 되면 사용자인 브라우저는 backend api server를 아예 존재하는지도 모르게 됩니다.

 

이렇게 되면 nginx를 이용해 로드밸런싱을 하여 향후 더 확장이 용이하게 되었고

 

https도 nginx와 브라우저 사이에서만 이뤄지면 되게 됩니다.

 

웹서버와 api 서버(ec2) 사이의 통신은 브라우저가 아니니 https 적용이 필요하지 않으면서 2.0을 사용할 수 있고요!

 

이렇게 계획을 세우게 되었습니다!