Зачем нужен Nginx?

Зачем нужен Nginx

Nginx (читается как "engine-x") — это высокопроизводительный веб-сервер и обратный прокси, который используется для разных целей в веб-приложениях. Для фронтенд-разработчика это важный инструмент в стеке развёртывания.

Основные функции Nginx

1. Веб-сервер для статических файлов

Nginx отлично подходит для раздачи статического контента (HTML, CSS, JavaScript, изображения). Он очень быстрый и лёгкий:

// Типичная конфигурация Nginx для фронтенда
server {
  listen 80;
  server_name example.com;
  
  root /var/www/frontend/dist;
  index index.html;
  
  location / {
    try_files $uri $uri/ /index.html;
  }
}

Эта конфигурация:

• Прослушивает порт 80
• Раздаёт файлы из папки /var/www/frontend/dist
• Перенаправляет все запросы на index.html для SPA (Single Page Applications)

2. Обратный прокси (Reverse Proxy)

Nginx может принимать запросы от клиентов и перенаправлять их на бэкенд-сервер:

upstream backend {
  server localhost:8000;
  server localhost:8001;
  server localhost:8002;
}

server {
  listen 80;
  server_name api.example.com;
  
  location / {
    proxy_pass http://backend;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

Зачем нужна обратный прокси:

• Балансировка нагрузки — распределение запросов между несколькими сервером
• Скрытие деталей — клиент видит только Nginx, а не внутреннюю архитектуру
• Улучшение безопасности — добавляет слой между клиентом и приложением

3. Кэширование

Nginx может кэшировать ответы от бэкенда, что уменьшает нагрузку:

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m;

server {
  location / {
    proxy_cache my_cache;
    proxy_cache_valid 200 10m;
    proxy_pass http://backend;
  }
}

4. GZIP сжатие

Nginx может автоматически сжимать ответы для уменьшения размера:

gzip on;
gzip_types text/plain text/css text/javascript application/json;
gzip_min_length 1000;

5. SSL/TLS для HTTPS

server {
  listen 443 ssl http2;
  server_name example.com;
  
  ssl_certificate /etc/ssl/certs/example.com.crt;
  ssl_certificate_key /etc/ssl/private/example.com.key;
  
  location / {
    proxy_pass http://backend;
  }
}

6. URL переписание (URL Rewriting)

Nginx может переписывать URL для удобного маршрутизирования:

rewrite ^/old-page$ /new-page permanent;
rewrite ^/products/([0-9]+)$ /product.php?id=$1 last;

Зачем это нужно для фронтенда

1. Развёртывание — раздача скомпилированного Next.js / React приложения
2. API маршрутизация — проксирование запросов к бэкенду (/api/* -> http://backend:8000)
3. Кэширование — быстрая доставка статических файлов
4. HTTPS — защита соединения между пользователем и сервером
5. Балансировка — если несколько инстансов приложения

Nginx vs Apache

Пример реальной конфигурации для SPA

server {
  listen 80;
  listen [::]:80;
  server_name prepbro.ru www.prepbro.ru;
  
  # Редирект на HTTPS
  return 301 https://$server_name$request_uri;
}

server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;
  server_name prepbro.ru www.prepbro.ru;
  
  # SSL сертификаты
  ssl_certificate /etc/ssl/certs/prepbro.crt;
  ssl_certificate_key /etc/ssl/private/prepbro.key;
  
  # Корневая папка фронтенда
  root /var/www/frontend/dist;
  index index.html;
  
  # Кэширование статических файлов
  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
  }
  
  # Проксирование API
  location /api/ {
    proxy_pass http://backend:8000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
  
  # SPA маршрутизация
  location / {
    try_files $uri $uri/ /index.html;
  }
}

Вывод

Nginx — это не только веб-сервер, это целая экосистема для управления веб-трафиком. Для фронтенд-разработчика важно понимать, что Nginx отвечает за доставку приложения конечному пользователю, управление HTTPS, кэширование и проксирование к бэкенду.