Backend + Разработка

Как выглядят эндпоинты в этой статье - Создаю онлайн-сервис для чтения книг. День 4. Обработка первого запроса.

Архитектура папок теперь выглядит вот так:

Всего реализовано 38 эндпоинтов , и это еще не конец — их количество будет расти! Последний из них ощущался как будто я пробежал марафон.

Разработка дизайна 🎨

Но как делать веб без дизайна? Верно, никак! 🤔
Зайдя в Figma и подсмотрев интерфейс GitHub'а , я накидал ориентировочный дизайн страниц регистрации и входа.

Верстка 🖥️

Верстка — это немного рутинное занятие, но результат того стоит!
Могу сказать, что получилось почти идентично дизайну.

Frontend с Vue.js

Почему Vue.js ? Просто такие условия 🙃. Если бы выбор был за мной, я бы взял React .

Добавлю в решение новый проект Веб-приложение ASP.NET Core (MVC) . Стандартный шаблон создаст такие папки:

• wwwroot
  Это корневая папка для статических файлов, которые будут доступны напрямую через браузер.

• Controllers
  Папка содержит классы контроллеров, которые управляют маршрутизацией.

• Models
  Папка содержит модели данных, которые представляют сущности приложения.

• Views
  Папка содержит представления — файлы, которые отвечают за отображение HTML-страниц пользователю.

В папку wwwroot/lib добавлю клиентскую библиотеку Vue.js .

Создам новый контроллер для страниц аутентификации.

В папке Views есть еще 2 папки:

• Home

• Shared

В папку Shared добавлю новый шаблон страницы Razor с названием _LoginLayout для страниц аутентификации.

Создам папку Auth, добавив туда пустую страницу Razor с названием _ViewStart. Этот файл указывает какой шаблон будут использовать страницы.

@{

Layout = "_LoginLayout";

}

Теперь закину в wwwroot/css свой файл со стилем, который наверстал.

Логика фронтенда 🧠

Начну со страницы входа, добавив HTML-разметку, которую наверстал.

Снизу файла напишу блок скриптов:

@Section scripts {

<script src="~/lib/vue/vue.global.js"></script>

<script>

...тут будут все скрипты...

</script>

}

Пример запроса на бэкенд:

На скрине показан метод ассинхронный метод login(), в нем реализована отправка запроса на эндпоинт /auth/login, если запрос проходит успешно, я записываю Access-токен в локальное хранилище и перенаправляю пользователя на страницу по адресу /home. В противном случае я показываю ошибку пользователю.

В ответе сервера я получаю Access и Refresh токены.

• Access-токен записываю в локальное хранилище.

• Refresh-токен храню в Http-only куках для большей безопасности 🛡️.

Пример записи куки на сервере:

Здесь я записал новую куку с под названием refreshToken, и значением, равным Refresh-токену.

Вообще для чего мне Refresh-токен, если есть Access? Все очень просто, у Access-токена срок жизни 15 минут, поэтому через 15 минут его необходимо будет сгенерировать заново. Для этого как раз и понадобится Refresh-токен.

По истечению Access-токена я буду посылать на сервер запрос со своими куками. Сервер прочитает Refresh-токен из них и, если он валидный, вернет новый Access-токен.

Как это реализовано со стороны сервера:

Со стороны клиента:

При загрузке страницы сразу же срабатывает метод checkRefreshToken, далее отправляется запрос на /auth/refresh. Если сервер возвращает положительный ответ, записываю новый Access в локальное хранилище и продолжаю пользоваться сервисом.

Тестирование 🧪

Запущу бэкенд и фронтенд.

После запуска я сразу попадаю на страницу входа.

Войду в аккаунт, который я создвал еще на начальных этапах.

Если сейчас обратиться по адресу /home, меня перекинет назад на страницу авторизации.

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

Теперь введу правильный пароль. Все сработало! Я попал на домашнюю страницу.

Зайдя в консоль разработчика, можно посмотреть локальное хранилище и найти там Access-токен.

Теперь я могу пользоваться сервисом, отправляя запросы на эндпоинты, передавая данный токен в заголовке.

В своей жизни, также как и в команде, надо проводить ретроспективы. Как только начинает крыть - включаем наше РАЦИО, и заставить его поработать вместо нашего ЭМОЦИО.

Я для себя вывел следующий порядок действий: сел на задницу, забил кальян, выдохнул, и в мыслях раскидал:

• что я сделал и чего я достиг

• что я не сделал и чего я не достиг

• что я сейчас чувствую и что меня выдрачивает

• что я могу с этим сделать

• какие новые цели я себе ставлю

Выглядит как "Я делаю ЭТИ три простых упражнения...", но в реальности это помогает голове сразу с двух сторон: антисамозванец и целеполагание

1. Вспомнил тернистый путь до цели -> Благодаря усилиям добился цели -> Получил заслуженный приз. И вот самозванец внутри уже не может пынять на "незаслуженную выгоду"

