Улучшение сайта Главгосэкспертизы России

клиент

ФАУ «Главгосэкспертиза России»

Отрасль

Госсектор

Услуги

Модернизация сайта, техподдержка

Инструменты

PHP, Bitrix, React, Sentry, Prometheus, Grafana

ФАУ «Главгосэкспертиза России»

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

Учреждение в цифрах

Структурных подразделения

Филиалов

1354

Сотрудника

Задачи

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

Модернизация и поддержка официального сайта ФАУ «Главгосэкспертиза России»

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

Сложности

В процессе решения задач мы столкнулись с несколькими сложностями

01. Проблема репликации и синхронизации серверов

Ресурс gge.ru состоит из 4 серверов, которые друг с другом взаимодействуют. Зачастую случайным образом выбирается какой-то из серверов, к которому обращается пользователь. Информация, которая будет передаваться пользователю с этого сервера не всегда будет соответствовать информации на других серверах. В результате разные пользователи будут видеть разные данные. Чтобы устранить сбой репликации, сняли последний бэкап дампа с мастера и залили на подчиненный сервер. Там перезапустили репликацию. Перевели lsyncd в демон и настроили контроль pid процесса.

02. Подтверждение гипотезы

Папка с историей (.git) начала быстро разрастаться. Вес папки составлял 575,7 МБ. Это большой объем, который влечет за собой трудности в работе с сайтом. Например, долгий отклик на просмотр истории (около 7-10 секунд), длительное время скачивания репозитория, деплой и применения изменений. Под Git было добавлено ядро системы (папка bitrix). Эти файлы не должны отслеживаться git, в них нельзя вносить изменения. Ядро постоянно модифицируется и фиксируется системой контроля версий, что вызывает проблему разрастания истории. Наше решение состоит из 2-х этапов: удаление папки bitrix из-под отслеживания и очистка истории.

Процесс

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

В работы по модернизации сайта вошло:

Решение проблем, настройка и перенос сервера

Сначала решили проблему с нарушением работоспособности сервера. Изначально в некоторых обращениях прикрепленные файлы не отображались в административной зоне и не были доступны для скачивания. Потом настроили мониторинг серверов с помощью инструментов: Netdata, Prometheus, Grafana. Затем организовали переезд сайта на новый сервер, так как на старом были проблемы сети и жесткого диска с БД в режиме работы master <—> slave и в месте хостинга.

Проблема с работоспособностью сервера. Было/стало

Настройка мониторинга сайта

Системный администратор настроил мониторинг сайта:

a. Перевел lsyncd в demon режим на 2 серверах
b. Настроил monit на для проверки (lsyncd, nginx, apache, mysql, ssh, cron, mount, агент мониторинга za, postfix);
c. Скрыл версии nginx, php;
d. Настроил сбор метрик состояния репликации;
e. Настроил мониторинг дисковой подсистемы, настроил мониторинг доступности проекта извне по https протоколу;
f. Сделал прямые apache-status и nginx-status и закрыл авторизацией для удобства отладки и дебага;
g. Настроил уведомления на почту администратора.

Nginx-данные

Доработка калькулятора для расчета оплаты за услуги

В «Калькуляторе» пользователь может выбрать следующие услуги для расчета:

1. Государственная экспертиза: результатов инженерных изысканий, проектной документации в части проверки достоверности определения сметной стоимости;
2. Экспертное сопровождение.

Как переработали калькулятор?

a. Переписали на новый стек. Нам достался legacy code, с которым было сложно работать и мы выбрали React;
b. Переработали логику формул. Некоторые формулы клиент попросил обновить для большего удобства при подсчетах;
c. Убрали ошибки при формировании и сохранении pdf-файла с расчетами.

Страница с калькулятором

Запуск на трафикообразующие ключи

Доработка сервиса «Интернет-приемная»

a. На обновленной форме обращения реализовали счетчик. Нужно было сделать так, чтобы счетчик не был визуально представлен в интернет-приемной. Но оповещения на почту поступали бы пронумерованные. Номер обращения формируется из года + шестизначный номер обращения. Пример: 2019000001, 2020000043, 2021003131. Этот номер будет уходить пользователю и сотруднику в шаблоне письма, а также отображаться в админ-панели. Плюсы в том, что не будет повторений и визуально в административной части можно сразу понять насколько старое обращение. А еще нумерация нужна для внутреннего учета обращений, так как помогает фиксировать время ответа на обращения.
b. Вместе с номером обращения на почту пользователя теперь приходят и основные данные заявителя: дата обращения, ФИО, тип заявителя, текст обращения, способ получения ответа, контактные данные.

Админ-панель интернет-приемной

Реализация функции отписки от рассылки

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

Отписка от рассылки

Внедрение во все формы капчи

На сайте есть множество различных форм, по которым можно отправить заявку. Например, подписаться на рассылку, обратиться в интернет-приемную или оставить отзыв. С этих форм клиенту приходил спам на различных языках. Чтобы исправить эту проблему, мы поставили Captcha во все доступные на сайте формы.

Форма с ReCAPTCHA

Разработка функционала скрытия и показа блока «Подписаться на обновления»

