Назад к проектам

Облачное хранилище (Fullstack: Django + React)

Запущен: 2025 Production Обновлено: Январь 2026

Fullstack веб-приложение для безопасного хранения файлов с production-развертыванием на VPS (Nginx + Gunicorn + PostgreSQL).

Python 3.11 Django 5 Django REST PostgreSQL React 19 JWT Nginx Gunicorn Ubuntu Server Systemd

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

Архитектура системы

Backend (Django REST)

  • Django 5.2.1 — основной фреймворк для backend разработки
  • Django REST Framework — построение RESTful API для клиентских приложений
  • Simple JWT — аутентификация по JWT токенам с поддержкой refresh
  • PostgreSQL 12+ — production база данных для хранения метаданных
  • Gunicorn — WSGI сервер для production окружения
  • Swagger/Redoc — автоматическая документация API

Frontend (React SPA)

  • React 19.1.0 — современный интерфейс с хуками
  • Material-UI (MUI) — компонентная библиотека для дизайна
  • React Router DOM — клиентская навигация для SPA
  • Axios — HTTP клиент для взаимодействия с API
  • WebSocket — real-time уведомления о загрузке файлов
  • Context API — управление состоянием приложения

DevOps & Infrastructure

  • Ubuntu Server 20.04+ — операционная система для production
  • Nginx 1.18+ — reverse proxy для статики и API
  • Systemd — управление сервисами с автоперезапуском
  • UFW брандмауэр — настройка безопасности сервера
  • Автоматический деплой — скрипты для обновления приложения
Системная архитектура (production):

Client → Nginx → Gunicorn → Django → PostgreSQL
│
├── Static Files (React Build) - отдаются Nginx напрямую
└── Media Files (Uploads) - хранятся на диске с хэшированными путями

Особенности:
• Nginx обрабатывает статику и проксирует API
• Gunicorn запускает Django приложение
• PostgreSQL хранит метаданные пользователей и файлов
• Systemd обеспечивает автозапуск и мониторинг

Решенные задачи и принятые решения

Задача 1: Production-развертывание

Проблема: Требовалось развернуть fullstack приложение с отдельной обработкой статики (React), медиафайлов и API.

Решение:

  • Nginx конфигурация: Настройка как reverse proxy
  • Разделение статики: Nginx отдает собранные React файлы и медиафайлы напрямую, проксирует API запросы на Gunicorn через Unix socket
  • Systemd сервис: Создание production-ready systemd сервиса для Django с настройками Restart=always, RestartSec=10
  • Безопасность: Настройка UFW брандмауэра, закрытие лишних портов, использование Unix sockets для внутренней коммуникации

Задача 2: Оптимизация работы с файлами и базой данных

Проблема: Эффективное хранение метаданных файлов, быстрый поиск и скачивание, защита от переполнения диска, валидация загружаемых файлов.

Решение:

  • PostgreSQL с индексацией: Использование production БД с индексами на полях поиска (имя, тип, дата загрузки, размер)
  • Квоты пользователей: Реализация системы лимитов дискового пространства на уровне модели пользователя с проверкой перед загрузкой
  • Валидация файлов: Проверка MIME-типов, размера файлов, расширений перед сохранением на сервере
  • Эффективное хранение: Метаданные в БД, файлы в файловой системе с хэшированными путями для предотвращения коллизий

Задача 3: Безопасность и авторизация

Проблема: Защита API от несанкционированного доступа, безопасная обработка загружаемых файлов, защита от распространенных веб-атак (XSS, CSRF, SQL injection).

Решение:

  • JWT аутентификация: Реализация через django-rest-framework-simplejwt с refresh токенами и настройкой времени жизни
  • Защита от XSS/CSRF: Использование встроенных механизмов Django и Django REST Framework, Content Security Policy
  • Безопасность файлов: Проверка загружаемых файлов на вирусы (в идеале), валидация расширений и MIME-типов, изоляция загрузок
  • Защитные заголовки Nginx: Настройка X-Frame-Options, X-Content-Type-Options, HSTS

Задача 4: Автоматизация деплоя и мониторинга

Проблема: Ручное обновление fullstack приложения (backend + frontend) сложно, подвержено ошибкам и требует много времени.

Решение:

  • Скрипт автоматического деплоя: Создание deploy-and-restart.sh, который выполняет полный цикл обновления (git pull, миграции, сборка React, перезапуск сервисов)
  • Мониторинг через systemd: Использование journalctl -u cloud-storage -f для просмотра логов в реальном времени
  • Резервное копирование: Реализация скриптов для бекапа базы данных PostgreSQL и медиафайлов с ротацией
  • Проверка здоровья: Настройка health-check эндпоинтов для мониторинга доступности API и статических файлов

Ссылки на проект

Исходный код Документация Демо версия

Технические детали проекта

Дата запуска в production: Сентябрь 2025

Размер хранилища: 10GB на VPS (расширяемо)

Максимальный размер файла: 100MB (настраивается)

Поддерживаемые форматы: Все типы файлов с валидацией

Аутентификация: JWT tokens + Session cookies

База данных: PostgreSQL 12+ с регулярными бекапами