웹 서버(Web Server) - React + nginx

도커를 이용한 배포를 공부하는 도중 React 애플리케이션이 정적 파일로 빌드되어 Nginx를 통해 제공된다고 하였다.

평소 로컬 환경에서 개발 시 Spring boot + React + MySql을 사용할 때는 nginx를 사용하지 않고 개발을 진행했는데, 배포 과정에서 React를 Nginx를 사용하는 이유가 궁금해서 정리해보았다.

 

웹 서버란?

 - 웹 서버는 인터넷에서 웹 프라우저(사용자)와 웹 애플리케이션(서버) 사이에서 데이터를 주고받는 중간 역할을 하는 프로그램이다. 웹 서버는 클라이언트(웹 브라우저)가 요청한 데이터를 처리하고, 그 결과를 반환한다.

 

웹 서버의 동작 방식

 - 클라이언트(사용자): 웹 브라우저(크롬, 사파리 등)에서 특정 웹 주소(ex: www.example.xxx)를 입력한다.

 - 웹 서버: 사용자가 입력한 주소에 해당하는 요청을 처리한다. 요청받은 데이터를 찾아서 사용자에게 전달한다.

 - 사용자 화면: 브라우저는 서버가 보낸 데이터를 화면에 보여준다.

 

HTTP 요청과 응답

 - 웹 서버는 HTTP 프로토콜을 사용하여 클라이언트와 소통한다.

 - HTTP 요청: 클라이언트가 서버에 보내는 메시지. (예: "이 웹페이지를 보여줘!")

 - HTTP 응답: 서버가 클라이언트에 보내는 메시지. (예: "여기 네가 요창한 웹 페이지야!")

 

웹 서버의 주요 역할

 - HTML, CSS, JavaScript, 이미지와 같은 정적인 파일을 제공

 - 클라이언트 요청에 따라 변환하는 콘텐츠 제공, 보통 웹 서버는 이를 직접 처리하지 않고, 백엔드 애플리케이션(Spring boot 등)에 요청을 전달한다.

 - 리버스 프록시: 웹 서버가 클라이언트 요청을 다른 서버로 전달(Nginx가 요청을 Spring boot로 전달)

 - 보안 강화: HTTPS를 통해 데이털르 암호화하여 안전하게 주고받을 수 있도록 지원

 

웹 서버의 종류

 - Apache, Nginx, IIS(Internet Information Services)

 

로컬에서 React 개발

 - React 개발 환경에서 npm start로 실행되는 React 개발 서버가 있어서 Nginx를 사용하지 않는다. 

 - npm start로 실행되는 React 개발 서버는 개발 중 코드를 빠르게 실행하고 테스트할 수 있는 서버를 제공하며,

Hot Module Replacement (HMR)를 통해 코드를 수정할 때 실시간으로 브라우저를 새로고침하지 않고 변경 사항을 반영한다. 또한 웹 서버의 역할(HTTP 요청 처리 및 정적 파일 제공)을 간단히 수행한다.

 

웹 서버가 없는 경우의 문제 (운영 환경에서)

 - 운영 환경에서는 React 개발 서버를 사용할 수 없고, 정식 웹 서버가 필요하다. 만약 운영 환경에서 웹 서버를 사용하지 않거나 제대로 설정되지 않으면 다음과 같은 문제가 발생할 수 있다.

 1. 정적 파일 제공 문제

  - React 애플리케이션은 빌드 후 정적인 파일(index.html, main.js, style.css)로 구성되는데 웹 서버가 없으면 클라이언트는 정적 파일을 어디서 다운로드할지 알 수 없다.

 2. 라우팅 문제

  - React 는 SPA(Single Page Application)로, 클라이언트 사이드에서 라우팅을 처리한다. 브라우저에서 URL을 직접 입력하거나 새로고침할 경우 서버는 해당 경로에 대한 파일을 찾으려고 시도하는데, 웹 서버가 없으면 브라우저가 요청한 URL에 대한 적절한 응답을 반환하지 못해 404에러가 뜬다.

 3. 성능 문제

  - React 개발 서버는 운영 환경에서 최적화되지 않아 성능이 저할될 수 있다. 고성능의 정적 파일 서빙이 불가능하며, 많은 사용자 요청을 처리하는 데 적합하지 않다.