자바스크립트와 Nginx를 활용한 리버스 프록시 설정 방법

11 Oct 2023

Nginx

리버스 프록시는 웹 어플리케이션 개발에서 자주 사용되는 기술입니다. 이 기술을 사용하면 클라이언트로부터 받은 요청을 어플리케이션 서버로 전달하고, 그 응답을 다시 클라이언트로 보내줄 수 있습니다. 이번 블로그에서는 자바스크립트와 Nginx를 사용하여 리버스 프록시를 설정하는 방법에 대해 알아보겠습니다.

Nginx 설치 및 설정

먼저, Nginx를 설치해야 합니다. 설치 방법은 운영체제에 따라 다를 수 있으므로 해당 운영체제의 문서를 참고하시기 바랍니다. 설치가 완료되었다면, Nginx의 설정 파일을 열어 수정해야 합니다.

Nginx의 설정 파일 위치는 /etc/nginx/nginx.conf입니다. 이 파일을 열어 수정합니다.

아래와 같이 http 블록 안에 server 블록을 추가합니다.

http {
  server {
    listen 80;
    server_name example.com; # 도메인 이름을 설정합니다.
  }
}

location 블록 안에 리버스 프록시 설정을 추가합니다. 리버스 프록시로 요청을 보낼 서버의 주소와 포트를 설정합니다.

http {
  server {
    listen 80;
    server_name example.com;

    location / {
      proxy_pass http://backend-server:3000; # 요청을 보낼 서버의 주소와 포트를 설정합니다.
    }
  }
}

설정을 저장하고 Nginx를 재시작합니다.

Nginx의 설정이 완료되었습니다. 이제 클라이언트로부터 들어오는 모든 요청은 Nginx가 받아서 설정한 주소와 포트로 리버스 프록시로 전달됩니다.

자바스크립트로 리버스 프록시 설정

클라이언트 측에서 자바스크립트를 사용하여 리버스 프록시를 설정하는 방법도 있습니다. 이 방법은 웹 브라우저에서 실행되는 클라이언트 사이드 스크립트를 활용합니다.

if (window.location.href.startsWith("http://example.com")) {
  const proxyUrl = "http://backend-server:3000"; // 리버스 프록시로 요청을 보낼 서버의 주소와 포트 설정
  const proxyConfig = {
    target: proxyUrl,
    changeOrigin: true,
  };

  const proxy = require("http-proxy-middleware");
  const express = require("express");

  const app = express();
  app.use("/", proxy(proxyConfig));
  app.listen(8000);
}

위 코드는 클라이언트 측에서 자바스크립트를 사용하여 리버스 프록시를 설정하는 예시입니다. window.location.href.startsWith()를 통해 특정 도메인이 요청되면, http-proxy-middleware를 사용하여 리버스 프록시를 설정하고 8000 포트를 통해 서버를 실행합니다. 설정한 주소와 포트로 들어오는 요청은 리버스 프록시로 전달되도록 설정되었습니다.

마무리

이번 블로그에서는 자바스크립트와 Nginx를 활용하여 리버스 프록시를 설정하는 방법에 대해 알아보았습니다. 리버스 프록시는 웹 어플리케이션 개발에서 유용하게 사용되는 기술이므로, 이를 효과적으로 활용하여 어플리케이션의 성능과 보안을 향상시킬 수 있습니다. 자세한 설정 방법은 공식 문서나 자세한 튜토리얼을 참고하시면 됩니다.

#javascript #nginx