На сайте в описании услуг и для семинаров в карточках элементов есть блок «Подписаться на обновления», но он не всегда уместен. Так как на сайте будут со временем добавляться новые страницы, то нам нужно реализовать возможность скрывать и отображать на страницах услуг и семинаров кнопку Подписаться на обновления".

Подписка на обновления

Создание функционала по шерингу ссылок «Поделиться статьей»

Мы расширили функционал «Поделиться статьей» и добавили возможность переслать ссылку на материал по почте себе, чтобы не потерять, или другу. Для этого под статьей в специальную форму нужно просто ввести e-mail адресата и нажать кнопку «Отправить».

Форма «Поделиться статьей»

Создание фильтрации в разделах с новостями

a. В разделе «Медиагалерея» добавили фильтрацию материалов по событиям. Например: День открытых дверей, Конференция, Круглый стол, Российский инвестиционно-строительный форум.

Форма «Поделиться статьей»

b. В разделе «Экспертное мнение» реализовали поиск материалов по ФИО эксперта.

Фильтрация по ФИО эксперта

c. В разделе «Вопрос-ответ» ввели дополнительную фильтрацию по теме вопроса, так как некоторые вопросы, которые относятся к одной из услуг, подразделяются на темы.

Фильтрация по теме вопроса

Работы по поддержке сайта

В список этих работ входят небольшие оперативные решения. Например, разместить баннер или документ, заменить какую-то информацию или добавить форму. На каждую поддержку проекта мы выделяем менеджера и команду быстрого реагирования. Для Главгосэкспертизы мы сделали много различных работ:

Установка сервисов по вылавливанию ошибок

Для того, чтобы отлавливать и анализировать ошибки, которые могут быть на проекте на стороне фронта и backend, установили сервис мониторинга Sentry. Теперь все ошибки можно отследить в частном телеграм-канале проекта, в котором состоят только наши разработчики.

Оперативное решение проблем

a. Сборка стилей Они перестали собираться обычной командой, нужно только что-то поменять в существующих файлах, чтобы произошла пересборка, тогда становится все нормально. Мы заменили [deprecated] extract-text-webpack-plugin на новый MiniCssExtractPlugin, для сборки стилевых файлов. Из-за этого пропал баг со сборкой. Также поменяли принцип сборки less и css стилей, так как раньше работало некорректно, в стили добавлялись лишние json-модули.
b. Подписка на рассылки Реализовали отображение чекбоксов для подписки на множественные и одиночные рассылки. При проверке обнаружилось, что при попытке подписки функционал не отрабатывает и пользователь не отображается в списке подписчиков в системе управления. Мы изучили проблему и выяснили, что ошибка проявлялась для подписчиков, созданных вручную через админ панель. Они не проходили проверку функцией CSubscription::IsAuthorized($ID). Для решения проблемы добавили принудительную авторизацию существующих подписок.
c. Проблемы с версткой Например, пропали некоторые иконки, присутствовали видоизмененные шрифты. А на странице с новостями нужно было выровнять блоки, исправить работоспособность кнопки, закрывающей форму.
d. Некорректная сортировка для услуги «Экспертное сопровождение». Создали новую услугу, в меню она должна подменить другую, но в итоге сдвигается по приоритету ниже другим блоком. В следствии отладки, выяснилось, что первый уровень сортировки работал по id услуги. Мы это исправили, чтобы первый уровень был по полю «Сортировка», а второй уже по id.

Создание полей и форм

a. Государственная экспертиза: результатов инженерных изысканий, проектной документации в части проверки достоверности определения сметной стоимости;
b. Экспертное сопровождение.

Технический аудит реализации задач

a. Создали по просьбе клиента страницу «Рассмотренные проекты», которая является аналогом страницы «Национальные проекты», но со своей структурой. Разделы выглядят идентично, с разницей в фильтрации новостных блоков. На странице «Национальные проекты» присутствует фильтрация по годам, когда в рассмотренных — еще и по отраслям;
b. Реализация блока «FAQ» на главной странице. Нужно было собрать блок «Вопрос-ответ» после раздела с контактами. Он должен быть в виде плитки наподобие блока «Учебный центр» или «Пресс-центр». Так как у нас уже был дизайн этих блоков, мы просто пересобрали текст и картинки.

Создание шаблона письма для рассылки

Сделали дизайн и сверстали шаблоны для новостных рассылок.

Форма «Поделиться статьей»

Результаты

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

Доработанный функционал

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

Смена сервера

Провели масштабные работы по решению проблем с серверной частью и переносом проекта на другой сервер.

Поддержка

Продолжаем ежедневную работу над оперативным решением возникающих проблем, созданием новых блоков, страниц, форм и полей.

Цифры

года работы, которая ведется до сих пор

1 000+

часов работы над проектом

2 036

коммитов в проекте

Команда

Вебпрактик

Василий Кульков

старший менеджер проекта

Сергей Волошин

старший backend-разработчик

Константин Кулишов

старший DevOps-инженер

Алина Климец

backend-разработчик

Сергей Буланов

backend-разработчик

Егор Гацон

backend-разработчик

Мария Лапиева

старший frontend-разработчик

Олеся Прокопенко

frontend-разработчик

Мурад Саркаров

frontend-разработчик

Следующий проект

Модернизация и многочисленные интеграции сайта школы «Летово»

Школа «Летово»

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