229 lines
7.8 KiB
HTML
229 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AWS Architecture Diagram</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
}
|
|
.container {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
}
|
|
.title {
|
|
text-align: center;
|
|
color: #232f3e;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
margin-bottom: 20px;
|
|
}
|
|
.region {
|
|
border: 3px solid #FF9900;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
background: #fff8f0;
|
|
}
|
|
.region-label {
|
|
background: #FF9900;
|
|
color: white;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
}
|
|
.vpc {
|
|
border: 2px solid #147eba;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
background: #f0f8ff;
|
|
}
|
|
.vpc-label {
|
|
background: #147eba;
|
|
color: white;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
}
|
|
.subnet {
|
|
border: 2px dashed #34a853;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
background: white;
|
|
}
|
|
.subnet.private {
|
|
border-color: #d93025;
|
|
}
|
|
.subnet-label {
|
|
font-weight: bold;
|
|
color: #232f3e;
|
|
margin-bottom: 10px;
|
|
font-size: 14px;
|
|
}
|
|
.service-box {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
margin: 8px 0;
|
|
font-size: 13px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
|
}
|
|
.service-box.alb {
|
|
background: linear-gradient(135deg, #FF9900 0%, #FF6600 100%);
|
|
}
|
|
.service-box.ecs {
|
|
background: linear-gradient(135deg, #FF9900 0%, #CC7A00 100%);
|
|
}
|
|
.service-box.rds {
|
|
background: linear-gradient(135deg, #527FFF 0%, #3E5FCC 100%);
|
|
}
|
|
.service-box.s3 {
|
|
background: linear-gradient(135deg, #569A31 0%, #3E7023 100%);
|
|
}
|
|
.service-box.monitoring {
|
|
background: linear-gradient(135deg, #FF4F8B 0%, #CC3E6E 100%);
|
|
}
|
|
.service-box.jenkins {
|
|
background: linear-gradient(135deg, #D24939 0%, #A63828 100%);
|
|
}
|
|
.arrow {
|
|
text-align: center;
|
|
color: #232f3e;
|
|
font-size: 20px;
|
|
margin: 5px 0;
|
|
}
|
|
.flow-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
}
|
|
.environments {
|
|
background: #f5f5f5;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #232f3e;
|
|
}
|
|
.icon {
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="title">🏗️ AWS Architecture Diagram</div>
|
|
|
|
<div class="region">
|
|
<div class="region-label">📍 AWS REGION (eu-west-1)</div>
|
|
|
|
<div class="vpc">
|
|
<div class="vpc-label">🔒 VPC (10.0.0.0/16)</div>
|
|
|
|
<div class="flow-grid">
|
|
<!-- Public Subnet -->
|
|
<div class="subnet">
|
|
<div class="subnet-label">🌐 Public Subnet (AZ-a)</div>
|
|
<div class="service-box alb">
|
|
<span class="icon">⚖️</span>
|
|
<strong>Application Load Balancer</strong>
|
|
</div>
|
|
<div class="service-box alb">
|
|
<span class="icon">🌉</span>
|
|
NAT Gateway
|
|
</div>
|
|
</div>
|
|
|
|
<div class="arrow">↓ HTTPS (443)</div>
|
|
|
|
<!-- Private Subnet AZ-a -->
|
|
<div class="subnet private">
|
|
<div class="subnet-label">🔐 Private Subnet (AZ-a)</div>
|
|
<div class="service-box ecs">
|
|
<span class="icon">📦</span>
|
|
<strong>ECS Cluster</strong> (3 EC2 nodes)
|
|
</div>
|
|
<div class="service-box ecs">
|
|
<span class="icon">🐳</span>
|
|
Microservices (Containers)
|
|
</div>
|
|
<div class="service-box ecs">
|
|
<span class="icon">🗂️</span>
|
|
ECR for images (central)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="arrow">↓ Private Network</div>
|
|
|
|
<!-- Private Subnet AZ-b -->
|
|
<div class="subnet private">
|
|
<div class="subnet-label">🔐 Private Subnet (AZ-b)</div>
|
|
<div class="service-box rds">
|
|
<span class="icon">💾</span>
|
|
<strong>Amazon RDS</strong> (MySQL, Multi-AZ)
|
|
</div>
|
|
<div class="service-box rds">
|
|
<span class="icon">⏰</span>
|
|
Automated Backups (14 days)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="arrow">↓</div>
|
|
|
|
<!-- S3 -->
|
|
<div class="service-box s3">
|
|
<span class="icon">🪣</span>
|
|
<strong>Amazon S3</strong><br>
|
|
Images, logs, backups, versioning & replication
|
|
</div>
|
|
|
|
<div class="arrow">↓</div>
|
|
|
|
<!-- Observability -->
|
|
<div class="service-box monitoring">
|
|
<span class="icon">📊</span>
|
|
<strong>Observability Stack</strong><br>
|
|
• Prometheus & Grafana<br>
|
|
• CloudWatch / X-Ray
|
|
</div>
|
|
|
|
<div class="arrow">↓</div>
|
|
|
|
<!-- Jenkins -->
|
|
<div class="service-box jenkins">
|
|
<span class="icon">🔧</span>
|
|
<strong>Jenkins</strong> (EC2 instance)<br>
|
|
• Build & Push to ECR<br>
|
|
• Deploy to ECS Cluster
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="environments">
|
|
🎯 Environments: STAGING / PRODUCTION<br>
|
|
<small>(Each has 3 ECS nodes, same structure)</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |