Replication & High Availability

Master database replication and high availability — primary-replica, failover, clustering, and zero-downtime architectures.

45 min•By Priygop Team•Last updated: Feb 2026

Replication & HA

Primary-Replica: Primary handles writes, replicas handle reads — distributes read load. Asynchronous (fast, slight lag) or synchronous (consistent, slower writes). Read replicas for reporting
Failover: If primary fails, promote a replica to primary — automatic (Patroni for PostgreSQL, MHA for MySQL) or manual. DNS/proxy routing switches application connections
Multi-Primary: Both nodes accept writes — conflict resolution required. MySQL Group Replication, Galera Cluster. Use for high write availability, not performance
Sharding: Split data across multiple databases by key (user_id % 4 → shard 0-3) — scales writes horizontally. Complex to implement. Use only when single database can't handle load
Connection Routing: ProxySQL, PgBouncer — route reads to replicas, writes to primary automatically. Application doesn't need to know about topology. Health checks remove failed nodes
Cloud-Managed: AWS RDS, Google Cloud SQL, Azure Database — automated backups, patching, failover, scaling. Higher cost but dramatically less operational burden

Try It Yourself: Database Monitor

Try It Yourself: Database MonitorHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html><head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #0f172a; color: #e2e8f0; }
  h2 { color: #4ade80; }
  .card { background: #1e293b; padding: 20px; border-radius: 10px; max-width: 550px; }
  .stat { display: flex; justify-content: space-between; padding: 10px; background: #0f172a; border-radius: 6px; margin: 6px 0; }
  .stat-label { color: #94a3b8; font-size: 13px; }
  .stat-value { font-weight: bold; font-size: 15px; }
  .good { color: #4ade80; } .warn { color: #fbbf24; } .bad { color: #f87171; }
  .bar-bg { background: #334155; border-radius: 4px; height: 8px; margin-top: 4px; }
  .bar { height: 8px; border-radius: 4px; transition: width 0.5s; }
  button { background: #22c55e; color: #0f172a; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; margin-top: 12px; }
</style></head><body>
<div class="card">
  <h2>📊 Database Health Monitor</h2>
  <div id="stats"></div>
  <button onclick="refresh()">🔄 Refresh Stats</button>
</div>
<script>
function refresh(){
  const stats=[
    {label:'CPU Usage',value:Math.floor(Math.random()*60+20),unit:'%',max:100},
    {label:'Memory',value:Math.floor(Math.random()*4+2),unit:' GB',max:8},
    {label:'Active Connections',value:Math.floor(Math.random()*80+10),unit:'',max:100},
    {label:'Query Cache Hit',value:Math.floor(Math.random()*30+70),unit:'%',max:100},
    {label:'Slow Queries',value:Math.floor(Math.random()*5),unit:'',max:10},
    {label:'Uptime',value:Math.floor(Math.random()*300+100),unit:' days',max:365},
  ];
  document.getElementById('stats').innerHTML=stats.map(s=>{
    const pct=(s.value/s.max*100);
    const cls=pct>80?'bad':pct>50?'warn':'good';
    return '<div class="stat"><div><div class="stat-label">'+s.label+'</div><div class="bar-bg"><div class="bar '+cls+'" style="width:'+pct+'%;background:var(--c)"></div></div></div><div class="stat-value '+cls+'">'+s.value+s.unit+'</div></div>';
  }).join('');
}
refresh();
</script></body></html>

<!DOCTYPE html>
<html><head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #0f172a; color: #e2e8f0; }
  h2 { color: #4ade80; }
  .card { background: #1e293b; padding: 20px; border-radius: 10px; max-width: 550px; }
  .stat { display: flex; justify-content: space-between; padding: 10px; background: #0f172a; border-radius: 6px; margin: 6px 0; }
  .stat-label { color: #94a3b8; font-size: 13px; }
  .stat-value { font-weight: bold; font-size: 15px; }
  .good { color: #4ade80; } .warn { color: #fbbf24; } .bad { color: #f87171; }
  .bar-bg { background: #334155; border-radius: 4px; height: 8px; margin-top: 4px; }
  .bar { height: 8px; border-radius: 4px; transition: width 0.5s; }
  button { background: #22c55e; color: #0f172a; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; margin-top: 12px; }
</style></head><body>
<div class="card">
  <h2>📊 Database Health Monitor</h2>
  <div id="stats"></div>
  <button onclick="refresh()">🔄 Refresh Stats</button>
</div>
<script>
function refresh(){
  const stats=[
    {label:'CPU Usage',value:Math.floor(Math.random()*60+20),unit:'%',max:100},
    {label:'Memory',value:Math.floor(Math.random()*4+2),unit:' GB',max:8},
    {label:'Active Connections',value:Math.floor(Math.random()*80+10),unit:'',max:100},
    {label:'Query Cache Hit',value:Math.floor(Math.random()*30+70),unit:'%',max:100},
    {label:'Slow Queries',value:Math.floor(Math.random()*5),unit:'',max:10},
    {label:'Uptime',value:Math.floor(Math.random()*300+100),unit:' days',max:365},
  ];
  document.getElementById('stats').innerHTML=stats.map(s=>{
    const pct=(s.value/s.max*100);
    const cls=pct>80?'bad':pct>50?'warn':'good';
    return '<div class="stat"><div><div class="stat-label">'+s.label+'</div><div class="bar-bg"><div class="bar '+cls+'" style="width:'+pct+'%;background:var(--c)"></div></div></div><div class="stat-value '+cls+'">'+s.value+s.unit+'</div></div>';
  }).join('');
}
refresh();
</script></body></html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|37 lines|2017 chars|✓ Valid syntax

UTF-8

Quick Quiz — DB Administration

Next Module →