[Nginx] Nginx를 이용한 React 배포 및 Reverse Proxy 서버 구축하기 (EC2 + Nginx + express)

1. Reverse Proxy란? EC2 한 대에 백엔드 코드와 프론트엔드 코드가 동시에 올라간다고 해보자. 보안 그룹 설정에서 22번 포트, 80번 포트, 443번 포트를 제외한 모든 포트는 기본적으로 거부 정책이 적용되어 있다. ec2의 public IP가 1.2.3.4라 가정한다면, 1.2.3.4:80 혹은 1.2.3.4:443으로 접근했을 때 Nginx는 React의 빌드된 파일들을 사용자에게 서빙해줄 것이다. 사용자가 웹 페이지를 볼 수 있게 되는 것이다. 그런데 만약 빌드된 React 파일에 백엔드로 보내는 fetch요청이 있었다고 해보자. 그런데 위에서 이야기했던 것처럼 백엔드는 프론트 코드가 올라가 있는 같은 EC2에 서버를 켜게 된다. 8080 포트에 백엔드 코드를 돌리기 시작했다고 해보자. 그럼 fetch요청은 코드에서 fetch('1.2.3.4:8080/~~~~') 와 같이 요청을 해야 할 것이다. 그러나 가장 처음 이야기했던 조건처럼, 22번 포트, 80번 포트...

원문링크 : [Nginx] Nginx를 이용한 React 배포 및 Reverse Proxy 서버 구축하기 (EC2 + Nginx + express)