Стек: React + Webpack Module Federation, Jakarta EE (JAX-RS).
Технологии: gRPC, Docker, JWT, CSRF, SAGA.
Проект представляет собой веб-приложение с микросервисной архитектурой и микрофронтендами, реализующее аутентификацию пользователей, работу с группами данных и визуализацию результатов. Frontend построен на React с Webpack Module Federation, backend — на Jakarta EE.
docker compose up --build- Принципы построения микросервисной архитектуры
- Настройка Webpack и создание микрофронтендов с помощью Webpack Module Federation
- Написание приложений на React19
- Использование redux и redux-toolkit для хранения данных
- Организация monorepo для фронтенда
- Как использовать SecurityContext и как делать авторизацию cookie/header в jakarta-ee
- Как работать с docker multistage и docker buildkit
- Реализация взаимодействия микросервисов по gRPC
- Паттерн SAGA (orchestration) для согласованного выполнения распределённых транзакций
- Защита от CSRF-атак и работа с JWT
С помощью Webpack module federation, реализован набор микрофронтендов со следующей структурой
flowchart TD;
host(["host"])-->main;
host-->login;
main-->plot;
main-->group;
main-->topbar;
main-->history
Реализован набор JAX-RS микросервисов, каждый из которых отвечает за свою зону ответственности:
- authService
- регистрация и аутентификация пользователей
- выдача JWT (cookie)
- geometryService
- проверка попадания точки в заданную область
- historyService
- сохранение и получение истории результатов
- группировка данных
Микросервисы взаимодействуют друг с другом по gRPC, а регистрация пользователя реализована как распределённая транзакция с использованием паттерна SAGA (orchestration): при ошибке на одном из этапов выполняются компенсирующие действия.
Также написаны дополнительные пакеты:
- csrfSecurity
- защита от CSRF-атак
- аннотации @CsrfSecured, @CsrfProvider
- jwtProcessing
- обработка JWT
- аннотация @JwtSecured для защиты эндпоинтов
├── backend/ # всё, что связано с бэкендом
├── authService/ # микросервис, реализующий аутентификацию пользователей
├── geometryService/ # микросервис, реализующий проверку попадания точки в область
├── historyService/ # микросервис, ответственный за хранение и запись групп результатов
├── csrfSecurity/ # пакет, помогающий рализовать защиту от CSRF атак (@CsrfSecured и @CsrfProvider)
└── jwtProcessing/ # пакет, помогающий рализовать авторизацию по JWT в Cookie (@JwtSecured)
├── database/init.sql # скрипт, исполняемый при первом запуске СУБД
└── frontend/ # всё, что связано с фронтендом
├── nginx-conf/nginx.conf # конфигурация для nginx
└── monorepo/ # монорепозиторий со всеми исходниками
├── packages/ # вспомогательные пакеты
├── shared/ # общие пакеты - переиспользуемые UI компоненты и общий redux
└── build-config/ # конфигурационные файлы для Webpack (loader-ы, плагины, resolve-ы and etc)
└── services/ # директория с микрофронтендами
├── host/ # host микрофронтенд, являющийся точкой входа в приложение
├── login/ # микрофронтенд с страницей входа
├── main/ # микрофронтенд с основной страницей
├── plot/ # микрофронтенд с графиком
├── topbar/ # микрофронтенд с топбаром для страниц (пока содержит только settings -> logout)
├── history/ # микрофронтенд с историей попаданий
└── groups/ # микрофронтенд с селектором групп