Стартап в Соло. Часть 4: техническая реализация
Содержание всех статей
Содержание
О чей пойдет речь
В этой статье хочу рассказать, как технически устроен мой Telegram чат для сайта, из каких компонентов состоит и с какими подводными камнями я сталкивался.
Может сложиться впечатление, что чат для сайта — это простое приложение. На самом деле, зависит от стадии развития проекта. Когда пет-проект превращается именно в IT продукт с платящими пользователями, резко возрастают требования к качеству.
Даже при 100 активных виджетах появляются нетривиальные задачи: и контроль нагрузки, и оптимизация отправки сообщений в Telegram (с его ограничениями), и администрирование пользователей, и контроль оплат. Дополнительно появляются проблемы в виде всяких говнюков DDOS атак, XSS и разных попыток поломать приложение.
В результате чат превращается во вполне себе ощутимую систему c кучей компонентов и всевозможных защит. Причем проект разрастается даже всего за год работы в очень медленном режиме.
Архитектура
Концептуально архитектура чата выглядит как на диаграмме ниже.
Уточнения:
Указаны только основные библиотеки и фреймворки, маленькие не указаны.
И клиентская часть (SSR), и серверная (API) работает в многопроцесcном режиме.
Пока что всё находится на одном сервере, так как запас по лимиту вертикального масштабирования еще довольно большой. Но заранее есть основа под разнесение каждого компонента на разные серверы.
Архитектура проекта
Для сравнения, архитектура MVP
Архитектура первой версии
В первой статье я говорил кратко про все компоненты выше, но расскажу еще раз (слева направо):
DDOS-защита и CDN
Использую DDOS-Guard (насколько я знаю, они самые крупные в СНГ после Cloudflare). Недорого, удобно. В дополнение на уровне Nginx и на уровне API есть «локальная» защита. Срабатывает чуть быстрее в некритичных случаях.
Down detector
Самодельная программа, которая находится на другом сервере. Проверяет, доступен ли сайт, виджет и API. В случае, если что-то не так, мне в Telegram прилетает уведомление.
Вот так выглядит чат с оповещениями:
Сюда приходят оповещения о поломках
Я добавил в чат еще трех человек, которые практически не пересекаются по свои биоритмам. Следовательно, в любое время суток хоть кто-то увидит сообщение, если я сплю или занят, и позвонят мне.
Контейнеры и сборка
Docker + Docker Compose. Потенциально каждый из компонентов может быть спокойно разнесет каждый на свой сервер в случае необходимости (но в ближайшие годы я ее не вижу).
Reverse proxy и SSL
Nginx. Лично для меня самое удобное и производительное. Легко настраивается для сокетов, легко настраивается под провайдера DDOS защиты, быстро раздает статику.
Сайт и личный кабинет пользователя
Основная задача сайта, после хорошего пользовательского опыта — это удовлетворят требованиям поисков для продвижения в SEO выдаче. Следовательно, необходим SSR и быстрая отрисовка. Здесь также находится личный кабинет пользователя и прием платежей.
Для защиты от ботов при регистрации используется каптча от Яндекса. Бесплатно, интеграция стандартная за 30 минут.
Технологии: TypeScript, NextJS (серверный рендеринг) + React, cluster mode для NextJS с одни процессом на одно ядро. CSS библиотеки не используются, чтобы быстрее грузился сайт, ограничиваюсь React CSS Module.
Админка с аналитикой и менеджментом пользователей
Исторически сложилось, что это отдельный фронт. Здесь у меня просмотр логов, пользователей, статистики и т.д.
Технологии: TypeScript, React, Bootstrap 4.
Выглядит примерно так:
Просмотр пользователей
Для входа администратора в аккаунт пользователя есть возможность копировать прямую ссылку с токеном для входа. Копирую через кнопку, вставляю в инкогнито и оказываюсь в личном кабинете пользователя. Итого, вход за 5 секунд.
Это оказалась необходимая функция на начальном этапе, чтобы с точки зрения пользователя смотреть, какие виджеты созданы и как настроены. Иначе было очень долго оказывать техническую поддержку, так как на каждый чих приходилось писать SQL запрос.
Отдельно уточню про логи и ошибки:
Логи для важных функций пишутся прямо в БД с ограниченным временем и объемом хранения.
Критичные ошибки (с платежной системой, с API Telegram«a) прилетают мне сразу в Telegram.
На отдельном сервере у меня стоит downdetector, чтобы сразу среагировать, если сайт, виджет или API недоступны.
Виджет для сайта
Собственно то, что и является конечным продуктом для клиента. Весь код компилируется в один .js файл, который клиенты вставляют на свой сайт.
Технологии: TypeScript, PreactJS, SocketIO. Особо добавить нечего.
Серверная часть с API
Здесь сосредоточена вся логика. Ее довольно много, но в детали углубляться смысла нет. Обычное приложение со своими нюансами.
Тестами покрыто ~5%-10% серверной части. Пет-проект все-таки
