<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>InfraHub - Multi-CDN Architecture</title>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
  />
  <link rel="stylesheet" href="{{ url_for('pages.serve_css', filename='retro.css') }}">
</head>
<body>
  <!-- ===== HEADER ===== -->
  <header>
    <div class="header-inner">
      <div class="left">
        <img src="{{ url_for('pages.serve_png', filename='infrahublogo.png') }}" alt="InfraHub Logo" class="logo">
        <div class="title-group">
          <h1>InfraHub Multi-CDN</h1>
          <p class="tagline">Reliable, fault-tolerant CDN setups</p>
        </div>
      </div>
      <nav>
        <ul class="navbar">
          <li><a href="{{ url_for('pages.index') }}"><i class="fa fa-house"></i> Home</a></li>
          <li><a href="{{ url_for('pages.aws') }}"><i class="fa"></i> AWS Knowledge</a></li>
          <li><a href="{{ url_for('pages.s3_backend') }}"><i class="fa fa-database"></i> S3 Backend</a></li>
          <li><a href="{{ url_for('pages.security') }}"><i class="fa fa-shield-alt"></i> Security</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- ===== MAIN CONTENT ===== -->
  <main>
    <div class="container">
      <section id="background">
        <h2>Why Multi-CDN?</h2>
        <p>
          Using a single cloud provider exposes your infrastructure to a <strong>single point of failure</strong>.
          A notable example is the Cloudflare incident on November 18, 2025. A database permission change caused a critical configuration file to double in size, triggering HTTP 5xx errors across their network.
          This outage illustrates the importance of redundancy across multiple CDNs.
        </p>
        <ul>
          <li>Core CDN and security services returned 5xx errors.</li>
          <li>Authentication systems experienced failures.</li>
          <li>Latency increased due to debugging processing errors.</li>
        </ul>
      </section>

      <section id="cloud-single-point-of-failure">
        <h2>Cloud Single Point of Failure</h2>
        <p>
          Any cloud provider can experience hardware failures, software bugs, or misconfigurations. Multi-CDN reduces this risk by distributing traffic and providing failover paths.
        </p>
      </section>

      <section id="setup-cloudfront">
        <h2>Step 1: Primary CDN – CloudFront</h2>
        <p>
          CloudFront serves as the main entry point for user traffic, routing requests to the origins you configure (containers, EC2 instances, or S3 buckets). Proper setup ensures reliable delivery.
        </p>
        <ul>
          <li><a href="https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html">CloudFront Developer Guide</a></li>
          <li><a href="https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-web-values-specify.html">Distributions & Origins</a></li>
        </ul>
      </section>

      <section id="setup-route53">
        <h2>Step 2: DNS with Route 53</h2>
        <p>DNS resolution works as follows:</p>
        <ol>
          <li>Enter domain (e.g., www.example.com) in browser.</li>
          <li>Browser checks local cache for IP.</li>
          <li>If not cached, query goes to a recursive resolver (ISP or public).</li>
          <li>Resolver queries DNS hierarchy: root → TLD → authoritative server.</li>
          <li>Resolver returns IP to browser, which connects to the server.</li>
        </ol>
        <ul>
          <li><a href="https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/welcome.html">Route 53 Developer Guide</a></li>
          <li><a href="https://www.cloudflare.com/learning/dns/what-is-dns/">DNS Resolution Explained</a></li>
        </ul>
        <p>
          After linking CloudFront with Route 53, CloudFront automatically creates an <strong>A or AAAA record</strong>.
        </p>
      </section>

      <section id="setup-multi-cdn">
        <h2>Step 3: Add a Secondary CDN – Fastly</h2>
        <p>
          Add a second CDN (e.g., Fastly) pointing to the same origin(s) to allow failover if CloudFront fails.
        </p>
        <ul>
          <li>Origin can be container, EC2, or S3 as long as it's publicly reachable.</li>
          <li>Fastly gets its own DNS record in Route 53.</li>
        </ul>
        <ul>
          <li><a href="https://developer.fastly.com/">Fastly Documentation</a></li>
          <li><a href="https://developer.fastly.com/learning/cdn/">CDN Setup & Origins</a></li>
        </ul>
      </section>

      <section id="health-checks">
        <h2>Step 4: Route 53 Health Checks & Failover</h2>
        <ol>
          <li>Create a dedicated, complex domain pointing to the CloudFront distribution for monitoring.</li>
          <li>Set up a Route 53 health check for this domain.</li>
          <li>Edit A records of both CDNs in Route 53.</li>
          <li>Set routing policy to <strong>Failover</strong>: assign primary/secondary and attach health check ID.</li>
        </ol>
        <p>
          Route 53 will automatically redirect traffic if a health check fails, ensuring full fault tolerance.
        </p>
        <ul>
          <li><a href="https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/dns-failover.html">DNS Failover Guide</a></li>
          <li><a href="https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/route-53-health-checks.html">Health Checks</a></li>
        </ul>
      </section>

      <section id="conclusion">
        <h2>Conclusion</h2>
        <p>
          Multi-CDN with Route 53 health checks removes single points of failure, keeping your users connected even if one provider fails.
        </p>
      </section>

      <div class="back-home">
        <a href="{{ url_for('pages.aws') }}" class="back-btn"><i class="fa fa-arrow-left"></i> Back to AWS Hub</a>
      </div>
    </div>
  </main>

  <!-- ===== FOOTER ===== -->
  <footer>
    <p>© 2025 InfraHub — Designed for Learning and Deployment</p>
  </footer>
</body>
</html>
