노드 또는 Angular 애플리케이션을 위한 역방향 프록시인 NGINX

리버스 프록시는 하나 이상의 업스트림 서버에서 클라이언트에 대한 리소스를 검색하는 서버입니다. 일반적으로 개인 네트워크의 방화벽 뒤에 위치하며 클라이언트 요청을 이러한 업스트림 서버로 전달합니다. 리버스 프록시는 모든 웹 애플리케이션의 보안, 성능 및 안정성을 크게 향상시킵니다. NodeJS 또는 Angular로 작성된 많은 최신 웹 애플리케이션은 자체 독립형 서버에서 실행할 수 있지만 대부분의 애플리케이션에서 요구하는 로드 밸런싱, 보안 및 가속과 같은 여러 고급 기능이 부족합니다. 고급 기능을 갖춘 NGINX는 NodeJS 또는 Angular 애플리케이션에 대한 요청을 처리하는 동안 리버스 프록시 역할을 할 수 있습니다.

NGINX 역방향 프록시 서버

이 튜토리얼에서는 NGINX를 Node 또는 Angular 애플리케이션의 리버스 프록시 서버로 사용하는 방법을 살펴봅니다. 아래 다이어그램은 리버스 프록시 서버가 작동하고 클라이언트 요청을 처리하고 응답을 보내는 방법에 대한 개요를 제공합니다.

전제 조건

여기에서 튜토리얼을 따라 이미 NGINX를 설치했습니다.

추정

NGINX 서버는 공개 도메인에서 액세스할 수 있습니다.
노드 또는 Angular 애플리케이션은 사설 네트워크의 별도 시스템(업스트림 서버)에서 실행되며 NGINX 서버에서 연결할 수 있습니다. 단일 시스템에서 설정을 수행하는 것이 매우 가능하지만.
이 튜토리얼은 SUBDOMAIN.DOMAIN.TLD 및 PRIVATE_IP와 같은 변수를 사용합니다. 적절한 위치에서 자신의 값으로 교체하십시오.

NodeJS 애플리케이션

환경에 NGINX를 이미 설치했다고 가정하고 NGINX 역방향 프록시를 통해 액세스할 예제 NodeJS 애플리케이션을 만들어 보겠습니다. 먼저 개인 네트워크에 상주하는 시스템에 노드 환경을 설정하십시오.

노드 설치

NodeJS와 최신 버전의 npm(node package manager) 설치를 진행하기 전에 이미 설치되어 있는지 확인하세요.

# node --version 
# npm --version

위의 명령이 NodeJS 및 NPM 버전을 반환하는 경우 다음 설치 단계를 건너뛰고 예제 NodeJS 애플리케이션 만들기를 진행합니다. NodeJS 및 NPM을 설치하려면 다음 명령을 사용하십시오.

# apt-get install nodejs npm

설치가 완료되면 NodeJS 및 NPM의 버전을 다시 확인하십시오.

# node --version
# npm --version

예제 노드 애플리케이션 만들기

NodeJS 환경이 준비되면 ExpressJS를 사용하여 예제 애플리케이션을 만듭니다. 따라서 노드 애플리케이션용 폴더를 만들고 ExpressJS를 설치합니다.

# mkdir node_app  
# cd node_app
# npm install express

이제 즐겨 사용하는 텍스트 편집기를 사용하여 app.js를 만들고 다음 콘텐츠를 추가합니다.

# vi app.js
const express = require('express')
const app = express()
app.get('/', (req, res) => res.send('Hello World !'))
app.listen(3000, () => console.log('Node.js app listening on port 3000.'))

다음 명령을 사용하여 노드 애플리케이션을 실행합니다.

# node app.js

응용 프로그램이 localhost에서 실행 중인지 확인하려면 포트 번호 3000에 컬 쿼리를 수행합니다.

# curl localhost:3000
Hello World !

이 시점에서 NodeJS 애플리케이션은 업스트림 서버에서 실행됩니다. 마지막 단계에서는 위의 노드 애플리케이션에 대한 리버스 프록시 역할을 하도록 NGINX를 구성합니다. 당분간 각도 응용 프로그램 만들기를 진행하겠습니다. 단계는 다음과 같습니다.

각도 적용

Angular는 TypeScript를 사용하여 웹 애플리케이션을 개발하기 위한 또 다른 JavaScript 프레임워크입니다. 일반적으로 Angular 애플리케이션은 함께 제공되는 독립 실행형 서버를 통해 액세스합니다. 그러나 프로덕션 환경에서 이 독립 실행형 서버를 사용하는 몇 가지 단점으로 인해 더 나은 서비스를 제공하기 위해 역방향 프록시가 각도 애플리케이션 앞에 배치됩니다.

