[MFA]Nginx Reverse Proxy Server특징 example(pnpm+turborepo+vite)

Reverse Proxy  Server

• 클라이언트 요청을 받아 백앤드 서버로 전달하고, 서버의 응답을 클라이언트에게 다시 전달하는 중간 서버 역할
• 로드 밸런싱을 통하여 트래픽을 여러 서버에 분산시키고, 적절한 서버로 라우팅 한다.
• 캐싱을 이용하여 동일한 응답을 두에 있는 서버에 다시 요청하지 않을 수 있음
• 외부 사용자로부터 내부의 서버를 숨겨 보안에 도움을 준다.
• SSL/TLS암호화를 사용하여 안전한 데이터 전송을 보장한다.

 

 

Nginx Reverse Proxy Server 특징

• 이벤트 기반, 비동기 아키텍처로 설계되어 높은 동시 연결을 효율적으로 처리한다.
• 적은 메모리와 CPU 사용으로 더 많은 트래픽을 처리할 수 있다.
• 효과적인 로드 밸런싱 기능과 강력한 캐싱 기능을 통해 서버 부하를 줄이고 응답 시간을 단축한다.

 

Nginx Reverse Proxy Server Example

프로젝트 생성

• pnpm + turborepo 사용

pnpm init

pnpm add turbo -D

 

 

워크스페이스 설정

• apps : nginx 서버 생성 예정
• services : 여러 파이크로 서비스 생성 예정

ex) pnpm-workspace.yaml

packages:
  - 'services/*'
  - 'apps'/*

 

 

turborepo 설정파일 작성

ex) turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

 

 

Nginx

1. Nginx 프로젝트 생성
2. Nginx proxy config 설정
3. Nginx 띄우기 (Docker 이미지로 띄울 예정)

 

1. Nginx 프로젝트 생성

// 프로젝트 생성 위치에서
// ex) apps/nginx-app
pnpm init

 

 

2. Nginx Proxy Config 설정

ex) apps/nginx-app/proxy-server.conf

upstream 할 서버 정의

• service_home로 upstream 요청 시 3001번 포트로 proxy 시킴
• service_sub로 upstream 요청 시 3002번 포트로 proxy 시킴

upstream service_home {
    server host.docker.internal:3001;
}
upstream service_sub {
    server host.docker.internal:3002;
}

 

서버 블록 정의

• 3000번 포트의 '/sub/'로 접근 시 upstream에 정의된 services_sub를 호출함
• 그 외의 경우 upstream에 정의된 services_home 호출

server {
    listen 3000;
    location /sub/ {
        proxy_pass http://service_sub;
    }
    location / {
        proxy_pass http://service_home;
    }
}

 

 

3. Nginx 띄우기 (Dcoker Image로 띄우기)

ex) apps/nginx-app/Dockerfile

• 도커  script 작성

FROM nginx:1.25.3-alpine

COPY proxy-server.conf /etc/nginx/conf.d/proxy-server.conf

EXPOSE 3000

 

ex) apps/nginx-app/package.json

• 빌드, 실행 스크립트 추가

"scripts": {
"build": "docker build -t nginx-app .",
"dev" : "docker run -p 3000:3000 nginx-app",
...
},

 

 

service 

1. 각 서비스 생성
2. 외부 서버에서 접근 가능하게 설정파일 수정

 

1. 각 서비스 생성

// 프로젝트 생성할 위치에서
// ex) services/service-home
pnpm create vite@latest services-home --template vanilla-ts

// ex) services/service-sub
pnpm create vite@latest services-sub --template vanilla-ts

 

 

2. 외부 서버에서 접근 가능하게 수정

ex) services/service-home/vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
  base: "/",
  server: {
    // 어디서든 접근 가능하게 설정
    host: true,
    port: 3001,
  },
});

 

ex) services/service-sub/vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
  base: "/sub/",
  server: {
    // 어디서든 접근 가능하게 설정
    host: true,
    port: 3002,
  },
});

 

 

테스트

• 3000 nginx서버와 2개의 서비스 3001,3002 잘 연결되어 있음
• 3000에서 호출 시 2개의 서비스(service_home : 3001, service_sub : 3002)를 호출하는 걸 확인할 수 있음