CDN Setup

Learn how to configure and optimize your Content Delivery Network (CDN) for improved performance, security, and global content delivery.

Prerequisites

Active Symbiosis.host account
Basic understanding of CDNs
Domain name configuration access
Application deployed on Symbiosis.host

CDN Overview

Visual representation of CDN architecture and content distribution.

Configure CDN Settings

Set up your CDN configuration in the Symbiosis.host dashboard:

// CDN configuration
const cdnConfig = {
  domains: ['your-app.symbiosis.host'],
  origins: [{
    domain: 'origin.your-app.com',
    protocol: 'https',
    port: 443
  }],
  caching: {
    ttl: 3600,
    patterns: [
      '*.jpg',
      '*.png',
      '*.css',
      '*.js'
    ]
  }
}

Asset Optimization

Configure asset optimization and caching rules:

// Cache control headers
app.use((req, res, next) => {
  // Static assets
  if (req.url.match(/\.(jpg|jpeg|png|gif|css|js)$/)) {
    res.setHeader('Cache-Control', 'public, max-age=31536000');
    res.setHeader('CDN-Cache-Control', 'public, max-age=31536000');
  }
  
  // Dynamic content
  else {
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('CDN-Cache-Control', 'no-cache');
  }
  next();
});

// Image optimization
const imageConfig = {
  formats: ['webp', 'avif'],
  sizes: [640, 750, 828, 1080, 1200],
  quality: 80,
  cdn: {
    domain: 'cdn.your-app.com',
    path: '/images'
  }
}

Security Configuration

Implement security measures for your CDN:

// Security headers
app.use((req, res, next) => {
  // CORS for CDN
  res.setHeader('Access-Control-Allow-Origin', 'https://cdn.your-app.com');
  
  // Content Security Policy
  res.setHeader('Content-Security-Policy', `
    default-src 'self';
    img-src 'self' https://cdn.your-app.com;
    script-src 'self' https://cdn.your-app.com;
    style-src 'self' https://cdn.your-app.com;
  `);
  
  // Other security headers
  res.setHeader('X-Content-Type-Options', 'nosniff');
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
  
  next();
});

Performance Monitoring

Set up CDN performance monitoring:

// Monitor CDN metrics
const cdnMetrics = {
  async collectMetrics() {
    const metrics = {
      hitRate: await this.calculateHitRate(),
      bandwidth: await this.getBandwidthUsage(),
      latency: await this.getLatencyMetrics(),
      errorRate: await this.getErrorRate()
    };
    
    await this.storeMetrics(metrics);
    return metrics;
  },
  
  async calculateHitRate() {
    const stats = await getCDNStats();
    return (stats.hits / (stats.hits + stats.misses)) * 100;
  },
  
  async getBandwidthUsage() {
    const usage = await getCDNBandwidth();
    return {
      total: usage.total,
      peak: usage.peak,
      average: usage.average
    };
  }
}

Best Practices

Cache Strategy

Optimize caching for performance:

Set appropriate TTLs
Use cache invalidation
Configure cache patterns
Monitor hit rates

Security

Secure your CDN setup:

Enable HTTPS
Configure CORS
Set security headers
Access controls

Performance

Maximize CDN performance:

Asset optimization
Compression
Load balancing
Edge locations

Common Issues

Cache Issues

Common caching problems:

Cache invalidation delays
Stale content
Cache miss rates
Purge failures

Performance Issues

Performance-related challenges:

High latency
Origin server errors
SSL/TLS issues
Routing problems

Next Steps

Now that you've set up your CDN, explore these related topics: