[개발환경] 윈도우11에 NginX로 Reverse Proxy와 로드 밸런싱 구성하기

 

 

개발환경

 

OS : Window11
NginX : Windows-1.24.0
node.js : v18.16.0
Express.js : 4.19.2

 

 

 

 

 

 

들어가기 전

 

NginX가 설치되어 있지 않으면 아래의 글을 읽어서 설치해 주시면 됩니다.

https://nginx.org/

nginx news

 

설치와 환경 변수 세팅은 아래의 글을 읽고 따라와 주시면 됩니다.

https://coasis.tistory.com/21

[개발환경] 윈도우11에 NginX 설치해서 Proxy Server 구성해보기

 

 

 

 

 

 

NginX의 추세와 사용하는 기업들

 

요즘 Web Server의 인기는 어떻게 될까?

출처 : https://w3techs.com/

출처 : https://www.netcraft.com/blog/june-2023-web-server-survey/

 

이렇게 보니 NginX 꾸준히 사용률이 올라가고 지금 현재에도 웹서버 1등으로 사용하는 것을 볼 수 있습니다.

이제 이 트렌드를 따라가야 하므로 잘 배워주시기 바랍니다.

 

 

 

NginX를 사용하는 기업들은?

 

NginX를 사용하는 기업들은 Toss, Netflix 등이 있습니다.

 

그림1 Toss가 쓰는 NginX

그림2 Netflix가 쓰는 NginX

 

 

 

 

Reverse Proxy가 뭔데?

 

글로 정리하자면, 클라이언트(사용자, 브라우저)와 웹 서버 사이에 위치하여 요청과 응답을 대신 처리해 주는 서버입니다.

 

여러 가지의 검색을 통해 얻은 것은 Reverse Proxy(리버스 프록시)는

 

• 하나 이상의 웹 서버 앞에 위치하여 클라이언트의 요청을 가로채는 서버입니다.
• 클라이언트의 요청을 받아서 하나 이상의 서버로 전달한 후, 서버로부터의 응답을 클라이언트에게 다시 전달하는 서버입니다.

이렇게 텍스트만 보면 절대로 감이 올 거라고 생각이 들지 않습니다.

 

 

아래의 이미지로 설명하겠습니다.

그림3 리버스 프록시

 

 

 

 

 

 

Reverse Proxy가 가진 장점

 

보안 강화

클라이언트는 리버스 프록시 서버를 통해서만 서버에 접근할 수 있어 서버의 IP 주소를 숨길 수 있습니다.

 

로드밸런싱

여러 서버로 트래픽을 분산시켜 서버의 부하를 고르게 분배합니다.

이를 통해 서버의 과부하를 방지하고 서비스의 안전성을 높힙니다.

 

캐싱

자주 요청되는 데이터를 리버스 프록시 서버에 캐싱하여 응답 속도를 높이고 서버의 부하를 줄일 수 있습니다.

 

 

 

 

 

 

로컬에다가 Node서버와 Reverse Proxy와 로드밸런싱 구성해보기

 

우선적으로 NginX와 Node.js는 설치가 되어 있다고 가정하겠습니다.

 

• 설치한 NginX는 C:\nginx 위치에 존재합니다.
• Node (express.js)를 이용해서 리버스 프록시를 구성하여 로드밸런싱을 확인하려고 합니다.

 

 

1. VS Code에 express 설치하기

[작업할 폴더] 를 만들고 해당 위치를 기억해 두시면 됩니다.
예를 들어, C드라이브에 study라는 폴더를 만든다면 C:\study 위치를 알아 두시면 됩니다.  

 

VS Code에 작업 영역을 추가하시고 아래와 같이 TERMINAL에서 명령어를 입력해 줍니다.

npm install express

 

간단히 보는 것이기 때문에 라이브러리만 설치된 것을 볼 수 있습니다.

그림4 express 설치한 결과

 

 

 

2. app.js 파일 생성하고 코드 넣기

이제 해당 [작업할 폴더]에 app.js 라는 파일을 만들고 아래와 같은 코드를 넣어주시기 바랍니다.

그림5 app.js 생성한 결과

저희는 3001번, 3002번, 3003번 포트를 가진 서버를 기동 시킬 겁니다.

// app.js 파일 코드
const express = require('express');

