Настройка прокси NGINX для Node или Angular

Amber

2 месяца назад

Обратный прокси (reverse proxy) — это сервер, который получает ресурсы для клиентов из одного или нескольких upstream-серверов. Обычно он размещается за брандмауэром в частной сети и перенаправляет запросы клиентов на эти upstream-серверы. Обратный прокси значительно повышает безопасность, производительность и надежность любого веб-приложения. Многие современные приложения на NodeJS или Angular могут работать на собственном автономном сервере, но они не имеют ряда нужных функций, среди которых балансировка нагрузки, безопасность и ускорение. NGINX со всем его широким функционалом может выступать в качестве обратного прокси при обслуживании запросов для приложений NodeJS или Angular.

В этом туториале мы рассмотрим, как использовать NGINX в качестве обратного прокси-сервера для приложения Node или Angular. На приведенной ниже диаграмме показано, как прокси работает, обрабатывает запросы клиентов и отправляет ответы.

Требования

Для работы вам нужен сервер NGINX. Установить его поможет этот мануал. Также предполагается, что:

Доступ к серверу NGINX возможен из внешнего домена.
Приложение Node или Angular запущено в отдельной системе (upstream-сервер), в частной сети и может быть доступно с сервера NGINX. Хотя такие настройки можно создать и в одной системе.
В мануале используются условные названия переменных SUBDOMAIN.DOMAIN.TLD и PRIVATE_IP. Замените их своими значениями, когда это будет нужно.

Приложение NodeJS

Предположим, что вы уже установили NGINX в своей среде и теперь мы создадим приложение NodeJS, доступ к которому будет осуществляться через обратный прокси NGINX. Для начала настроим среду node в системе частной сети.

Установка Node

Перед установкой NodeJS и последней версии npm (менеджер пакетов node) убедитесь, что они ещё не установлены:

# node --version # npm --version
Если эти команды выводят версии NodeJS и NPM, то установка уже выполнена, и вы можете перейти к этапу создания приложения NodeJS. Для установки NodeJS и NPM выполните следующую команду:

# apt-get install nodejs npm

После инсталляции снова проверьте версию NodeJS и NPM:

# node --version

# npm --version

Создание приложения Node

Когда среда NodeJS готова, создадим приложение с помощью ExpressJS. Создайте папку для приложения node и установите 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 с помощью следующей команды:

# node app.js

Чтобы убедиться, что приложение запущено на localhost, выполните curl-запрос на порт 3000:

# curl localhost:3000

Hello World !

На этом этапе приложение NodeJS будет запущено на сервере upstream. На последнем этапе мы настроим NGINX для работы в качестве обратного прокси для приложения node. А сейчас создадим приложение angular.

Приложение Angular

Angular — это еще один фреймворк JavaScript для разработки веб-приложений с помощью TypeScript. Как правило, приложение angular работает на автономном сервере, который поставляется вместе с ним. Но из-за нескольких недостатков этого сервера в производственной среде для более эффективного обслуживания перед приложением angular устанавливается обратный прокси.

Настройка среды angular

Поскольку Angular — это JavaScript-фреймворк, для его работы требуется установленная в системе версия Nodejs > 8.9. Поэтому прежде чем приступить к установке angular CLI, настройте среду node с помощью следующей команды:

# 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 завершена. На следующем этапе мы создадим приложение.

Создание приложения angular

Создайте приложение с помощью следующей команды:

# ng new angular-app

Перейдите в только что созданный каталог angular и запустите веб-приложение, указав host и port:

# cd angular-app

# ng serve --host PRIVATE_IP --port 3000

Чтобы убедиться, что приложение angular запущено на localhost, выполните curl-запрос к порту 3000:

# curl PRIVATE_IP:3000

На этом этапе приложение angular будет работать на upstream-сервере. Далее мы настроим NGINX в качестве обратного прокси-сервера для этого приложения.

Настройка NGINX в качестве обратного прокси

Перейдите в каталог конфигурации виртуального хоста NGINX и создайте server block, который будет работать в качестве обратного прокси. Помните, что система, на которой вы ранее установили 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 настраивает server block как обратный прокси. Весь трафик, направленный на домен SUBDOMAIN.DOMAIN.TLD и соответствующий блоку root location (/), будет перенаправляться на https://PRIVATE_IP:3000, где запущено приложение node или angular.

Приведенный выше server block будет действовать как обратный прокси для приложения node или angular. Если вы хотите обслуживать эти приложения с помощью обратного прокси-сервера NGINX на одной и той же системе, просто запустите их на двух разных портах. Также для их запуска можно использовать два отдельных upstream-сервера. Кроме того, вам также необходимо создать еще один server block NGINX с соответствующими значениями для директивы server_name и proxy_pass.

Убедитесь, что в server block нет синтаксических ошибок, и включите его. Перезагрузите 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.

Подводим итоги

Это все, что нужно для настройки прокси NGINX для приложений NodeJS или Angular. Теперь вы можете приступить к защите вашего приложения с помощью бесплатного SSL-сертификата Let’s Encrypt!