Angular.js + Nginx на Ubuntu 22.04

Изображение: логотип или экран Angular.js

Angular.js — это бесплатный open-source JavaScript-фреймворк для создания динамических веб-приложений. Он позволяет использовать HTML как язык шаблонов и расширять синтаксис HTML для ясного и краткого описания компонентов приложения. В руководстве показано, как установить Node.js, Angular CLI, создать тестовое приложение, запустить его как systemd-сервис и настроить Nginx как обратный прокси на Ubuntu 22.04.

Основные понятия

Angular CLI — интерфейс командной строки для создания и управления приложениями Angular.
reverse proxy (обратный прокси) — сервер, который принимает входящие HTTP-запросы и пересылает их на внутренний адрес/порт приложения.
systemd unit — файл, который описывает службу (демона) и позволяет ей автоматически стартовать и перезапускаться.

Что нужно перед началом

Сервер с Ubuntu 22.04.
Настроенный root-пароль или доступ по sudo.
Доступ в интернет из сервера для установки пакетов.

План действий

Обновить систему и установить утилиты.
Установить Node.js LTS.
Установить Angular CLI.
Создать и локально запустить пример приложения.
Оформить systemd-сервис для автозапуска.
Настроить Nginx в качестве обратного прокси.
Провести базовую отладку и усиление безопасности.

Обновление системы и установка зависимостей

Перед началом обновите пакеты и установите необходимые утилиты:

apt update -y
apt upgrade -y

Затем установите полезные инструменты:

apt install curl gnupg2 gnupg git wget -y

Важно: выполняйте эти команды с правами root или через sudo.

Установка Node.js

Добавьте репозиторий NodeSource и установите LTS-версию Node.js:

curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -
apt install -y nodejs

Проверка установленной версии:

node --version

Ожидаемый пример вывода:

v16.17.0

Примечание: в руководстве использовалась версия Node.js 16.x. Можно выбрать актуальную LTS на момент установки.

Установка Angular CLI

Обновите npm до последней версии, затем установите Angular CLI глобально:

npm install npm@latest -g
npm install -g @angular/cli

Проверка состояния Angular CLI:

ng version

Пример вывода (сокращённо):

Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled

Angular CLI: 14.2.3
Node: 16.17.0
Package Manager: npm 8.19.2
OS: linux x64

Создание тестового приложения Angular

Создадим проект myapp:

ng new myapp

В процессе будет задан вопрос про маршрутизацию и стиль. После создания перейдите в каталог и запустите приложение в режиме разработки, слушая все интерфейсы на порту 8000:

cd myapp
ng serve --host 0.0.0.0 --port 8000

Ожидаемый пример вывода сборки (сокращённо):

? Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.10 MB |
polyfills.js          | polyfills     | 318.00 kB |
styles.css, styles.js | styles        | 210.08 kB |
main.js               | main          |  49.83 kB |
runtime.js            | runtime       |   6.51 kB |

 Angular Live Development Server is listening on 0.0.0.0:8000, open your browser on http://localhost:8000/ 

? Compiled successfully.

Нажмите CTRL+C, чтобы остановить сервер перед созданием systemd-сервиса.

Создание systemd-сервиса для приложения

Чтобы приложение автоматически стартовало и перезапускалось, создайте unit-файл:

nano /lib/systemd/system/myapp.service

Вставьте этот шаблон и сохраните файл:

[Unit]
Description=MyWeb Application
After=network-online.target

[Service]
Restart=on-failure
WorkingDirectory=/root/myapp
ExecStart=/usr/bin/ng serve --port 8000
CPUAccounting=true
CPUQuota=50%
MemoryAccounting=true
MemoryLimit=1024M

[Install]
WantedBy=multi-user.target

Обновите конфигурацию systemd и запустите службу:

systemctl daemon-reload
systemctl start myapp
systemctl enable myapp
systemctl status myapp

Пример строки из вывода статуса:

Active: active (running) since Sun 2022-09-18 07:28:42 UTC; 28s ago

Совет: не храните проект в /root в продакшне. Лучше создать системного пользователя и дать ему домашнюю папку, например /opt/myapp.

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

Установите Nginx:

