Диаграмма развертывания

С теоретической справкой можно ознакомиться в документе.

Диаграммы развертывания можно рисовать при помощи нашего любимого PLantUML. Пример диаграммы из ВКР приведен ниже.

@startuml
node "User Client" <<device>> {
    node "Web Browser" <<device>> {
        [HTML5] <<artifact>>
    }
}

node "Web Server (NGINX)" <<device>> {
    node "PHP FPM 8.2" <<execution environment>> {
        node "Web Site" <<artifact>> {
            [Model]
            [View]
            [Webhook Handler]
            [Cache]
            [Controller]
            [Middleware]
            [Route Handler]
            [Asset Manager]
        }
    }
    [HTML5] -d- [PHP FPM 8.2] : <i>**https:80**</i>
}

node "DB Server" <<device>> {
    [PostgreSQL DB] <<artifact>>
}
[Web Site] -d- [DB Server] : <i>**Propel ORM**</i>

node "YooKassa" <<artifact>> {
    [Payment Service] <<component>>
}
[Web Site] -u- [YooKassa] : <i>**YooKassa SDK (YooKassa API)**</i>

node "VK" <<artifact>> {
    [VK Group] <<artifact>>
}
[Web Site] -u- [VK]: <i>**VK API**</i> 

node "SMTP Server" <<device>> {
    [SMTP Service] <<artifact>>
}
[Web Site] -r- [SMTP Server] : <i>**PhpMailer (SMTP session)**</i>

node "Telegram" <<artifact>> {
    [Supership Group] <<artifact>>
}
[Web Site] -u- [Telegram] : <i>**Monolog (Telegram API)**</i>

@enduml

Как вы видите, здесь используются уже методы для ручного направления стрелок (u, r, d, l), иначе элементы на диаграмме уже будут расположены нелогично и громоздко. Не забывайте про них. Можете поэксперементировать и убрать их.

Итоговый результат представлен на изображении ниже:

Тестовые кейсы

Кейс 1: Базовое веб-приложение с CDN

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

Требования:

1. Клиент: веб-браузер, который загружает HTML и взаимодействует с сервером через HTTPS.
2. CDN: для доставки статических ресурсов (CSS, JS, изображения).
3. Веб-сервер: обрабатывает запросы через NGINX и использует PHP.
4. База данных: MySQL для хранения пользовательских данных.

Подсказка:

• Включите компоненты HTML5, CDN, веб-сервер, PHP-обработчик и MySQL.
• Пример связи: [Web Server] -u- [CDN]: "GET Static Files"

Кейс 2: Микросервисная архитектура

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

Требования:

1. Клиент: мобильное приложение.
2. API Gateway: маршрутизирует запросы на соответствующий микросервис.
3. Микросервисы:
   • User Service: обрабатывает данные пользователей.
   • Order Service: управляет заказами.
   • Payment Service: обрабатывает платежи.
4. База данных: разделена по микросервисам (MongoDB для пользователей, PostgreSQL для заказов).
5. Внешний API: используется сервис оплаты (например, Stripe).

Подсказка:

• Используйте разные устройства (например, контейнеры Docker).
• Пример связи: [API Gateway] -u- [Payment Service]: "POST /payment"