7. Real-World Case Study: Building an Image Acceleration Solution from Scratch
7.1 Business Scenario
Imagine you're the technical lead for an image-sharing community facing these challenges:
- User uploads: 1 million images uploaded daily (average 2MB each)
- User access: 50 million image view requests per day
- Access distribution: Users across the country, with some overseas access
- Performance requirement: Image load time < 500ms
- Budget: Try to keep it under 50,000 CNY/month
7.2 Architecture Design
┌──────────────────────────────────────┐
│ User Upload Flow │
└──────────────────────────────────────┘
User Browser Backend Service Object Storage
│ │ │
│ 1. Request upload credentials │ │
│───────────────────────────────────────────>│ │
│ │ │
│ │ 2. Request STS temp credentials│
│ │──────────────────────────────>│
│ │ │
│ │ 3. Return STS credentials │
│ │<──────────────────────────────│
│ │ │
│ 4. Return upload credentials (with STS) │ │
│<───────────────────────────────────────────│ │
│ │ │
│ 5. Direct file upload (using STS signature)│ │
│──────────────────────────────────────────────────────────────────────────>│
│ │ │
│ 6. Return upload result (URL, ETag, etc.) │ │
│<──────────────────────────────────────────────────────────────────────────│
│ │ │
│ 7. Notify backend upload complete (save to DB)│ │
│───────────────────────────────────────────>│ │
┌──────────────────────────────────────┐
│ User Access Flow │
└──────────────────────────────────────┘
User Browser DNS Resolution CDN Node Object Storage (Origin)
│ │ │ │
│ 1. Request image URL │ │ │
│────────────────────────────────────────────────>│ │
│ │ │ │
│ │ 2. DNS query │ │
│ │───────────────────────>│ │
│ │ │ │
│ │ 3. Return optimal node IP│ │
│ │<───────────────────────│ │
│ │ │ │
│ 4. Connect to CDN node │ │ │
│────────────────────────────────────────────────>│ │
│ │ │ │
│ │ 5. Check cache │ │
│ │ ├─ Hit? Return directly │
│ │ └─ Miss? Continue │
│ │ │ │
│ │ │ 6. Origin fetch │
│ │ │───────────────────────>│
│ │ │ │
│ │ │ 7. Return file │
│ │ │<───────────────────────│
│ │ │ │
│ │ 8. Cache and respond │ │
│<────────────────────────────────────────────────│ │7.3 Key Configuration Details
Object Storage Configuration
Bucket Planning:
Bucket: myapp-images-prod
├─ Directory structure:
│ ├─ uploads/ # Original images uploaded by users
│ │ ├─ 2024/01/15/user123-abc.jpg
│ │ └─ 2024/01/15/user456-def.png
│ ├─ thumbnails/ # Thumbnails
│ │ ├─ small/ # 100×100
│ │ ├─ medium/ # 400×300
│ │ └─ large/ # 800×600
│ └─ processed/ # Processed images (watermarked, etc.)
│
├─ Access permissions:
│ ├─ Original images directory: Private (requires signed access)
│ ├─ Thumbnails directory: Public read
│ └─ CORS: Allow *.myapp.com access
│
└─ Lifecycle policies:
├─ 7 days after upload: Infrequent Access storage (save 40% cost)
├─ 90 days after upload: Archive storage (save 70% cost)
└─ 3 years after upload: Auto-delete (or transfer to cheaper cold storage)CORS Configuration:
xml
<AllowedOrigin>https://myapp.com</AllowedOrigin>
<AllowedOrigin>https://www.myapp.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
<ExposeHeader>ETag</ExposeHeader>
<ExposeHeader>x-oss-request-id</ExposeHeader>
<MaxAgeSeconds>3600</MaxAgeSeconds>CDN Acceleration Configuration
Cache Strategy Configuration:
Global default rules:
├─ Cache key: URL path + keep w, h, format query params
├─ Default TTL: 7 days
└─ Origin HOST: Auto-follow
By file type:
├─ *.html:
│ ├─ TTL: 5 minutes
│ └─ Prefer memory cache reads
│
├─ *.js, *.css:
│ ├─ TTL: 1 year
│ └─ Ignore query params (since filenames have hashes)
│
├─ *.jpg, *.png, *.gif, *.webp:
│ ├─ TTL: 30 days
│ ├─ Keep query params (w, h, format for dynamic resizing)
│ └─ Enable automatic image compression optimization
│
└─ /api/*:
├─ TTL: 0 (no cache)
└─ Direct origin fetchHTTPS Optimization Configuration:
Certificate configuration:
├─ Certificate type: Wildcard certificate *.myapp.com
├─ Deployment method: Upload via CDN console, auto-renewal
└─ Backup certificate: EV certificate for main domain (shows green address bar)
TLS configuration:
├─ Minimum TLS version: 1.2 (balance compatibility and security)
├─ Maximum TLS version: 1.3
├─ Cipher suites: Only enable strong cipher suites
├─ OCSP Stapling: Enabled
├─ TLS Session Resumption: Enable Session Ticket
└─ HSTS: Enabled (max-age=31536000)
HTTP/2 and HTTP/3:
├─ HTTP/2: Enabled (multiplexing, header compression)
├─ HTTP/2 Server Push: Enable as needed (Preload recommended as alternative)
└─ HTTP/3 (QUIC): Enabled (experimental feature, gradual rollout)7.4 Cost Control Strategies
Cost Breakdown Analysis
Monthly CDN + Object Storage cost breakdown:
CDN portion:
├─ Downstream traffic cost (major, ~60%)
│ ├─ China mainland: 0.15-0.30 CNY/GB
│ ├─ Asia-Pacific: 0.40-0.80 CNY/GB
│ └─ Europe & Americas: 0.30-0.60 CNY/GB
│
├─ Request count cost (minor, ~5%)
│ ├─ HTTP: 0.01-0.05 CNY per 10,000 requests
│ └─ HTTPS: 0.05-0.15 CNY per 10,000 requests (TLS handshake consumes resources)
│
├─ Peak bandwidth cost (optional billing method)
│ └─ 95th percentile billing: Suitable for highly fluctuating traffic
│
└─ Value-added feature costs (~5%)
├─ HTTPS certificate management
├─ WAF protection
├─ Real-time log push
└─ Edge scripts/functions
Object Storage portion:
├─ Storage capacity cost (~15%)
│ ├─ Standard storage: 0.12-0.15 CNY/GB/month
│ ├─ Infrequent Access storage: 0.08-0.10 CNY/GB/month
│ └─ Archive storage: 0.03-0.05 CNY/GB/month
│
├─ Request costs (~5%)
│ ├─ PUT: 0.01-0.05 CNY per 10,000 requests
│ └─ GET: 0.005-0.01 CNY per 10,000 requests
│
├─ Data retrieval costs (Infrequent Access/Archive)
│ └─ Early deletion or retrieval incurs additional fees
│
└─ Origin fetch egress traffic cost (~10%)
└─ Traffic cost for CDN origin fetch to object storageCost-Saving Tips in Practice
Tip 1: Storage Tiering with Automatic Lifecycle Management
yaml
# Lifecycle rule example
rules:
- id: image-lifecycle
prefix: uploads/
transitions:
# After 7 days, transition to IA storage, save 30% cost
- days: 7
storageClass: IA
# After 90 days, transition to Archive storage, save 70% cost
- days: 90
storageClass: Archive
# Auto-delete after 3 years
expiration:
days: 1095Tip 2: Improve CDN Hit Ratio, Reduce Origin Fetch
What does improving hit ratio from 90% to 95% mean?
Assuming:
- Daily traffic: 10 TB
- Hit ratio 90%: 1 TB origin fetch
- Hit ratio 95%: 0.5 TB origin fetch
Origin fetch savings: 0.5 TB/day × 0.15 CNY/GB × 30 days = 2,250 CNY/monthTip 3: Compression and Format Optimization
Image optimization plan:
├─ Store original images in object storage (not directly exposed)
├─ Enable CDN image processing:
│ ├─ Auto format conversion: JPEG → WebP/AVIF (save 30-50%)
│ ├─ Auto quality compression: Visually lossless compression (save 20-40%)
│ ├─ Responsive sizing: Return appropriate size based on device
│ └─ Progressive loading: Blur to sharp
└─ Result: Bandwidth cost reduced by 50-70%Tip 4: Bandwidth Peak Cap and Alerts
yaml
# Bandwidth cap configuration
bandwidth_cap:
daily_limit: 500 # Mbps, auto-disable CDN if daily peak exceeds
monthly_limit: 10000 # GB, disable if monthly traffic exceeds
# Alert thresholds
alerts:
- threshold: 70% # Alert at 70%
channels: [sms, email]
- threshold: 90% # Call at 90%
channels: [phone]