[All] 시스템 아키텍처 그림

[2020147542]

Mermaid Live Editor 사용

[2020147542]

[2020147542]

graph LR
    %% Components outside EC2
    FE[Frontend]
    S3[AWS S3]
    SQS[AWS SQS]
    ML[Local GPU Server<br/>Python ML]

    %% EC2 Components
    subgraph EC2[EC2 Instance]
        NGINX[Nginx Reverse Proxy<br/>Docker Container]
        BE[Spring Backend<br/>Docker Container]
        DB[MySQL DB<br/>Docker Container]
    end

    %% Connection Flow
    FE -->|15.164.219.98.nip.io| NGINX
    NGINX -->|EC2_private_IP:8080| BE
    BE <-->|CRUD| DB
    
    %% API and S3 flow
    BE -->|REST APIs| FE
    BE -->|S3 Presigned URL| FE
    FE <-->|File Upload/Download| S3
    
    %% Left side flow with ML
    BE -->|ML Task Message| SQS
    SQS -->|Consume Task| ML
    ML -->|Processing Status| BE
    ML <-->|File Upload/Download| S3

    %% Layout Adjustment
    classDef group fill:#fff,stroke:#666,stroke-width:1px,color:#333
    class EC2,Docker group

    %% Component Styles - Darker Colors
    style FE fill:#E86262,stroke:#333,stroke-width:2px,color:#fff
    style NGINX fill:#FF8C00,stroke:#333,stroke-width:2px,color:#fff
    style BE fill:#4A90E2,stroke:#333,stroke-width:2px,color:#fff
    style DB fill:#2E8B57,stroke:#333,stroke-width:2px,color:#fff
    style S3 fill:#F4A460,stroke:#333,stroke-width:2px,color:#fff
    style SQS fill:#9370DB,stroke:#333,stroke-width:2px,color:#fff
    style ML fill:#CD5C5C,stroke:#333,stroke-width:2px,color:#fff
    
    %% Link Styles
    linkStyle default stroke:#666,stroke-width:2px

[2020147542]

2차 변경

[2020147542]

graph LR
    %% Components outside EC2
    FE[Frontend]
    S3[AWS S3]
    SQS[AWS SQS]
    DISCORD[Discord Bot]
    GMAIL[Google SMTP Server]
    
    %% EC2 Components
    subgraph EC2[EC2 Instance]
        NGINX[Nginx Reverse Proxy<br/>Docker Container]
        BE[Spring Backend<br/>Docker Container]
        DB[MySQL DB<br/>Docker Container]
    end
    
    %% Python Server
    subgraph ML[Local Python ML/GPU Server]
        PY[Python ML Server]
        LIBS[Essentia/Demucs/Asyncio]
    end
    
    %% Main Connection Flow
    FE -->|15.164.219.98.nip.io| NGINX
    NGINX -->|EC2_private_IP:8080| BE
    BE <-->|CRUD| DB
    
    %% API and S3 flow
    BE -->|REST APIs| FE
    BE -->|S3 Presigned URL| FE
    FE <-->|File Upload/Download| S3
    
    %% Email Authentication
    BE -->|Send Auth Code| GMAIL
    GMAIL -->|Deliver Email| USERS
    
    %% ML and Discord Integration
    BE -->|ML Task Message| SQS
    SQS -->|Consume Task| PY
    PY -->|Processing Status| BE
    PY <-->|File Upload/Download| S3
    
    %% Discord Status Updates
    PY -->|Status Updates| DISCORD
    DISCORD -->|User Notifications| DEVELOPERS
    
    
    %% Styling
    classDef group fill:#fff,stroke:#666,stroke-width:1px,color:#333
    class EC2,ML group
    
    %% Component Colors
    style FE fill:#E86262,stroke:#333,stroke-width:2px,color:#fff
    style NGINX fill:#FF8C00,stroke:#333,stroke-width:2px,color:#fff
    style BE fill:#4A90E2,stroke:#333,stroke-width:2px,color:#fff
    style DB fill:#2E8B57,stroke:#333,stroke-width:2px,color:#fff
    style S3 fill:#F4A460,stroke:#333,stroke-width:2px,color:#fff
    style SQS fill:#9370DB,stroke:#333,stroke-width:2px,color:#fff
    style PY fill:#CD5C5C,stroke:#333,stroke-width:2px,color:#fff
    style DISCORD fill:#7289DA,stroke:#333,stroke-width:2px,color:#fff
    style GMAIL fill:#DB4437,stroke:#333,stroke-width:2px,color:#fff
    style LIBS fill:#98FB98,stroke:#333,stroke-width:2px,color:#333