Настройка прокси NGINX для Node или Angular
LEMP Stack, Ubuntu | Комментировать запись
Обратный прокси (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!
Читайте также: Получение SSL-сертификатов с помощью Certbot
Tags: Angular, NGINX, Node.js