Конструктор сайтов (Госвеб 2.0)

Постановка задачи и исследования

Проблема

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

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

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

Решение

Изначально мы хотели решить задачу с помощью Битрикса. Его тарифы (например, «Энтерпрайз») позволяют создавать неограниченное количество сайтов на одном ядре, а для того, чтобы сбалансировать нагрузку, некоторые блоки бэкенда (программно-аппаратной части) можно размещать на разных виртуальных машинах.

Сделали прототип на Битриксе. Работать со сложной админ-панелью предстояло сотрудникам Министерства. Для размещения контента мы сразу сделали удобную админку на React, чтобы облегчить задачу работникам организаций.

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

Так как в Битриксе нет полноценного пользовательского интерфейса (API), пришлось писать промежуточный обработчик. Через эту прослойку и пошли процессы авторизации. Казалось, что все работает, но создать систему защищенной передачи приватных ключей у нас тоже никак не получалось. Это угрожало безопасности.

Стоит отметить, что на использовании Битрикса настаивал заказчик, так как он входит в реестр российского ПО. При этом оказалось, что Битрикс работает с базой данных MySQL (или MariaDB). Это ПО не входит в реестр, поэтому госорганам рекомендовано работать не с ней, а с ее аналогом — Postgres Pro. Из-за этого противоречия нам пришлось перейти на фреймворк, написать полноценное пользовательский интерфейс (REST API) и использовать подход микросервисной архитектуры.

Дизайн-концепция

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

Например, дизайн-концепция и сайт правительства Кузбасса

И концепт для Ямало-Ненецкого автономного округа

Техническое решение

Проектирование

Фундаментом для разработки Конструктора стала работа над сайтами и системами в нескольких субъектах РФ. Это сайт Правительства Ямало-Ненецкого автономного округа, Общественной палаты ЯНАО, Администрации Правительства Кузбасса и Министерства промышленности и торговли Кузбасса. На этом полигоне с большим набором проблем и задач мы и протестировали наши решения.

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

Цикл производства — как мы создавали Конструктор

Прежде чем получить полностью работоспособный сервис в товарном состоянии, мы дважды повторили цикл разработки

1. Формулирование задачи и бенчмаркинг заняли около месяца. При этом переговоры с заказчиком и обсуждения будущего продукта внутри команды велись и раньше в «тлеющем» режиме.
2. Этап проектирования пришлось повторить дважды, и получили мы две разные итерации. Первая была под управлением (CSM) Битрикс, и на нее ушел месяц. Вторая возникла из необходимости перевести Конструктор на микросервисную архитектуру, и с этой задачей мы тоже справились за месяц. О причинах — выше.
3. Реализация первого этапа заняла пять месяцев.
4. Ввод в тестовую эксплуатацию, запуск пилота на 10 учреждений, сбор обратной связи и формулировка новых задач заняли около двух месяцев.
5. Подготовка документации и спринтов для второго этапа проектирования (о нем уже упоминали в п.3) около месяца, после чего мы перешли к развертыванию микросервисного подхода.
6. Изменение архитектуры — смена движка Битрикс на самописный и переход на микросервисную архитектуру заняли еще четыре месяца. Теперь все работало так, как хотели мы и как было нужно заказчику, поэтому пришло время переходить к масштабированию и увеличению нагрузки.
7. Мы расширили пилот на 1500 организаций. За два месяца заказчик с помощью Конструктора создал и опубликовал 1500 сайтов. Сейчас эта цифра постепенно и непрерывно растет. На момент написания этой статьи их было уже 1363.
8. Получение сертификата на ПО и внесение Конструктора в реестр российского ПО заняло около двух месяцев.
9. Сейчас, помимо технической поддержки, мы дорабатываем Конструктор и наращиваем функциональные возможности.

Дизайн

Дизайн Конструктора основан на Стандарте цифрового государства России. Его цель — создать единую дизайн-систему для электронных ресурсов страны. В него входят общие стандарты, визуальный язык, требования к доступности информации, редакционная политика. Инициаторы проекта — Правительство России и Министерство цифрового развития, связи и массовых коммуникаций.

С помощью дизайн-системы нам удалось в сжатые сроки и при ограниченном бюджете получить качественный результат. Такое стандартизированное решение позволит сократить расходы на обслуживание и развитие Конструктора.

Панель глобального администратора

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

Панель администратора организации

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

Технологии и программная архитектура

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

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

Организационно это выглядит так: Минцифры региона как глобальный администратор совместно с нами устанавливает Конструктор в ЦОД региона и далее по необходимости инициирует создание сайтов руками специалистов на местах – в муниципальных образованиях, учреждениях и подразделениях администрации. Для этого глобальный администратор дает исполнителям соответствующие права и инструменты в рамках Конструктора.

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

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

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

Функционал

Функционал и компонентная база были выполнены на заключительном, третьем этапе. Сюда относятся:

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

Появилась возможность наполнять страницы контентом с помощью меню компонентов:

• Заголовок.
• Цитата.
• Текст в раскрывающихся карточках.
• Абзац.
• Спойлер.
• Интервью.
• Контакты.
• Таблица.
• Графические изображения.
• Видео.
• Документы.
• Этапы.
• Разделители.
• Новости.
• Баннеры.
• Персоналии.
• Структура организации.
• SЕО-настройки.

Визуальный редактор

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

Ввод в эксплуатацию и развитие

Организация работы с учреждениями

Для массовой работы с сайтами после тестового этапа и для их быстрого наполнения мы создали формы, на основе которых специально написанный скрипт генерировал готовые сайты с основной информацией об учреждении. Далее требовалось выгрузить данные из формы и заполнить каждый раздел сайта (а их более 15) для более 1200 сайтов организаций — вручную. После этого администратор каждой организации получал автоматически сгенерированное письмо с логином и паролем. Можно считать, что с этого момента сайт начинает работать.

Обучение администраторов

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

Обеспечение отказоустойчивости

Для своевременного информирования об ошибках, возникающих в процессе работы, мы использовали сервис Sentry.

Когда один из микросервисов перестает работать, его в течение нескольких секунд автоматически перезапустит сервис Monit.

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

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

Результаты

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

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

Военно-патриотический парк Патриот

Государственное юридическое бюро Кузбасса

Детский сад №16 Солнышко

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

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

Подробнее узнать о Конструкторе и получить демо-версию можно на сайте gos-editor.ru.