2. Добился целей -> Порефлексировал -> Поставил новые цели -> Сделал работу над ошибками и выполнил новые цели -> Repeat. Ура, мы изобрели скрам

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

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

• Если у вас есть слабые стороны - не выводите на них собеседника, и не плавайте с ответами. Лучше сразу сказать, что вы не знаете и последний раз в проде видели этот вопрос примерно "никогда"

• На ваши сильные стороны делайте акцент и углубляйтесь в рассуждениях до потолка ваших знаний

Лучше выглядеть как специалист в некоторых областях, чем плавать во всех вопросах одинаково поверхностно

Сбой Stack Overflow

В 2016 году Stack Overflow испытал 34-минутный перебой в работе. Причиной стало регулярное выражение, используемое для обработки пользовательского ввода:

^[\s\u200c]+|[\s\u200c]+$

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

Это привело к катастрофическому возврату (catastrophic backtracking) – ошибке, которая возникает, когда движок регулярных выражений тратит чрезмерное количество времени на попытки найти соответствие шаблону, перебирая различные комбинации. Количество проверок начало лавинообразно увеличиваться и быстро достигло 199 990 000 – это вызвало значительную задержку и в итоге сбой системы.

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

Сбой Cloudflare

2 июля 2019 года произошел крупный сбой в работе платформы Cloudflare. Один из инженеров написал регулярное выражение, которое привело к действительно катастрофическому возврату – вызвало экстремальную перегрузку всей инфраструктуры. Использование процессоров выросло до 100%, а большинство сайтов, подключенных к Cloudflare, замедлились до крайности или вовсе оказались недоступными.

Коварная регулярка выглядела так:

