<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>InfraHub - S3 & Backend Integration</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>
      <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.multi_cdn') }}"><i class="fa fa-network-wired"></i> Multi-CDN</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 class="about">
        <h2>S3 & Backend Integration</h2>
        <p>
          Amazon S3 (Simple Storage Service) is a highly scalable object storage service. InfraHub uses S3 to store all static assets including HTML templates, CSS files, images, and downloadable content. This allows the backend to remain lightweight, stateless, and easy to update.
        </p>
      </section>

      <hr class="divider">

      <section class="sections">
        <h2>Benefits of Using S3</h2>
        <ul>
          <li><strong>Scalability:</strong> S3 automatically scales with your storage needs, no matter how many files or how much traffic your site receives.</li>
          <li><strong>High Availability & Durability:</strong> Data is redundantly stored across multiple availability zones, ensuring reliability.</li>
          <li><strong>Cost Efficiency:</strong> S3 charges primarily for storage and requests, making it economical for static content and infrequently updated files.</li>
          <li><strong>Security:</strong> Supports encryption at rest and in transit, IAM policies for fine-grained access, and integration with AWS KMS.</li>
          <li><strong>Performance:</strong> Files are served efficiently to CDNs and backend applications without needing persistent local storage.</li>
        </ul>
      </section>

      <hr class="divider">

      <section class="implementation">
        <h2>Backend Integration with Flask & Boto3</h2>
        <p>
          InfraHub uses a Flask application to dynamically fetch and serve S3 content. The backend is modular, lightweight, and containerized with Docker.
        </p>

        <h3>Examples:</h3>
        <pre><code class="language-python">
import boto3
from flask import Response

s3 = boto3.client('s3')
BUCKET_NAME = 'capstone-ajaimes'

# Fetch HTML template dynamically
def get_s3_text_file(key):
    obj = s3.get_object(Bucket=BUCKET_NAME, Key=key)
    return obj['Body'].read().decode('utf-8')

# Serve a CSS file
def serve_css(filename):
    css_key = f'frontend/static/{filename}'
    css_content = get_s3_text_file(css_key)
    return Response(css_content, mimetype='text/css')

# Serve PNG images
def serve_png(filename):
    s3_key = f'frontend/images/{filename}'
    obj = s3.get_object(Bucket=BUCKET_NAME, Key=s3_key)
    return Response(obj['Body'].read(), mimetype='image/png')
        </code></pre>

        <p>
          This approach keeps containers stateless and allows updates to templates, styles, or assets without rebuilding the Docker image. S3 works seamlessly with the CDNs to deliver content reliably and at low latency.
        </p>
      </section>

      <hr class="divider">

      <section class="details">
        <h2>Additional Features</h2>
        <ul>
          <li><strong>Secure Downloads:</strong> Files served from S3 can be streamed directly to the client with proper headers to force downloads.</li>
          <li><strong>Dynamic Template Serving:</strong> HTML and CSS are loaded from S3 using Flask’s render_template_string, allowing content updates without redeploying the container.</li>
          <li><strong>Stateless Backend:</strong> Containers remain lightweight, with no local asset storage, simplifying CI/CD and deployment processes.</li>
          <li><strong>Encryption:</strong> S3 supports server-side encryption (SSE-S3, SSE-KMS) ensuring that static content is stored securely.</li>
          <li><strong>Cost Awareness:</strong> Using S3 reduces EC2 storage costs and limits outbound bandwidth charges when combined with CloudFront and Fastly.</li>
        </ul>
      </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>
