-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmicroservices-masterclass-tutorial.html
More file actions
100 lines (92 loc) · 7.01 KB
/
Copy pathmicroservices-masterclass-tutorial.html
File metadata and controls
100 lines (92 loc) · 7.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Microservices Architecture Masterclass 🌐</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<!-- Highlight.js for Code Formatting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<style>
:root {
--bg-color: #0c111d; /* Deep Slate Base */
--primary-color: #94a3b8; /* Slate Blueish */
--primary-glow: rgba(148, 163, 184, 0.4);
--text-main: #f8fafc; --text-muted: #94a3b8;
--border-color: rgba(255, 255, 255, 0.08);
--card-border: rgba(255, 255, 255, 0.1);
--accent-color: #cbd5e1;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.6; background-image: radial-gradient(at 0% 0%, rgba(148, 163, 184, 0.15) 0px, transparent 50%); background-attachment: fixed; min-height: 100vh; }
.layout { display: flex; gap: 2.5rem; max-width: 1400px; margin: 0 auto; padding: 3rem 2rem; }
.sidebar { width: 280px; flex-shrink: 0; position: sticky; top: 3rem; max-height: calc(100vh - 6rem); overflow-y: auto; background: rgba(12, 17, 29, 0.8); border: 1px solid var(--card-border); border-radius: 16px; padding: 1.5rem; backdrop-filter: blur(12px); }
.sidebar h3 { margin-bottom: 1rem; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-main); border-bottom: 1px solid var(--card-border); padding-bottom: 1rem; }
.sidebar ul { list-style: none; }
.sidebar li { margin-bottom: 0.3rem; }
.nav-section { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin: 1.5rem 0 0.5rem 0; padding-left: 0.5rem; font-weight: 700; }
.sidebar a { text-decoration: none; color: var(--text-muted); display: block; padding: 0.5rem 1rem; border-radius: 8px; transition: all 0.3s ease; font-size: 0.95rem; font-weight: 500; }
.sidebar a.active { background: rgba(148, 163, 184, 0.2); color: #fff; border-left: 3px solid var(--accent-color); }
.sidebar a:hover:not(.active) { background: rgba(148, 163, 184, 0.15); color: #fff; transform: translateX(5px); }
.main-content { flex: 1; min-width: 0; }
header { text-align: center; margin-bottom: 3rem; }
h1 { font-size: 3rem; font-weight: 800; margin-bottom: 1rem; background: linear-gradient(135deg, #e2e8f0 0%, #64748b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.content-card { background: rgba(12, 17, 29, 0.6); border: 1px solid var(--card-border); border-radius: 16px; padding: 2.5rem; margin-bottom: 2rem; }
h2 { font-size: 1.8rem; margin-bottom: 1.5rem; color: #fff; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; }
p { margin-bottom: 1rem; font-size: 1.1rem; color: #cbd5e1; }
ul { margin-left: 1.5rem; margin-bottom: 1rem; color: #cbd5e1; }
.diagram { font-family: 'JetBrains Mono', monospace; background: #050505; color: #cbd5e1; padding: 1.5rem; border-radius: 12px; border: 1px solid var(--primary-color); overflow-x: auto; white-space: pre; line-height: 1.4; margin: 1.5rem 0; font-size: 0.85rem; }
.explanation { background: rgba(148, 163, 184, 0.1); border-left: 4px solid var(--accent-color); padding: 1rem 1.5rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0; }
</style>
</head>
<body>
<div class="layout">
<aside class="sidebar">
<h3>🗂️ Tutorials Link</h3>
<nav id="dynamic-sidebar">
<ul>
<li><a href="index.html">🏠 Home Hub</a></li>
<li class="nav-section">Architecture</li>
<li><a href="microservices-masterclass-tutorial.html" class="active">🧩 Microservices</a></li>
</ul>
</nav>
</aside>
<main class="main-content">
<header>
<h1>Microservices Architecture 🌐</h1>
<p class="subtitle">Decoupling Monoliths, API Gateways, and Internal Communication via gRPC.</p>
</header>
<div class="content-card">
<h2>1. Monolithic vs Microservices</h2>
<p><strong>Monolithic:</strong> Aapky system k saaray modules (Auth, Orders, Payment, Notifications) ek hi Express server Codebase me chal rahay hain. Ager sirf Payment me lag araha ha, toh saari app hang ya crash ho skti hai.</p>
<p><strong>Microservices:</strong> Har feature ka apna independently running server aor apna alag database hota hai. Auth ek service pe chal raha hota, Orders dosri pr, aur ye sab apas me internet (Network) ke zariye bat kartay hn.</p>
</div>
<div class="content-card">
<h2>2. The Core Component: API Gateway</h2>
<div class="diagram">
Frontend App --- request ---> [ API GATEWAY ]
|
+------------+--------+--------+------------+
| | | |
[Auth Service] [Product Service] [Order Service]
(Port 3001) (Port 3002) (Port 3003)
</div>
<div class="explanation">
<p>👉 <strong>API Gateway:</strong> Frontend ko har service ka port yaad nahi rakhna pardta. Gateway single entrypoint hota hai (e.g. Nginx, Kong, or Express router). Gateway traffic forward (reverse-proxy) krta hai relevant microservice tak, aur sab request ko aatay hi Rate Limiting aor Authentication (JWT verify) bhi provide karta ha.</p>
</div>
</div>
<div class="content-card">
<h2>3. Inter-Service Communication</h2>
<p>Maan lo k Order Service ne order confirm kar k Notification Server ko kehna ha message dalo. Dono alag server hn, to ye baat kase krengy? 2 tareeqey hn:</p>
<ul>
<li>⚡ <strong>Synchronous (gRPC / HTTP):</strong> Order serivce seedha <code>axios.post('http://notify-service/send')</code> marti ha. gRPC HTTP se 10x tak fast data serialize/deserialize karta ha between binary internal networks.</li>
<li>📨 <strong>Asynchronous (Message Queues):</strong> Order service sirf Kafka / RabbitMQ aek Queue message drop karti ha <code>"Order_Saved"</code>. Notification Service Queue lge hoti aor sunte hi Action perform karti ha. Is se fault tolerance barhti hai.</li>
</ul>
</div>
</main>
</div>
</body>
</html>