TC Energy Concept Website
Static logistics company concept site on S3 and CloudFront with custom domain, edge delivery, and WAF protection.
Distribution
Global (400+ PoPs)
TLS
ACM-managed, auto-renew
Origin
S3 + OAC (no public bucket)
Build
React + Vite, ~120 kB gzip
Product Walkthrough
Overview
A fully static concept website for a logistics company. Content is delivered globally through Amazon CloudFront with an S3 origin, custom domain on Route 53, and TLS managed by AWS Certificate Manager. No servers. No runtime compute. HTML, CSS, and JavaScript are served from 400+ Points of Presence worldwide.
Why this architecture and when to use it
Static site delivery is the most operationally efficient web architecture on AWS. Serving pre-built assets from S3 through CloudFront removes the application runtime entirely. There is no attack surface to patch and no idle compute cost.
This architecture fits any workload where content is known at build time: marketing sites, documentation, concept demos, and SaaS dashboards that fetch data from APIs at runtime.
Production use cases that follow this pattern include:
- • Corporate marketing sites and brand concepts
- • Portfolio and documentation platforms
- • SaaS product landing pages with API-driven interactivity
- • React, Vue, and Svelte SPAs backed by serverless APIs
Architecture
DNS resolves through Route 53 to a CloudFront distribution. WAF runs at the edge before CloudFront processes the request. CloudFront checks its cache. On a miss it fetches from the S3 origin using Origin Access Control. ACM provides the TLS certificate. No public bucket policy is required.
Architecture Diagram · Official AWS Icons
Detailed architecture explanation
Route 53 hosts the A/AAAA alias records pointing to the CloudFront distribution. Alias records incur no per-query charge and support apex domains without www.
AWS WAF is attached at the CloudFront edge, not at the origin. Malicious traffic is blocked before it consumes bandwidth or touches the S3 bucket. Rules cover rate limiting, geo-blocking, and managed rule groups for common web exploits.
CloudFront caches responses at the nearest PoP. Default TTLs for hashed Vite asset filenames are set to 1 year. index.html uses a short TTL of 60 seconds so deploys propagate quickly.
S3 Origin with OAC: Origin Access Control replaces the legacy OAI pattern. The bucket has no public access enabled. All reads are signed with SigV4 by CloudFront automatically. The bucket policy allows only the specific CloudFront distribution ARN.
ACM certificate is provisioned in us-east-1, required for CloudFront, and validated via DNS using a Route 53 CNAME record. ACM auto-renews 60 days before expiry.
Architecture icons: aws.amazon.com/architecture/icons
Request Flow
DNS Resolution: Route 53
Browser queries the domain. Route 53 returns the CloudFront distribution's anycast IP via an Alias A record. No TTL charge for alias records. AWS DocsRoute 53 to CloudFront routing
TLS Handshake: ACM Certificate
CloudFront presents the ACM-issued certificate for the custom domain. TLS 1.2+ is enforced. TLS 1.0 and 1.1 are disabled. Perfect Forward Secrecy is enabled by default on all CloudFront distributions. AWS DocsCloudFront supported protocols
WAF Evaluation: Edge Rules
Before CloudFront processes the request, WAF evaluates it against the rule group. Blocked requests receive a 403 and never reach origin. Allowed requests proceed to cache evaluation. AWS DocsWAF with CloudFront
Cache Check: CloudFront Edge
CloudFront checks the PoP cache. A cache hit is served immediately with zero origin latency. On a cache miss, CloudFront forwards the request to S3 using a SigV4-signed request via OAC. AWS DocsImproving cache hit ratio
Origin Fetch: S3 with OAC
CloudFront fetches the object from the S3 bucket using Origin Access Control. The bucket policy denies all other principals. S3 returns the asset. CloudFront caches it and serves the response. AWS DocsRestricting S3 access with OAC
Data Model: S3 Object Layout
Static sites have no database, but the S3 key structure and cache-control headers determine cache efficiency and deploy propagation speed.
s3://tc-energy-concept/
├── index.html Cache-Control: max-age=60, must-revalidate
├── assets/
│ ├── index-[hash].js Cache-Control: max-age=31536000, immutable
│ ├── index-[hash].css Cache-Control: max-age=31536000, immutable
│ └── images/[name]-[hash].webp Cache-Control: max-age=31536000, immutable
└── public/
├── favicon.ico Cache-Control: max-age=86400
└── robots.txt Cache-Control: max-age=3600Hashed filenames: Vite appends a content hash to every JS and CSS file. Cache-busting is automatic. Deploying new code produces new filenames. Old files remain cached until their TTL expires.
index.html with short TTL: the entry point is un-hashed and uses a short max-age of 60 seconds. Browsers re-validate after a deploy without requiring a manual CloudFront invalidation on every release.
Monitoring and Alerting
CloudFront Standard Logs to S3
Access logs are delivered to a separate S3 bucket with a 90-day lifecycle policy. Logs capture viewer IP, edge PoP, cache status, bytes transferred, and response time.
CloudWatch Metrics: Real-Time Dashboard
CloudFront publishes to CloudWatch in us-east-1: Requests, BytesDownloaded, 4xxErrorRate, 5xxErrorRate, CacheHitRate. Alarms fire on 5xxErrorRate above 1% or CacheHitRate below 80%.
WAF Sampled Requests
AWS WAF logs sampled blocked and allowed requests. Combined with CloudWatch WAF metrics, this surfaces bot traffic patterns and IP-based abuse without additional tooling.
Route 53 Health Checks
Health checks on the CloudFront endpoint confirm the distribution is reachable. Paired with SNS, these trigger alerts if the site becomes unreachable from any AWS region.
Security Considerations
S3 Block Public Access with OAC
The origin bucket has Block Public Access enabled on all four settings. No bucket policy grants s3:GetObject to *. Only the CloudFront distribution's OAC principal, identified by its ARN, has GetObject permission. This prevents attackers from accessing origin assets directly and bypassing WAF and CloudFront controls.
AWS DocsS3 Block Public AccessHTTPS-Only Viewer Policy
The CloudFront distribution's viewer protocol policy is set to Redirect HTTP to HTTPS. HTTP requests receive a 301 redirect to the HTTPS URL. No plaintext traffic is served.
AWS DocsRequiring HTTPS with CloudFrontSecurity Headers via CloudFront Response Headers Policy
A managed Response Headers Policy applies Strict-Transport-Security, X-Content-Type-Options: nosniff, X-Frame-Options: DENY, and a Content-Security-Policy restricting script sources to self. These are enforced at the edge on every response.
AWS DocsCloudFront response headers policiesAWS WAF Managed Rule Groups
The WAF Web ACL includes AWSManagedRulesCommonRuleSet for XSS and SQLi, AWSManagedRulesAmazonIpReputationList for known malicious IPs, and a custom rate-based rule limiting requests per IP per 5-minute window.
AWS DocsAWS Managed Rule GroupsACM Certificate Lifecycle
ACM certificates are validated via DNS CNAME records in Route 53. ACM auto-renews 60 days before expiry. If renewal fails, CloudFront continues serving on the existing valid certificate and AWS sends SNS alert notifications.
AWS DocsACM DNS-validated renewalScaling Strategy
CloudFront and S3 scale automatically with zero configuration. There is no application tier to scale. The key design considerations are:
CloudFront Horizontal Scale
CloudFront's 400+ PoPs share the request load across geographic regions automatically. No auto-scaling groups, no capacity planning, no warm-up. Traffic in Tokyo hits Tokyo PoPs. European traffic stays in European PoPs.
S3 Request Rate
Amazon S3 automatically scales to thousands of requests per second per prefix. For static sites, the CDN cache absorbs most requests. S3 only serves cache misses and invalidation re-fetches.
Cache Hit Ratio
High cache hit rate is the scaling lever for this architecture. It is achieved through consistent URL structure, long TTLs on hashed assets, and Gzip plus Brotli compression on the CloudFront distribution.
WAF Capacity Units
AWS WAF scales automatically up to 1,500 WCUs per Web ACL. For a static site, typical rule consumption is well under 100 WCUs. There is no manual WAF scaling.
Cost Notes
This is one of the cheapest web architectures on AWS. The dominant cost driver is CloudFront data transfer. Compute costs are effectively zero.
| Service | Free Tier / Baseline | Cost Driver |
|---|---|---|
| S3 Storage | 5 GB free / month | GB stored + PUT requests |
| S3 Requests | 20,000 GET free / month | Requests above free tier |
| CloudFront | 1 TB transfer free / month | Data out to internet ($/GB) |
| Route 53 | $0.50 / hosted zone / month | DNS queries above 1B/month |
| ACM | Free for CloudFront certs | No cost for public certificates |
| WAF | $5 / Web ACL / month | + $1 per 1M requests |
A typical concept site with moderate traffic (50,000 visits per month, ~2 MB page weight) costs under $3/month excluding WAF. Enabling WAF adds ~$5/month base. AWS DocsCloudFront pricing · AWS DocsS3 pricing
AWS Well-Architected Framework
AWS DocsAWS Well-Architected Framework
Operational Excellence
Zero-server operations. Deploy is a CI/CD step.
The entire deployment lifecycle is: build, sync to S3, invalidate CloudFront cache. No server patches, no runtime configuration drift, no on-call for infrastructure. Observability comes from CloudFront metrics and WAF logs out of the box.
AWS DocsWell-Architected: Operational ExcellenceSecurity
Defence in depth: WAF, CloudFront HTTPS, OAC, and private S3.
Malicious traffic is rejected at the edge by WAF before consuming any resources. HTTPS is enforced end-to-end. The S3 origin is completely private and not accessible from any IP except CloudFront's OAC. Security headers prevent XSS, clickjacking, and MIME-sniffing attacks.
AWS DocsWell-Architected: SecurityReliability
S3 eleven-nines durability. CloudFront multi-PoP redundancy.
Amazon S3 is designed for 99.999999999% object durability by replicating data across a minimum of three AZs. CloudFront serves from hundreds of PoPs. A single PoP failure is transparent to users. There is no single point of failure in this architecture.
AWS DocsWell-Architected: ReliabilityPerformance Efficiency
Sub-50ms response times from edge cache at global PoPs.
All static assets are served from the PoP nearest to the user. Brotli compression reduces payload size by ~30% over Gzip. Vite's code-splitting ensures only the JS needed for the current route is loaded. Hashed filenames enable aggressive long-term caching.
AWS DocsWell-Architected: Performance EfficiencyCost Optimisation
Pay per request. Zero idle compute cost.
S3 and CloudFront are pure consumption-based services. There are no reserved instances, no minimum fees beyond the $0.50/month Route 53 hosted zone and $5/month WAF Web ACL, and no cost when the site receives no traffic.
AWS DocsWell-Architected: Cost OptimisationSustainability
Shared infrastructure means per-request carbon footprint is near-zero.
Serverless, edge-cached workloads maximise hardware utilisation at AWS data centres. No always-on instances means no idle power consumption. CloudFront's high cache-hit rate reduces origin fetches and the energy required to serve them.
AWS DocsWell-Architected: SustainabilityFuture Improvements
CloudFront Functions: Edge Redirects
Move URL normalisation (trailing slash, index.html rewriting, locale detection) from the Vite build into CloudFront Functions running at the edge. This removes SPA hash routing fallbacks and enables cleaner URL structures.
Lambda@Edge: Personalisation
For content that needs to vary by geography or device type, Lambda@Edge can inspect the CloudFront request and modify the origin path. This serves different asset variants without additional origin requests for static content.
S3 Replication: Multi-Region Redundancy
Cross-Region Replication to a second bucket in a different AWS region provides a warm standby origin. Combined with CloudFront origin failover groups, this enables automatic failover if the primary S3 bucket becomes unavailable.
GitHub Actions CI/CD Pipeline
Automated deployments via OIDC federation between GitHub Actions and an IAM role. No long-lived credentials. On push to main: npm run build, aws s3 sync, then cloudfront create-invalidation. Deploy time under 60 seconds.