(?:(?:\"|'|\]|\}|\\|\d|(?:nan|infinity|true|false|null|undefined|symbol|math)|\`|\-|\+)+[)]*;?((?:\s|-|~|!|{}|\|\||\+)*.*(?:.*=.*)))

Самую большую опасность в этом выражении представляет

.*(?:.*=.*)

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

Глобальный сбой Windows/CrowdStrike

19 июля 2024 года произошел самый массовый сбой в истории – из строя вышли около 8,5 млн Windows-компьютеров с ПО CrowdStrike. Причиной сбоя стало несоответствие между ожидаемым количеством входных параметров (21) и фактическим количеством параметров (20), которые были переданы в интерпретатор контента (этот компонент отвечает за обработку содержимого с использованием регулярных выражений). Когда система получила ввод с 21 параметром, интерпретатор контента попытался считать данные за пределами выделенной памяти, что и привело к сбою системы.

Привет!

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

• Языки программирования и фреймворки для бэкенда

• Архитектура и проектирование серверных приложений

• Базы данных и управление данными

• Безопасность и защита данных

• Облачные технологии и DevOps

• API и интеграции

• Тестирование и отладка

• Инструменты и утилиты для бэкенд-разработчиков

• Лучшие практики и паттерны проектирования

🤵 Как не завалить собеседование в крупной ИТ-компании

Разработчик с 10-летним коммерческим опытом поделился провальным опытом прохождения технического собеседования в одной из лидирующих компаний. Из этого провала он извлек три основных урока:

• Перед собеседованием нужно освежить знания о структурах данных – и не только о списках, массивах и словарях. Не стоит игнорировать и те структуры, с которыми вы в последний раз сталкивались в университете и никогда не используете на практике – очереди, кучи и деревья. Автору попался как раз вопрос о деревьях, с которыми он с университетских времен не встречался и которые, скорее всего, на новой работе ему бы тоже не понадобились. Однако на собеседовании зачастую проверяются не только практические навыки, но и общая ИТ-эрудиция.

• Для тренировки нужно использовать самый простой редактор кода и таймер. Хотя в реальной работе повсеместно используются IDE с автодополнением кода и прочей ИИ-функциональностью, крупные компании при проведении теста обычно настаивают на старомодном способе решения задач, без каких-либо подсказок со стороны IDE. Писать код надо быстро – поэтому во время подготовки к собеседованию обязательно нужно пользоваться таймером для самоконтроля.

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

🛠️ Инструменты

BullMQ – библиотека для Node.js, которая реализует быструю и надежную систему очередей, основанную на Redis и предназначенную для решения всех основных задач в современных микросервисных архитектурах (сглаживание пиков нагрузки, создание надежных каналов связи между сервисами, распределение ресурсоемких задач между несколькими обработчиками и тому подобное).

Основные возможности и преимущества BullMQ:

• Точная обработка сообщений – библиотека гарантирует доставку как минимум один раз.

• Горизонтальное масштабирование – можно добавить сколько угодно обработчиков для параллельной обработки заданий.

• Высокая производительность – благодаря эффективным Lua-скриптам и конвейерной обработке.

• Минимальное использование CPU.

• Распределенное выполнение заданий на основе Redis.

• Поддержка очередей LIFO и FIFO.

• Приоритезация и отсроченное выполнение заданий.

• Запланированные и повторяющиеся задачи по расписанию.

• Настройка параллельности для каждого обработчика.

• Многопоточные (изолированные) функции обработки.

• Автоматическое восстановление после сбоев процесса.

• Поддержка зависимостей между задачами (родительские и дочерние задачи).

SigNoz – опенсорсный инструмент для мониторинга и устранения неполадок в развернутых приложениях. Это отличная бесплатная альтернатива коммерческим решениям – DataDog и New Relic.

Основная функциональность:

• Единый интерфейс для метрик, трассировок и логов.

• Визуализация метрик производительности приложений (RPS, процентили задержек, частота ошибок).

• Распределенная трассировка для выявления проблем в сервисах.

• Управление логами с продвинутым построителем запросов.

• Мониторинг инфраструктуры.

• Отслеживание исключений в различных языках программирования.

• Настраиваемые оповещения.

• Поддержка OpenTelemetry для инструментирования приложений.

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

Infisical – опенсорсная платформа для удобного и безопасного управления секретами и конфигурационными данными. Основные возможности:

• Централизованное хранение секретов – позволяет безопасно хранить в одном месте все важные данные (API-ключи, пароли от баз данных и другие конфиденциальные настройки приложений).

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

• Предотвращение утечек – помогает предотвратить случайное раскрытие секретной информации, например, путем коммита в Git-репозиторий.

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

• Безопасный доступ – предоставляет инструменты (SDK, CLI, API) для безопасного получения секретов в приложениях и инфраструктуре.

• Контроль доступа – позволяет настраивать права доступа к секретам для разных пользователей и систем.

• Аудит и версионирование – ведет лог всех действий с секретами и позволяет отслеживать их изменения во времени.

• Интеграция с инфраструктурой – легко интегрируется с популярными платформами и инструментами (GitHub, AWS, Kubernetes и т. п.).

• Управление внутренней PKI – позволяет создавать и управлять собственной инфраструктурой открытых ключей для выпуска цифровых сертификатов.

KubeAI – инструмент для развертывания и управления опенсорсными LLM-моделями в среде Kubernetes. Среди основных функций и особенностей:

• Совместимость с OpenAI. Предоставляет API, совместимый с OpenAI, что позволяет легко заменить сервисы OpenAI в любых ИИ-приложениях на локальные.

• Поддержка различных моделей. Может работать с различными моделями, включая языковые (LLMs), модели для преобразования речи в текст (например, Whisper) и другие.

• Мультиплатформенность. Может работать на разных аппаратных платформах, включая системы только с CPU, системы с GPU, а в будущем планируется поддержка TPU.

• Масштабирование. Обеспечивает автоматическое масштабирование в зависимости от нагрузки, включая возможность масштабирования до нуля (когда ресурсы не используются).

• Простота развертывания. Не требует никаких дополнительных зависимостей типа Istio или Knative.

• Встроенный пользовательский интерфейс. Предоставляет чат-интерфейс OpenWebUI для взаимодействия с моделями.

• Управление серверами vLLM, Ollama и FasterWhisper.

• Интеграция с системами обмена сообщениями. Поддерживает потоковую передачу и пакетную обработку через интеграции с Kafka и другими PubSub-системами обмена сообщениями.

Zed – опенсорсный многопользовательский редактор кода, предназначенный для совместной работы над проектом в реальном времени. Основные особенности и возможности:

• Написан на Rust и отличается высокой скоростью и минимальными требованиями к ресурсам.

• Предусматривает интеграцию с LLM для генерации, анализа и рефакторинга кода.

• Имеет встроенный терминал.

• Предоставляет несколько удобных функций для совместной работы – демонстрацию экрана, общие заметки и т. п.

• Разработан с учетом конфиденциальности пользователей и не собирает личные данные.

Warp – современный высокопроизводительный терминал с ИИ-функциональностью. Основные особенности и возможности:

• Производительность. Написан полностью на Rust и использует рендеринг на GPU через Metal API, что обеспечивает высокую скорость работы (60+ FPS даже на 4K- и 8K-мониторах).

• Поддержка совместной работы в реальном времени.

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

• Встроенный чат-бот. Понимает указания на естественном языке, дает рекомендации и отвечает на вопросы.

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

• Совместимость с популярными оболочками. Работает с Bash, ZSH и Fish, сохраняя существующие привязки клавиш.

• Кроссплатформенность. Работает на macOS и Linux, вскоре будет поддерживать Windows и WASM.

• Продвинутый UI. В отличие от традиционных терминалов, может отображать различные элементы интерфейса (всплывающие уведомления, меню и т. д.).

Автор рассылки: Наталья Кайда