Поиск по сайту:

NGINX как обратный прокси для приложений Node или Angular

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

Обратный прокси-сервер NGINX

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

Предпосылка

  • Вы уже установили NGINX, следуя нашему руководству отсюда.

Предположение

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

NodeJS-приложение

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

Установить узел

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

# 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 app.js

Сделайте запрос curl на номер порта 3000, чтобы убедиться, что приложение работает на локальном хосте.

# curl localhost:3000
Hello World !

На этом этапе приложение NodeJS будет запущено на вышестоящем сервере. На последнем этапе мы настроим NGINX для работы в качестве обратного прокси-сервера для вышеуказанного приложения узла. А пока давайте приступим к созданию углового приложения, шаги для которого приведены ниже:

Угловое приложение

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

Настройка угловой среды

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

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

Теперь приступайте к установке Angular CLI, который помогает нам создавать проекты, генерировать код приложения и библиотеки для любого углового приложения.

# npm install -g @angular/cli

Настройка, необходимая для среды Angular, завершена. На следующем шаге мы создадим угловое приложение.

Создать угловое приложение

Создайте приложение Angular, используя следующую команду angular CLI:

# ng new angular-app

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

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

Сделайте запрос curl на номер порта 3000, чтобы подтвердить, что приложение angular работает на локальном хосте.

# 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, где находится узел или угловое приложение работает.

Обратный прокси-сервер NGINX для приложений NodeJS и Angular?

Приведенный выше серверный блок будет действовать как обратный прокси-сервер для узла или углового приложения. Чтобы одновременно обслуживать приложение Node и angular с помощью обратного прокси-сервера NGINX, просто запустите их с двумя разными номерами портов, если вы намереваетесь использовать одну и ту же систему для них обоих. Также вполне возможно использовать два отдельных вышестоящих сервера для запуска приложения Node и angular. Кроме того, вам также необходимо создать еще один блок сервера NGINX с соответствующими значениями для директив server_name и proxy_pass. Рекомендуем прочитать: Общие сведения о файле конфигурации 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.

Резюме

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