6f28146ac3
- Complete project structure with Next.js frontend - GraphQL API backend with Apollo Server - Portal application with NextAuth - Crossplane Proxmox provider - GitOps configurations - CI/CD pipelines - Testing infrastructure (Vitest, Jest, Go tests) - Error handling and monitoring - Security hardening - UI component library - Documentation
163 lines
8.6 KiB
XML
163 lines
8.6 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000">
|
|
<defs>
|
|
<style>
|
|
.internet { fill: #3498DB; stroke: #2980B9; stroke-width: 2; }
|
|
.cloudflare { fill: #F38020; stroke: #C85F00; stroke-width: 2; }
|
|
.control-plane { fill: #326CE5; stroke: #1E4A8A; stroke-width: 2; }
|
|
.proxmox { fill: #E57000; stroke: #B85900; stroke-width: 2; }
|
|
.tunnel { stroke: #F38020; stroke-width: 3; stroke-dasharray: 10,5; fill: none; }
|
|
.network { stroke: #7F8C8D; stroke-width: 1; fill: #ECF0F1; }
|
|
.text { font-family: Arial, sans-serif; font-size: 12px; fill: #333; }
|
|
.title { font-size: 16px; font-weight: bold; }
|
|
.label { font-size: 10px; fill: #666; }
|
|
</style>
|
|
</defs>
|
|
|
|
<text x="800" y="30" text-anchor="middle" class="text title">Network Topology - Global Hybrid Cloud</text>
|
|
|
|
<!-- Internet Cloud -->
|
|
<ellipse cx="800" cy="100" rx="200" ry="40" class="internet"/>
|
|
<text x="800" y="105" text-anchor="middle" class="text" fill="white">Internet</text>
|
|
|
|
<!-- Cloudflare Global Network -->
|
|
<rect x="200" y="180" width="1200" height="120" class="cloudflare" rx="10"/>
|
|
<text x="800" y="210" text-anchor="middle" class="text title" fill="white">Cloudflare Global Network</text>
|
|
<text x="400" y="240" text-anchor="middle" class="text" fill="white">Edge Locations (200+ cities)</text>
|
|
<text x="800" y="240" text-anchor="middle" class="text" fill="white">Zero Trust Gateway</text>
|
|
<text x="1200" y="240" text-anchor="middle" class="text" fill="white">DNS + DDoS Protection</text>
|
|
|
|
<!-- Control Plane Site -->
|
|
<rect x="600" y="350" width="400" height="200" class="control-plane" rx="10"/>
|
|
<text x="800" y="380" text-anchor="middle" class="text title" fill="white">Control Plane (Primary Site)</text>
|
|
|
|
<!-- Control Plane Components -->
|
|
<rect x="630" y="400" width="100" height="60" class="network" rx="5"/>
|
|
<text x="680" y="425" text-anchor="middle" class="text">K8s API</text>
|
|
<text x="680" y="445" text-anchor="middle" class="text">Server</text>
|
|
|
|
<rect x="750" y="400" width="100" height="60" class="network" rx="5"/>
|
|
<text x="800" y="425" text-anchor="middle" class="text">Rancher</text>
|
|
<text x="800" y="445" text-anchor="middle" class="text">UI</text>
|
|
|
|
<rect x="870" y="400" width="100" height="60" class="network" rx="5"/>
|
|
<text x="920" y="425" text-anchor="middle" class="text">Crossplane</text>
|
|
<text x="920" y="445" text-anchor="middle" class="text">API</text>
|
|
|
|
<rect x="630" y="480" width="100" height="60" class="network" rx="5"/>
|
|
<text x="680" y="505" text-anchor="middle" class="text">ArgoCD</text>
|
|
<text x="680" y="525" text-anchor="middle" class="text">GitOps</text>
|
|
|
|
<rect x="750" y="480" width="100" height="60" class="network" rx="5"/>
|
|
<text x="800" y="505" text-anchor="middle" class="text">Portal</text>
|
|
<text x="800" y="525" text-anchor="middle" class="text">(Next.js)</text>
|
|
|
|
<rect x="870" y="480" width="100" height="60" class="network" rx="5"/>
|
|
<text x="920" y="505" text-anchor="middle" class="text">Keycloak</text>
|
|
<text x="920" y="525" text-anchor="middle" class="text">Auth</text>
|
|
|
|
<!-- Cloudflare Tunnel to Control Plane -->
|
|
<path d="M 800 350 Q 800 280 800 300" class="tunnel"/>
|
|
<text x="820" y="320" class="label">Tunnel 1</text>
|
|
|
|
<!-- Proxmox Site 1 (US-East) -->
|
|
<rect x="100" y="650" width="350" height="300" class="proxmox" rx="10"/>
|
|
<text x="275" y="680" text-anchor="middle" class="text title" fill="white">Proxmox Site 1 - US-East</text>
|
|
|
|
<!-- Site 1 Nodes -->
|
|
<rect x="130" y="710" width="120" height="100" class="network" rx="5"/>
|
|
<text x="190" y="735" text-anchor="middle" class="text">Node 1</text>
|
|
<text x="190" y="755" text-anchor="middle" class="text">pve1.example.com</text>
|
|
<text x="190" y="775" text-anchor="middle" class="text">VMs: 20</text>
|
|
<text x="190" y="795" text-anchor="middle" class="text">Storage: Ceph</text>
|
|
|
|
<rect x="280" y="710" width="120" height="100" class="network" rx="5"/>
|
|
<text x="340" y="735" text-anchor="middle" class="text">Node 2</text>
|
|
<text x="340" y="755" text-anchor="middle" class="text">pve2.example.com</text>
|
|
<text x="340" y="775" text-anchor="middle" class="text">VMs: 18</text>
|
|
<text x="340" y="795" text-anchor="middle" class="text">Storage: Ceph</text>
|
|
|
|
<!-- Site 1 Tunnel -->
|
|
<rect x="130" y="830" width="120" height="60" class="cloudflare" rx="5"/>
|
|
<text x="190" y="855" text-anchor="middle" class="text" fill="white">cloudflared</text>
|
|
<text x="190" y="875" text-anchor="middle" class="text" fill="white">Agent</text>
|
|
|
|
<path d="M 190 830 Q 190 500 400 300" class="tunnel"/>
|
|
<text x="250" y="550" class="label">Tunnel 2</text>
|
|
|
|
<!-- Proxmox Site 2 (EU-West) -->
|
|
<rect x="550" y="650" width="350" height="300" class="proxmox" rx="10"/>
|
|
<text x="725" y="680" text-anchor="middle" class="text title" fill="white">Proxmox Site 2 - EU-West</text>
|
|
|
|
<!-- Site 2 Nodes -->
|
|
<rect x="580" y="710" width="120" height="100" class="network" rx="5"/>
|
|
<text x="640" y="735" text-anchor="middle" class="text">Node 1</text>
|
|
<text x="640" y="755" text-anchor="middle" class="text">pve3.example.com</text>
|
|
<text x="640" y="775" text-anchor="middle" class="text">VMs: 15</text>
|
|
<text x="640" y="795" text-anchor="middle" class="text">Storage: ZFS</text>
|
|
|
|
<rect x="730" y="710" width="120" height="100" class="network" rx="5"/>
|
|
<text x="790" y="735" text-anchor="middle" class="text">Node 2</text>
|
|
<text x="790" y="755" text-anchor="middle" class="text">pve4.example.com</text>
|
|
<text x="790" y="775" text-anchor="middle" class="text">VMs: 12</text>
|
|
<text x="790" y="795" text-anchor="middle" class="text">Storage: ZFS</text>
|
|
|
|
<!-- Site 2 Tunnel -->
|
|
<rect x="580" y="830" width="120" height="60" class="cloudflare" rx="5"/>
|
|
<text x="640" y="855" text-anchor="middle" class="text" fill="white">cloudflared</text>
|
|
<text x="640" y="875" text-anchor="middle" class="text" fill="white">Agent</text>
|
|
|
|
<path d="M 640 830 Q 640 500 800 300" class="tunnel"/>
|
|
<text x="700" y="550" class="label">Tunnel 3</text>
|
|
|
|
<!-- Proxmox Site 3 (APAC) -->
|
|
<rect x="1000" y="650" width="350" height="300" class="proxmox" rx="10"/>
|
|
<text x="1175" y="680" text-anchor="middle" class="text title" fill="white">Proxmox Site 3 - APAC</text>
|
|
|
|
<!-- Site 3 Nodes -->
|
|
<rect x="1030" y="710" width="120" height="100" class="network" rx="5"/>
|
|
<text x="1090" y="735" text-anchor="middle" class="text">Node 1</text>
|
|
<text x="1090" y="755" text-anchor="middle" class="text">pve5.example.com</text>
|
|
<text x="1090" y="775" text-anchor="middle" class="text">VMs: 10</text>
|
|
<text x="1090" y="795" text-anchor="middle" class="text">Storage: Local</text>
|
|
|
|
<rect x="1180" y="710" width="120" height="100" class="network" rx="5"/>
|
|
<text x="1240" y="735" text-anchor="middle" class="text">Node 2</text>
|
|
<text x="1240" y="755" text-anchor="middle" class="text">pve6.example.com</text>
|
|
<text x="1240" y="775" text-anchor="middle" class="text">VMs: 8</text>
|
|
<text x="1240" y="795" text-anchor="middle" class="text">Storage: Local</text>
|
|
|
|
<!-- Site 3 Tunnel -->
|
|
<rect x="1030" y="830" width="120" height="60" class="cloudflare" rx="5"/>
|
|
<text x="1090" y="855" text-anchor="middle" class="text" fill="white">cloudflared</text>
|
|
<text x="1090" y="875" text-anchor="middle" class="text" fill="white">Agent</text>
|
|
|
|
<path d="M 1090 830 Q 1090 500 1000 300" class="tunnel"/>
|
|
<text x="1050" y="550" class="label">Tunnel 4</text>
|
|
|
|
<!-- Local Networks -->
|
|
<rect x="130" y="920" width="270" height="20" class="network" rx="3"/>
|
|
<text x="265" y="933" text-anchor="middle" class="label">Site 1 LAN: 10.1.0.0/16</text>
|
|
|
|
<rect x="580" y="920" width="270" height="20" class="network" rx="3"/>
|
|
<text x="715" y="933" text-anchor="middle" class="label">Site 2 LAN: 10.2.0.0/16</text>
|
|
|
|
<rect x="1030" y="920" width="270" height="20" class="network" rx="3"/>
|
|
<text x="1165" y="933" text-anchor="middle" class="label">Site 3 LAN: 10.3.0.0/16</text>
|
|
|
|
<!-- Control Plane Network -->
|
|
<rect x="630" y="570" width="340" height="20" class="network" rx="3"/>
|
|
<text x="800" y="583" text-anchor="middle" class="label">Control Plane LAN: 10.0.0.0/16</text>
|
|
|
|
<!-- Connection Labels -->
|
|
<text x="200" y="150" class="label">HTTPS (443)</text>
|
|
<text x="1400" y="150" class="label">HTTPS (443)</text>
|
|
|
|
<!-- Security Notes -->
|
|
<rect x="50" y="50" width="200" height="80" class="network" rx="5"/>
|
|
<text x="150" y="70" text-anchor="middle" class="text title">Security Features</text>
|
|
<text x="150" y="90" text-anchor="middle" class="label">• Zero Trust Access</text>
|
|
<text x="150" y="105" text-anchor="middle" class="label">• No Public IPs</text>
|
|
<text x="150" y="120" text-anchor="middle" class="label">• Encrypted Tunnels</text>
|
|
</svg>
|
|
|