Media4.life

Spec

Technical Specification v2.4

Architektura media4.life & Fretty App

Detailní technický popis decoupled infrastruktury na Google Cloud Platform a aplikací v ekosystému media4.life.

📐 Diagram infrastruktury

┌────────────────────────────────────────────────────────────────────────┐
│                      GOOGLE CLOUD PLATFORM (GCP)                       │
│                                                                        │
│   ┌───────────────────────────┐       ┌────────────────────────────┐   │
│   │   Frontend Cloud Run      │       │   Backend Cloud Run        │   │
│   │   (Docker Container)      │       │   (Docker Container)       │   │
│   │                           │       │                            │   │
│   │   Next.js 15 / React      │       │   Headless WordPress       │   │
│   │   Apollo Client GraphQL ──┼───────┼──► WPGraphQL Plugin         │   │
│   └─────────────┬─────────────┘       └─────────────┬──────────────┘   │
│                 │                                   │                  │
│                 ▼                                   ▼                  │
│        [ CDN / Edge Cache ]                   [ CloudSQL ]             │
└─────────────────┼──────────────────────────────────────────────────────┘
                  │
                  ▼
          Client Browser

1. Decoupled Frontend (Next.js)

Frontend běží jako samostatný Docker kontejner v režimu GCP Cloud Run s automatickým auto-scalingem (0 až N instancí). Využívá GraphQL rozhraní k dotazování dat z backendu.

  • Statická regenerace stránek (ISR) pro maximální rychlost načítání.
  • Ochrana před výpadky databáze (frontend zobrazuje nacachovaná data).

2. Headless CMS Backend (WordPress + WPGraphQL)

WordPress slouží výhradně jako administrační rozhraní a datový sklad bez generování veřejného HTML. Všechna data jsou publikována skrz rozhraní WPGraphQL.

3. Aplikace Fretty (guitar-poet.com/fretty)

Vysoce škálovatelná aplikace pro generování hudební notace a kytarových hmatníků v reálném čase. SVG grafika je vykreslována přímo na straně klienta nebo serveru bez potřeby rasterizace na rástru.

Feature: Real-time SVG rendering, Custom Chord Diagrams, Responsive Layout.