Новая отказоустойчивая версия сайта Почта Банка

Главное о кейсе

Архитектурно уникальный проект с интеграцией конструктора сайта на React в коробочное решение 1С-Битрикс.

Задачу отказоустойчивости проекта решили с помощью облачной архитектуры, которое стало практически стандартом для российского финансового сектора.

Задачи масштабирования закрыли посредством построения кластера на базе Kubernetes. Это система с открытым исходным кодом для автоматизации развертывания, масштабирования и управления контейнерными приложениями.

Команда «Вебпрактик» создала уникальное в своем роде техническое решение, в котором мы показали, что можно запускать современный и качественный проект на базе 1С-Битрикс, интегрируя в него лучшие отраслевые решения и передовые технологии.

Как проект изменил жизнь пользователей

Сайт Почта Банка — это высоконагруженный проект с ежемесячным трафиком около 5 млн пользователей. Перевели сайт на новую технологическую платформу, увеличили скорость работы сайта, повысили его отказоустойчивость и создали инструменты для удобного управления гипотезами маркетинга.

Для управления контентом на сайте разработали версионированный конструктор, чтобы вносить изменения и делать деплой одной кнопкой. Созданный конструктор значительно упростил и ускорил процесс изменения контента и запуск маркетинговых акций.

Бизнес-задача и ее решение

Задачи проекта:
1. Редизайн сайта
2. Внедрение современного быстрого стека на фронте
3. Смена Платформы на 1С-Битрикс
4. Развертывание облачной архитектуры и подключение CDN
5. Создание конструктора для быстрого и удобного редактирования контента

Системные проблемы старой версии сайта:
- старый «движок» на базе C# делал поддержку проекта дорогой и не оперативной;
- архитектура решения, которая, как часто это бывает в процессе развития, уже не позволяла гибко решать текущие задачи;
- большое количество накопившегося технического долга и недостаточная документируемость проекта;
- серьезные ошибки в оптимизации мета-тегов и заголовков h1.

По требованию клиента новый сайт должен быть на платформе 1С-Битрикс. Использовали React, чтобы повысить производительность создания и развития проекта.
В архитектуру сайта Почта Банк заложили Next.js, который дает максимальное покрытие кейсов производительности из коробки и делает разработку эффективной, гибкой и легкой для дальнейшего развития.

Помимо жестких требований к скорости работы фронта, также нужно было сохранить дружелюбность нового сайта к SEO. Использовали технологию SSR.

Для управления и хранения контента создали версионированный конструктор, чтобы вносить изменения и делать деплой одной кнопкой.

Основные требования
- Наличие визуального конструктора блоков.
- Библиотека блоков
- Наличие параметризации блоков
- Возможность в некоторых случаях вкладывать одни блоки в другие
- Зависимость блоков, страниц от геолокации
- Возможность править группы страниц, меняя конкретный блок сразу у всей группы.
- Версионирование страниц и блоков, чтобы сохранялась история изменения и возможность откатить изменение.

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

На базе Bitrix Framework создали api. Специально для Битрикс написали код, из которого генерируется конфиг (и выложили код в open source). Пакет также поставляет SwaggerUI для упрощенного тестирования.

Развернули отказоустойчивое решение в Яндекс.Облаке. Задачи масштабирования и отказоустойчивости решили посредством построения кластера на базе Kubernetes.

Для повышения отказоустойчивости проекта внедрили умный кеширующий слой Varnish. Это помогло снизить нагрузку на основной сайт, уменьшить объем используемых ресурсов и получить экономический профит.

Крафт (мастерство), реализация, технические детали

В архитектуру сайта Почта Банк заложили Next.js, который обеспечил для проекта точки роста по производительности:
- Сжатие и минификация через самые современные инструменты.
- Модульная архитектура JS позволяет легко делать динамические и «ленивые» подгрузки кода, не изобретая своих велосипедов.
- TreeShaking для минимальной загрузки кода на проект.
- Динамическая адаптация изображений для разных устройств и форматов: закрывает всю матрицу пересечений браузер х формат х разрешение экрана.
- Динамические шрифты для ускорения загрузку страницы.
- Переходы между страницами без перезагрузки всего приложения (SPA)
- Автоматический gzip компрессор статики
- Удобное управление приоритетами загрузки third party скриптов
- Свой статический кеш страниц.