// 서버 1: 포트 3001
const app = express();
app.get('/', (req, res) => {
    console.log('1번왔다');
    res.send('Hello from Server 1');
});

app.listen(3001, () => {
    console.log('Server 1 running on http://localhost:3001');
});


// 서버 2: 포트 3002
const app2 = express();
app2.get('/', (req, res) => {
    console.log('2번왔다');
    res.send('Hello from Server 2');
});

app2.listen(3002, () => {
    console.log('Server 2 running on http://localhost:3002');
});


// 서버 3: 포트 3003
const app3 = express();
app3.get('/', (req, res) => {
    console.log('3번왔다');
    res.send('Hello from Server 3');
});

app3.listen(3003, () => {
    console.log('Server 3 running on http://localhost:3003');
});

 

 

 

3. NginX 설정 파일 수정

다운로드 받은 NginX 폴더에 /conf에 위치해 있는 nginx.conf 파일을 메모장이든 VS Code 로든 열면 됩니다.

즉, C:\nginx\conf 폴더 위치에 있는 nginx.conf 파일을 더블 클릭 해줍니다.

 

갑자기 길고 무서운 텍스트들이 나옵니다..

그림6 출처 : 네이버 웹툰 놓지마 정신줄

 

 

마음을 다시 잡곤 아래와 같이 코드를 삽입합니다.

그림3 NginX 리버스 프록시 설정

http {
    include       mime.types;
    default_type  application/octet-stream;

    # upstream 블록을 사용하여 로드 밸런싱할 서버들을 정의합니다.
    upstream backend_servers {
        server localhost:3001;
        server localhost:3002;
        server localhost:3003;
        # 필요에 따라 추가 서버를 정의할 수 있습니다.
    }

    server {
        listen       8889;
        server_name  localhost;

        location / {
            proxy_pass http://backend_servers;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

 

• http안에 server 블록 : server 블록에서는 Nginx가 들어오는 요청을 받고, location / 블록에서는 해당 경로로 들어오는 요청을 정의된 upstream backend_servers에 정의된 백엔드 서버들로 프록시합니다.
  
  
• http안에 upstream 블록 : upstream backend_servers 블록에서 각 백엔드 서버의 주소와 포트를 지정합니다.
  현재 저의 예제에서는 localhost의 3001, 3002, 3003 포트에 각각 서버가 있습니다.

 

 

 

4. node 서버 기동과 NginX 기동

VS Code에서 npm install 했던 TERMINAL로가서 아래의 명령어로 node를 기동해줍니다.

node app.js

그림7 node 서버 실행

 

그 다음 윈도우 검색을 하여서 명령 프롬프트(CMD) 창을 열어서 NginX 폴더로 이동해 줍니다.

이제 NginX를 기동해주시고, 다 사용하시면 중지를 아래 명령어를 이용하여 중지시켜주면 됩니다.

cd C:\nginx			# 폴더 위치 이동

start nginx			# NginX 시작(기동)
nginx -s stop			# NginX 중지
nginx -s reload			# NginX 재시작

 

 

 

5. 결과와 테스트

아놔 동영상은 못 올리네 사진으로만 설명하라는 건가?

그림8 궁시렁궁시렁

 

 

자 이제 localhost:8889를 브라우저에 입력하여 들어가 줍니다.

새로고침 여러 번 해보시면 숫자가 막 바뀌는 것을 볼 수 있습니다.

그림6 결과1 브라우저 화면

그림9 결과2 서버 로그

 

 

오!!!!!!!!!!!! 잘 뜨는 것을 볼 수 있습니다.

이제 로컬뿐만 아니라 개발(TB) 서버, 상용(운영) 서버에 배포하였을 때 새로고침하면서 잘 적용되었는지 확.. 인...

 

 

 

 

 

 

 

 

그림10 펀치

 

그렇게 테스트하여 확인하시면 한 대 맞는 겁니다.

 

이제 접근한 기록을 담는 access.log, 에러가 났을 때 기록을 담는 error.log를 까서 보시거나

명령 프롬프트(CMD) 또는 터미널을 열고 아래와 같이 요청을 여러번 보내서 응답이 분산되는지 확인합니다.

curl -I http://localhost:8889

 

자 이제 멋진 개발자가 되었습니다. ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

 

 

 감사합니다.