Новый сайт для Почта Банка: от старого движка к облачной архитектуре

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

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

О проекте

Почта Банк — первый и единственный почтовый банк России. Основные направления деятельности: кредитование физических и юридических лиц, инвестиционные продукты, услуги для бизнеса и финансовых организаций.

В задачи проекта входили:

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

Вызовы

Идея создания новой версии сайта созревала несколько лет. В это время у старой версии было несколько системных проблем, которые нужно было решить:

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

Вдобавок стояла критически важная задача — повысить отказоустойчивость сайта, чтобы он выдерживал любую нагрузку.

Решение

Мы полностью переработали архитектуру и перевели сайт на 1С-Битрикс, опираясь на преимущества этого решения:

1. большое количество подрядчиков, работающих с этой системой;
2. широкий функционал, закрывающий многие задачи клиента «из коробки»;
3. отличную готовую админку, привычную менеджерам.

API и бэкенд

Для бэкенда использовали Bitrix Framework с API, основанным на OpenAPI. Код для конфигурации был выложен в open source, а для тестирования применили SwaggerUI. Миграция данных происходила с помощью Phinx, а консольные команды — через Symfony/Console. Для базы данных использовали репликацию MySQL в Яндекс.Облаке и обеспечили автоматический переход трафика на резервный сервер.

Фронтенд

Мы использовали Next.js, который обеспечивает высокую производительность благодаря сжатию, минификации и динамической подгрузке кода. Он позволяет оптимизировать работу сайта без необходимости разработки множества собственных решений.

SEO-оптимизация

Использование SSR (Server-Side Rendering) решило проблему с SEO, так как теперь поисковые роботы могут получать скомпилированный HTML. Это способствовало улучшению позиций сайта в поисковых системах.

Контентная система управления и конструктор

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

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

Масштабируемость и отказоустойчивость

Сайт Почта Банка посещают около 5 млн пользователей в месяц. Для отказоустойчивости и масштабирования мы использовали Kubernetes, систему кеширования Varnish, Istio для управления трафиком, Prometheus и Grafana для мониторинга. Повышению качества кода и тестированию помогает Playwright на TypeScript, интегрированный в CI.

Результаты

1. Новый сайт Почта Банка стал заметно быстрее и выдерживает высокий трафик.
2. Отказоустойчивость обеспечена — даже при пиковых нагрузках сайт работает стабильно.
3. Команда банка получила интуитивный конструктор контента, что ускорило обновление страниц.
4. SEO-позиции выросли за счет SSR и оптимизации структуры сайта.

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

Подробнее о том, как мы запускали современный и качественный проект на базе 1С-Битрикс, интегрируя в него лучшие отраслевые решения, читайте в кейсе на нашем сайте.