Так как основная разработка велась на React, то часть требований по контентному конструктору закрыл open source инструмент tina.io. Он позволил на современном и удобном стеке реализовать визуальное редактирование блоков, их состав, структуру и порядок.

Библиотеку блоков закрыл функционал Storybook, который обеспечил повышенную переиспользуемость и документированность компонентов. Структуру страниц, блоков построили на базе инфоблоков. Версионирование реализовали с помощью включенного функционала документооборота. Нативный функционал Битрикс легко интегрировался с инфоблоками и отлично закрыл этот кейс.

Для решения задач управления трафиком (таймауты, повторные попытки, балансировка нагрузки) и улучшенной наблюдаемости (трассировка, мониторинг, логирование) в качестве Ingress контроллера внедрили Istio.

В качестве мониторинга использовали Prometheus для сбора метрик и Grafana для удобной визуализации и построения дашбордов. Логирование закрыли стандартным ELK стеком. Для мониторинга исключений на frontend и backend мы внедрили Sentry.

Для облегчения работы команды с релизами использовали ChatOps на базе Telegram. Можно выполнить разные сценарии через команды, не подключаясь к кластеру. Туда же мы получаем все алерты от prometheus и sentry.

Нагрузочное тестирование подтвердило достижение целевых показателей скорости ответа при целевом количестве посещений с запасом. Также тестировали стрессовые сценарии масштабирования кластера с помощью настроенных HPA политик. Это важно в период проведения рекламных акций, когда возникают пиковые нагрузки.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Одна из задач проекта — обновление дизайна. Дизайн-систему новой версии сайта сделала команда агентства ДАЛЕЕ. В процессе работы над проектом мы вместе разработали десятки макетов и решили много нестандартных интерфейсных задач.

Прочая информация о кейсе

Одним из ключевых бизнес-требований заказчика было создание страниц сайта по принципу конструктора, чтобы дать возможность команде клиента самостоятельно создавать страницы сайта, используя более сотни разных настраиваемых блоков отрисованных и разработанных специально для сайта. Это существенно ускоряет проведение А/Б-тестирования маркетинговых гипотез и снижает стоимость ежемесячной поддержки.

Задача усложнялась тем, что все это нужно было реализовать при сохранении жестких требований к скорости фронта также соблюсти важные требования на бэкенде: сохранить версионность изменений блоков, их геозависимость и дружелюбность к SEO.

В итоге мы создали уникальное для рынка решение, которое сочетает в себе удобство и скорость React-приложений, SRR для SEO, визуальный редактор на React, при сохранении всей архитектуры и возможностей 1С-Битрикс на бэкенде.
А еще мы внедрили storybook для удобства представления всех возможных блоков страниц (более сотни) и их вариаций. В дальнейшем мы планируем внедрить UI авто

Облачная архитектура

При создании новой версии сайта также решали задачу построения отказоустойчивой распределенной архитектуры. Сайт банка - это критически важная система, которой пользуются сотни тысяч пользователей ежедневно. Наша команда devops-инженеров помогла развернуть отказоустойчивое решение на Kubernetes в Яндекс.Облаке, которое стало практически стандартом для российского финансового сектора.

Развитие проекта

Создание новой версии сайта - это важный этап сотрудничества с нашим партнером. Но это только начало большого пути. Настоящий успех к проекту приходит, когда команды совместно работают над его развитием каждый день: осуществляют поддержку, тестируют гипотезы роста, развивают новые сервисы. Мы очень благодарны команде Почта Банка за доверие и возможность вместе совершенствовать экосистему банка для сотен тысяч его клиентов.

Текущая доступность работы

https://www.pochtabank.ru/

Скриншоты

Видео

Комментарий заказчика

Вебпрактик» успешно создали новую версию сайта «Почта Банк». Был обновлен дизайн и разработана современная программная платформа, обеспечивающая интеграцию с внутрибанковскими и внешними системами.