Первая кровельная

Бесшовная миграция десятилетнего корпоративного портала на современный стек технологий.

Роль

Lead Developer, Full-stack разработчик, SEO-специалист

Год

2023

Стек

Next.js App RouterReactTypeScriptStrapiPostgreSQLDockerDokployDocker HubZodReact Hook Form

Задача

Десятилетний PHP-портал был медленным и хрупким. Бизнесу нужна была современная платформа — без потери накопленного SEO-веса, сотен страниц контента и единого дня простоя.

Этапы

Логика и этапы реализации

🔍 1. Аудит legacy-системы и проектирование базы данных

Проанализировал 10-летний PHP-код, выявил и устранил критические уязвимости (включая захардкоженные в исходниках чувствительные данные).
Зафиксировал и сохранил всю структуру URL старого сайта, чтобы полностью исключить просадку SEO-трафика при переезде.
Спроектировал новую реляционную модель данных: связал сущности на уровне Strapi CMS и настроил базу PostgreSQL так, чтобы страницы услуг могли динамически выводить именно те объекты, где эти услуги применялись.

UI/UX рефакторинг и контентный апгрейд

Полностью ликвидировал хаос из навязчивых сторонних чатов, поп-апов и неуместных лоадеров старого сайта.
Разработал чистый, адаптивный интерфейс с фокусом на мобильную конверсию и удобную карту движения пользователя (CJM).
Структурировал накопленную за года базу объектов и организовал полный рерайт текстов для всех кейсов в портфолио.

Разработка фронтенда и рантайм-оптимизация

Перенес клиентскую часть на Next.js App Router с упором на Server Components для мгновенного рендеринга маркетинговых страниц.
Оптимизировал скорость загрузки с помощью динамического импорта (Dynamic Imports) для тяжелых блоков — например, для интерактивной карты проектов с динамической кластеризацией.
Обеспечил безопасность и отказоустойчивость клиентских форм, связав React Hook Form со строгой валидацией данных через Zod.

Автоматизация маркетинга и локальное SEO

Разработал модуль централизованного управления ценами: базовая стоимость услуги меняется в админке один раз и автоматически обновляет сайт.
Написал скрипт автоматической генерации YML-фидов для выгрузки актуального прайс-листа в геосервисы (Яндекс Бизнес, Яндекс Услуги, 2ГИС), что дало мощный буст поведенческим факторам и позициям в регионе.

Контейнеризация и современный DevOps

Полностью изолировал компоненты приложения, упаковав их в Docker-контейнеры.
Развернул self-hosted оркестратор Dokploy для удобного управления инфраструктурой.
Настроил бесшовный CI/CD пайплайн: при пуше код автоматически собирается в готовые образы на Docker Hub и деплоится на сервер без единой секунды даунтайма.

Процесс

Второе дыхание для legacy-портала

Миграция десятилетнего сайта — это как пересадка сердца пациенту прямо во время марафона.

Старый PHP-портал был медленным и хрупким, но стабильно приносил реальные заявки из поиска. Бизнесу требовалась современная платформа без единого дня простоя и малейшего риска потери накопленных SEO-позиций.

1. Стратегия и перепроектирование архитектуры

Мы начали с глубокого аудита контента. Старая структура была бережно сохранена и переложена в новые, логичные сущности внутри Headless CMS Strapi, к которой была подключена надежная база данных PostgreSQL.

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

Централизованное управление: базовая цена задается один раз и автоматически подтягивается на соответствующие страницы услуг.
Автоматическая синхронизация: эти же данные формируют динамический YML-файл, который обновляет прайс-листы на внешних площадках (2ГИС, Яндекс Бизнес и Яндекс Услуги).

2. Бескомпромиссная производительность

Новая платформа создавалась с максимальным упором на скорость загрузки и отзывчивость интерфейса. Фронтенд спроектирован на базе Next.js с использованием серверных компонентов (Server Components).

Чтобы максимально облегчить первоначальную загрузку:

Для тяжелых клиентских элементов применяется динамический импорт.
Каталог полностью работает на серверных роутах и стриминга NextJS

Результат: мучительные 4,2 секунды загрузки навсегда остались в прошлом.

3. Новый UI/UX и сложный функционал

Опираясь на бизнес-цели заказчика и конкурентный анализ рынка, мы выработали свежую цветовую схему, определили современную графику и полностью переработали карту движения пользователя (CJM).

Одной из ключевых фич стала интерактивная карта реализованных проектов с динамической кластеризацией объектов в зависимости от масштаба.

Магия под капотом: Я настроил глубокие реляционные связи между сущностями на уровне Strapi. Теперь, при заходе на страницу конкретной услуги, бэкенд автоматически собирает, возвращает и отображает именно те объекты, которые были реализованы в рамках этой услуги.