Nginx 개념 + 간단 실습

개념

Nginx란?

Nginx는 웹 서버 구축을 도와주는 소프트웨어이다.

서버는 정적인 데이터와 동적인 데이터를 제공해줄 수 있다.

정적인 데이터란 html, css와 같은 데이터들이고 동적인 데이터란 DB조회나 다양한 로직으로 생성된 데이터들을 뜻한다.

SPA가 등장하게 되면서 이렇게 다양한 데이터들을 따로따로 보내줄 수 있도록 서버의 기능을 분리하기도 한다.

정적인 데이터는 web server가 빠르게 클라이언트에게 제공을 하고 동적인 데이터는 WAS(web application server)에 요청을 보내고 WAS가 처리한 데이터를 클라이언트에게 바로 보내준다.

 

Nginx가 이런 web server의 구축을 도와준다.

web server를 구축할 수 있는 소프트웨어로는 apache가 있다.

Apache는 스레드/프로세스 기반으로 하는 방식으로 요청을 처리하는데, 요청 하나당 스레드 하나가 처리하는 구조로 사용자가 많아지면 CPU 와 메모리 사용이 증가해서 성능이 저하될 수 있다고 한다.

Nginx는 비동기 이벤트 기반으로 하는 방식으로 처리하는데 요청이 들어오면 어떤 동작을 해야하는지만 알려주고 다음 요청을 처리하는 방식으로 진행된다고 하는데, 흐름이 끊기지 않고 응답이 빠르다고 한다.

 

Nginx의 기능

1. 리버스 프록시 클라이언트는 리버스 프록시 서버에 요청을 보내기 때문에 실제 서버의 ip를 노출시키지 않아도 되서 보안이 강화된다.
2. 클라이언트가 서버를 호출할 경우 직접 서버를 호출하는 것이 아닌 리버스 프록시 서버를 호출하게 되고 리버스 프록시 서버가 서버에 요청하고 응답받아 응답 받은 것을 클라이언트에게 전송해준다.
3. 로드밸런싱 또한 가능하다. 하나의 서버가 죽게 되더라도 다른 서버들이 동작을 하고 있는 것이기 때문에 무중단 배포가 가능하게 된다.
4. 사용자가 많아지게 될 경우 부하를 분산시키기 위해 웹 서버는 여러대가 함께 요청을 처리하게 되는데, 한 서버에 요청이 몰리지 않게 분산시켜 준다.

실습

nginx,react, node js를 통해 간단한 실습을 해보자

 

1. ubuntu 환경에 nginx설치

sudo apt-get update
sudo apt-get install nginx

 

apt-get install을 통해 nginx를 설치하면 자동으로 80번 포트로 들어오는 요청에 nginx default html파일을 반환

 

2. cra를 통해 간단한 SPA 웹 프론트엔드 구성

npx create-react-app my-app
cd my-app
npm start

3. 프론트에서 백으로 axios 요청을 보냄 {Nginx가 있는 ip주소}/api

 

4. Express-generator로 간단한 백엔드 구성

npx express-generator

# for earlier node version
npm install -g express-generator
express

5. /api 요청에 대한 답으로 아무 ‘string’값을 보낸다.

 

6. /etc/nginx/sites-available/default 내의 server{ ... }안에 해당 /api에 대한 proxy_pass 설정을 추가한다.

server {
	
    ...
    
	location /api {
		proxy_pass http://localhost:3001;
		proxy_http_version 1.1;
		...
	}
    
    ...
    
}

/api에 대한 요청은 reverse proxy가 proxy_pass에 설정한 path로 가도록 중계해 준다.

전체적인 Flow

1. ip 주소를 통해 Nginx로 구성한 웹 서버에 접속
2. 접속하자마자 Nginx에 api 요청
3. Nginx에서 reverse proxy를 통해 backend에 요청 전달
4. backend에서 response를 보냄

결론

Nginx는 웹서버 구축을 도와준다.

backend에 대한 요청이 있을 경우 리버스 프록시를 통해 서버를 호출하게 된다.

로드 밸런싱 기능을 가지고 있다.