Инфраструктура для фронтенда: Nginx, Docker и документация

Что было сделано

Этот коммит — важный шаг к production-готовности проекта. Мы перестали быть просто набором скриптов и обрели настоящую инфраструктуру для развёртывания.

Многостадийная Docker-сборка фронтенда

Главное нововведение — hub/frontend/Dockerfile с многостадийной сборкой (multi-stage build). Это стандарт индустрии, но внедрение такого подхода на ранних этапах проекта задаёт правильную архитектурную планку.

# Первая стадия: сборка (build)
FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Вторая стадия: production-окружение
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Первая стадия собирает статику в Node.js-окружении, вторая копирует результат в лёгкий Nginx-образ. Итоговый образ весит меньше 30 МБ.

Nginx: SPA-роутинг, gzip и кэширование

hub/frontend/nginx.conf — 30 строк, которые решают несколько задач сразу:

  • SPA-маршрутизация — все пути, кроме статических файлов, направляются на index.html. Это критически важно для React/Vue-приложений с клиентским роутингом.
  • gzip-сжатие — включено для JS, CSS, HTML, JSON и шрифтов.
  • Кэширование статики — fingerprint-файлы кэшируются на год.
  • Прокси на API/api/ запросы отправляются на backend-сервер.
location /api/ {
    proxy_pass http://backend:8000;
    proxy_set_header Host $host;
}

Vite config под production

Добавлен vite.config.js — конфигурация Vite-сборщика с production-настройками: автопрефиксы, минификация, хэши в именах файлов.

Docker Compose: сбор инфраструктуры

Обновлён docker-compose.yml: добавлены сервисы frontend и nginx, настроены сети и зависимости. Теперь docker compose up поднимает полный стек:

Сервис Роль
backend Django API на Gunicorn
frontend Nginx + собранная статика
db PostgreSQL
redis Кэш и очереди

Документация: путь разработчика

Два документа — свежий docs/HUB_LOCAL_INSTALLATION.md (606 строк) и обновлённый hub/README.md — описывают полный процесс локальной установки: от клонирования репозитория до первого запуска.

Бэкенд: маленькое, но важное изменение

В agents.py изменено 2 строки — исправлен эндпоинт API. Я решил не тянуть с этим исправлением до следующего коммита, потому что баг в API агентов блокировал интеграционные тесты. Лучше маленький, но частый фикс, чем большой и хаотичный.

Решения и компромиссы

  1. Nginx вместо Node.js в production — да, можно было запускать vite preview, но это не production-grade решение. Nginx proven, стабилен, и им легче управлять через конфиги.

  2. Многостадийная сборка — увеличивает время сборки CI (две стадии), но уменьшает финальный образ на ~150 МБ. В современном мире каждый мегабайт в registry стоит денег.

  3. Документация в репозитории — мы не стали заводить отдельный wiki или docs-сайт. Пока нас мало, документация в репозитории — это самый быстрый способ не отставать от кода.

Куда движемся

Проект Legion переходит от стадии «prototype» к «beta». С инфраструктурой для фронтенда мы можем: - Выкатывать preview-сборки из каждого PR - Тестировать интеграцию фронтенда и бэкенда в продакшен-подобном окружении - Привлекать контрибьюторов, которым не нужно разбираться в деплое — docker compose up && make migrate и готово.

Следующий шаг — CI/CD пайплайн, который будет собирать образы и пушить их в registry автоматически. Но это уже другая история.