Кейс
mkdev.vip — от интерфейса до сервера и релизов
mkdev.vip — этот сайт: двуязычное портфолио, каталог собственных продуктов и AI-ассистент MK • AI. Я сделал его целиком — дизайн, frontend, backend и инфраструктуру: Next.js 16, React 19 и TypeScript на собственном VPS за nginx, данные в SQLite, проверяемые релизы с автоматическим откатом и более 300 автотестов.
Задача
Сделать сайт, который сам показывает мой подход.
Решение
Сайт, сервер и релизный процесс собраны как один продукт: Next.js 16, React 19 и TypeScript на собственном VPS.
Результат
Сайт работает на собственном сервере и обновляется одной командой.
01Задача
Что нужно было решить
Сделать сайт, который сам показывает мой подход: две полноценные языковые версии, живая 3D-графика и AI-ассистент — на собственном сервере, который можно безопасно обновлять, не рискуя данными.
02Реализация
Как устроено решение
Сайт, сервер и релизный процесс собраны как один продукт: Next.js 16, React 19 и TypeScript на собственном VPS. Один динамический маршрут обслуживает русскую и английскую версии, а 3D-знак отрисовывается на WebGL через Three.js. Node.js 22 работает за nginx как сервис systemd с ограниченными правами, данные хранятся в SQLite. MK • AI принимает голосовой ввод и файлы, а расходы на него ограничены лимитами на пользователя и месячным бюджетом.
Возможности продукта
Два языка
- Русская и английская версии с отдельными адресами, canonical и hreflang.
- Автопроверка отрисовывает каждую страницу на обоих языках: один H1, уникальные id, рабочие внутренние ссылки.
Интерфейс и графика
- Серебристый 3D-знак на WebGL (Three.js).
- Адаптивная вёрстка с учётом prefers-reduced-motion.
MK • AI
- Голосовой ввод и анализ загруженных файлов.
- Поминутные и суточные лимиты на пользователя и месячный бюджет расходов.
- Закрытая админ-зона, исключённая из индексации.
Безопасность
- Заголовки безопасности: Content Security Policy, HSTS, X-Frame-Options, Referrer-Policy.
- Ограничение частоты запросов в nginx для API и входа в админ-зону.
- Сервис systemd под отдельным пользователем: NoNewPrivileges, ProtectSystem=strict, лимиты памяти.
Релизы
- Пакет релиза проверяется на секреты и получает контрольные суммы SHA-256.
- Резервная копия перед обновлением и атомарное переключение версии.
- Проверка страниц и заголовков после выкладки, автоматический откат при ошибке.
Тесты
- Более 300 автотестов на встроенном test runner Node.js.
- Отдельные проверки скриптов выкладки и обслуживания сервера.
03Результат
Что получилось
Сайт работает на собственном сервере и обновляется одной командой: пакет релиза проверяется на секреты и сопровождается контрольными суммами SHA-256, версия переключается атомарно, после выкладки автоматически проверяются страницы и заголовки безопасности, а при ошибке возвращается предыдущий релиз. Страницы, данные и серверную логику покрывают более 300 автотестов.
04Технологии
Инженерные решения
- Один динамический маршрут App Router обслуживает обе языковые версии и отклоняет неизвестные адреса.
- SQLite через встроенный модуль node:sqlite — без отдельного сервера базы данных.
- Бюджет MK • AI резервируется до запроса и уточняется по фактическому расходу.
- Структурированные данные schema.org и отдельное Open Graph-изображение для каждого кейса.
- При обновлении сохраняются старые хешированные чанки, чтобы открытые вкладки продолжали работать.
- Перед переключением релиза проверяются целостность архива, свободное место и отсутствие активных AI-запросов.