각도 환경 설정

Angular는 JavaScript 프레임워크이므로 버전 > 8.9의 Nodejs가 시스템에 설치되어 있어야 합니다. 따라서 Angular CLI 설치를 진행하기 전에 터미널에서 다음 명령어를 실행하여 노드 환경을 빠르게 설정합니다.

# curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -
# apt-get install nodejs npm

이제 Angular CLI 설치를 진행하여 프로젝트를 생성하고 모든 Angular 애플리케이션에 대한 애플리케이션 및 라이브러리 코드를 생성하는 데 도움을 줍니다.

# npm install -g @angular/cli

이제 Angular 환경에 필요한 설정이 완료되었습니다. 다음 단계에서는 각도 응용 프로그램을 만듭니다.

각도 응용 프로그램 만들기

다음 각도 CLI 명령을 사용하여 각도 애플리케이션을 만듭니다.

# ng new angular-app

새로 생성된 각도 디렉터리로 변경하고 호스트 이름과 포트 번호를 지정하여 웹 애플리케이션을 실행합니다.

# cd angular-app
# ng serve --host PRIVATE_IP --port 3000

앵귤러 애플리케이션이 localhost에서 실행 중인지 확인하기 위해 포트 번호 3000에 컬 쿼리를 수행합니다.

# curl PRIVATE_IP:3000

이 시점에서 Angular 애플리케이션은 업스트림 서버에서 실행됩니다. 다음 단계에서는 위의 각도 응용 프로그램에 대한 리버스 프록시 역할을 하도록 NGINX를 구성합니다.

NGINX를 역방향 프록시로 구성

NGINX 가상 호스트 구성 디렉토리로 이동하여 리버스 프록시 역할을 할 서버 블록을 생성합니다. 이전에 NGINX를 설치한 시스템은 인터넷을 통해 연결할 수 있습니다. 즉, 공용 IP가 시스템에 연결되어 있습니다.

# cd /etc/nginx/sites-available
# vi node_or_angular_app.conf

server {  
              listen 80;
              server_name SUBDOMAIN.DOMAIN.TLD;
              location / {  
                           proxy_pass https://PRIVATE_IP:3000;  
                           proxy_http_version 1.1;  
                           proxy_set_header Upgrade $http_upgrade;  
                           proxy_set_header Connection 'upgrade';  
                           proxy_set_header Host $host;  
                           proxy_cache_bypass $http_upgrade;  
               }  
}

위 구성의 proxy_pass 지시문은 서버가 역방향 프록시를 차단하도록 합니다. 도메인 SUBDOMAIN.DOMAIN.TLD로 향하는 모든 트래픽과 루트 위치 블록(/)과 일치하는 트래픽은 https://PRIVATE_IP:3000으로 전달됩니다. 각도 응용 프로그램이 실행 중입니다.

NodeJS와 Angular 앱 모두에 대한 NGINX 리버스 프록시?

위의 서버 블록은 노드 또는 각도 응용 프로그램에 대한 리버스 프록시 역할을 합니다. NGINX 리버스 프록시를 사용하여 노드와 각도 애플리케이션을 동시에 제공하려면 둘 다에 대해 동일한 시스템을 사용하려는 경우 두 개의 다른 포트 번호에서 실행하십시오. 노드 및 각도 응용 프로그램을 실행하기 위해 두 개의 별도 업스트림 서버를 사용하는 것도 매우 가능합니다. 또한 server_name 및 proxy_pass 지시문에 대해 일치하는 값을 사용하여 다른 NGINX 서버 블록을 생성해야 합니다. 권장 읽기: NGINX 구성 파일 이해. 위의 서버 블록에서 구문 오류를 확인하고 동일하게 활성화합니다. 마지막으로 NGINX를 다시 로드하여 새 설정을 적용합니다.

# nginx -t
# cd /etc/nginx/sites-enabled
# ln -s ../sites-available/node_or_angular_app.conf .
# systemctl reload nginx

이제 즐겨 사용하는 웹 브라우저에서 https://SUBDOMAIN.DOMAIN.TLD로 이동하면 Node 또는 Angular 애플리케이션의 환영 메시지가 표시됩니다.

요약

이것이 NodeJS 또는 Angular 애플리케이션용 NGINX 역방향 프록시를 구성하기 위한 전부입니다. 이제 Let’s Encrypt와 같은 무료 SSL 인증서를 추가하여 애플리케이션을 보호할 수 있습니다!