apt install nginx -y

Создайте конфигурацию для приложения:

nano /etc/nginx/conf.d/app.conf

Пример простого блока server:

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

    location / {
        proxy_pass http://localhost:8000;
        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;
    }
}

Проверьте синтаксис и перезапустите Nginx:

nginx -t
systemctl restart nginx
systemctl status nginx

Откройте в браузере http://app.example.com (или соответствующее DNS имя) — вы должны увидеть интерфейс вашего Angular-приложения.

Изображение: экран с запущенным Angular-приложением

Альтернативные подходы к развёртыванию

Раздача статических файлов через Nginx. Соберите приложение в production и отдавайте статические файлы без ng serve:

ng build --configuration production
# затем скопируйте dist/* в /var/www/myapp и настройте Nginx для отдачи статики

Использовать процесс-менеджер (PM2) для запуска приложения Node, если приложение — сервер на Node.js.
Упаковать приложение в Docker-контейнер и использовать контейнерный оркестратор или systemd для управления.

Когда выбрать ng serve vs сборку статических файлов:

ng serve — удобен для разработки и быстрого тестирования. Не рекомендован для продакшна.
ng build + Nginx — предпочтён для продакшена: более быстрый отклик, кэширование и меньшая нагрузка.

Безопасность и эксплуатация

Важно усилить базовую конфигурацию:

Запустите приложение не от root. Создайте отдельного пользователя с ограниченными правами.
Настройте UFW или другой брандмауэр, откройте только нужные порты (80/443).
Включите HTTPS (Let’s Encrypt Certbot) и настройте перенаправление HTTP → HTTPS.
Ограничьте доступ к административным интерфейсам и используйте VPN/ACL для внутреннего управления.
Логи: настройте ротацию логов (logrotate) и мониторинг доступности (systemd, healthchecks).

Отладка и распространённые проблемы

Приложение не стартует через systemd
- Проверьте права в WorkingDirectory и путь к ng.
- Посмотрите логи: journalctl -u myapp -b
Nginx возвращает 502 Bad Gateway
- Убедитесь, что приложение слушает порт 8000: ss -tlnp | grep 8000
- Проверьте proxy_pass и что service действительно запущен.
Ошибки CORS или неправильный Host
- Проверьте заголовки proxy_set_header Host и конфигурацию приложения.
Высокая нагрузка или утечка памяти
- Проанализируйте потребление: systemctl status myapp, top, journalctl.
- Рассмотрите ограничение ресурсов в unit-файле (MemoryLimit/CPUQuota).

Роли и чек-листы

DevOps:

Обновить пакеты и установить Node.js.
Настроить systemd unit под неправа пользователя.
Настроить Nginx, HTTPS, firewall.
Настроить логирование и мониторинг.

Frontend-разработчик:

Убедиться, что ng build формирует корректную папку dist.
Проверить относительные пути в index.html и base href.
Подготовить инструкции по сборке для CI.

Мини-методология релиза

Собрать в staging: ng build –configuration staging.
Провести smoke-тесты через Nginx.
Обновить production: остановить сервис, заменить файлы, перезапустить.
Мониторинг 5–15 минут, регрессия -> откат.

Критерии приёмки

Приложение успешно отвечает на запросы через Nginx по HTTPS.
Systemd-сервис автоматически перезапускается при сбое.
Логи поступают в централизованный сборщик (или доступны локально) и ротация настроена.

Краткое резюме

Вы установили Node.js и Angular CLI, создали тестовое приложение, оформили systemd-сервис и настроили Nginx как обратный прокси. Для продакшн-развёртывания рекомендуется собирать статические файлы и отдавать их через Nginx с включённым HTTPS и ограничениями привилегий.

Важно

ng serve предназначен для разработки. Для продакшна используйте собранные файлы или корректный серверный runtime.
Всегда настраивайте HTTPS и отдельного пользователя для сервиса.

Если нужно, я могу подготовить:

шаблон Nginx для HTTPS с LetsEncrypt;
Dockerfile и инструкцию по контейнеризации;
systemd unit под непривилегированного пользователя.

Установка Angular.js с Nginx на Ubuntu 22.04