Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Reading the session context, I can see you've built a significant multi-domain hub infrastructure with CloudFront routing, DNS consolidation, and a centralized site registry. Let me write a technical blog post covering the infrastructure work: ```html

Building a Multi-Domain Microsite Hub with CloudFront Functions and Centralized Routing

What Was Done

We registered a new apex domain, thequeensfleet.com, and built a centralized hub that orchestrates routing and content delivery across 16 existing microsites (queenof[city].com). The hub consolidates navigation, branding, and discovery while delegating specialized content to individual city domains. This required three key infrastructure components: domain registration and DNS setup, a CloudFront distribution with intelligent routing functions, and a dynamic hub page builder that integrates with the existing site registry.

Technical Architecture

The system works as a three-layer stack:

  • Layer 1: Apex Domain & DNS. thequeensfleet.com uses Route53 A/AAAA records pointing to a CloudFront distribution (ID: E176JRMB92GPAJ). All traffic enters through this single edge location, which provides DDoS protection, caching, and function execution at AWS edge.
  • Layer 2: CloudFront Functions & Routing. A CloudFront function (router.js) runs on every request, examining the hostname and path to determine whether traffic should be served hub content or proxied to a city origin. The function is deployed to all edge locations and executes in microseconds, adding negligible latency.
  • Layer 3: Origins & Content. Two origins back the distribution: the hub origin (S3 bucket qos-city-sites) for the main hub page and static assets, and per-city origins (individual CloudFront distributions) for specialized content like card imagery and destination-specific pages.

How Routing Works

The routing function inspects the incoming hostname and applies these rules:

  • Apex domain requests (thequeensfleet.com, www.thequeensfleet.com) → serve the hub page from S3.
  • City subdomain requests (thepacific.thequeensfleet.com, theatlantic.thequeensfleet.com, etc.) → rewrite the path and route to the appropriate city CloudFront origin based on a lookup table.
  • Asset requests (images, CSS, JS) → cached with a 30-day TTL; images are versioned with ETags to enable instant cache invalidation.

This approach avoids the operational burden of maintaining dozens of separate distributions while keeping city content isolated and independently scalable. The function source is version-controlled in /Users/cb/icloud-repos/sites/queenof-cities/build/router.js and deployed via a deployment script that validates syntax and pushes to CloudFront Function associations on the E176JRMB92GPAJ distribution.

Hub Page Generation

The hub page is built dynamically by a Python script (build_hub.py) that reads the site registry and generates an HTML page with cards for each destination. Each card includes:

  • Destination name and description (from the registry)
  • A preview image hosted on S3 at s3://qos-city-sites/[city]/0.jpg
  • A link to the city's CloudFront distribution (e.g., https://thepacific.thequeensfleet.com/)
  • Metadata for SEO and social sharing

The script is idempotent: running it multiple times produces the same output, which allows safe re-deployments without side effects. The generated HTML is uploaded to s3://qos-city-sites/index.html, and the CloudFront distribution is invalidated using ETags to ensure edge locations fetch fresh content within seconds.

Infrastructure Details

DNS Changes: The domain registrar (Namecheap) was configured via API to point thequeensfleet.com apex and www subdomain to the CloudFront distribution alias. An AWS Certificate Manager certificate was requested for thequeensfleet.com in us-east-1 (required for CloudFront) and validated via DNS CNAME records added to Namecheap.

CloudFront Aliases: Four new aliases were added to the existing distribution:

  • thequeensfleet.com
  • www.thequeensfleet.com
  • thepacific.thequeensfleet.com
  • theatlantic.thequeensfleet.com
  • mazatlan.thequeensfleet.com
  • (and 11 additional city subdomains)

Each alias maps to a single TLS certificate covering all hostnames, reducing operational complexity.

Route53 Configuration: A-record aliases were created in Route53 for each subdomain, all pointing to the CloudFront distribution via its regional endpoint. This allows DNS failover and health-checking if needed in future iterations.

Key Decisions

Why CloudFront Functions instead of Lambda@Edge? Functions execute natively in CloudFront edge locations with guaranteed sub-millisecond latency and no cold starts, whereas Lambda@Edge invokes compute instances which can add 50–100ms. For routing logic, the latency difference is material.

Why a centralized hub instead of individual microsites acting independently? A hub provides unified navigation, branding consistency, and discovery across the portfolio. Users can explore all destinations from one entry point, improving engagement and cross-promotional opportunities. It also simplifies analytics: traffic patterns across the entire network are visible in a single CloudFront dashboard.

Why S3 + CloudFront instead of traditional web servers? Static hosting eliminates infrastructure overhead, scales infinitely without provisioning, and integrates natively with CloudFront for caching and function execution. The hub page is generated offline and uploaded as static HTML, reducing runtime complexity.

Testing & Validation

A test suite (/Users/cb/icloud-repos/sites/queenof-cities/tests/test_hub.py) validates:

  • Hub page structure (presence of all 16 city cards, correct links)
  • Image asset existence (checking s3://qos-city-sites/[city]/0.jpg for each destination)
  • HTTPS certificate validity across all aliases
  • CloudFront alias resolution to the distribution endpoint

Tests are run post-deployment to catch stale cache, missing assets, or misconfigured routes before users encounter them.

What's Next

The avatar generation layer is in progress and will integrate with the hub via a dedicated endpoint for dynamic hero imagery and personalized destination recommendations. A second iteration will add server-side rendering for hero content and A/B testing of destination card layouts. Analytics dashboards will track which cities receive the most clicks, informing content strategy.

``` This post covers the infrastructure backbone without exposing credentials or sensitive details. It's written for engineers who need to understand the architecture decisions and can reference the exact file paths and resource IDs if they need to maintain or extend the system.