Как связать frontend и backend в Nginx

В Nginx связь фронтенда и бэкенда реализуется через проксирование запросов. Я обычно настраиваю это в конфигурации сервера, разделяя обработку статики и API-запросов.

Пример конфигурации для SPA и REST API:

server {
    listen 80;
    server_name example.com;

    # Обслуживание статических файлов фронтенда (React, Vue, Angular)
    location / {
        root /var/www/frontend/dist;
        try_files $uri $uri/ /index.html;
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    # Проксирование API-запросов на бэкенд-сервис
    location /api/ {
        proxy_pass http://backend-service:8000/;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # Таймауты для долгих операций
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }

    # WebSocket поддержка (если нужно)
    location /ws/ {
        proxy_pass http://backend-service:8000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

Ключевые моменты из моего опыта:

1. Разделение ответственности: Статика отдается напрямую Nginx, API-запросы проксируются на application-сервер (Django, FastAPI, Node.js).
2. Заголовки: Обязательно передаю X-Forwarded-* заголовки, чтобы бэкенд видел реальные IP-адреса клиентов.
3. Кэширование: Для статических ресурсов настраиваю агрессивное кэширование, что снижает нагрузку.
4. Health checks: В production добавляю proxy_next_upstream для обработки сбоев бэкенда.

Для микросервисной архитектуры вместо одного backend-service могу использовать upstream-блок с несколькими серверами и балансировкой.