/setup-cdn-optimization

Setup CDN Optimization

Configure CDN for optimal delivery

Instructions

1. **CDN Strategy and Provider Selection**

• Analyze application traffic patterns and global user distribution
• Evaluate CDN providers (CloudFlare, AWS CloudFront, Fastly, KeyCDN)
• Assess content types and caching requirements
• Plan CDN architecture and edge location strategy
• Define performance and cost optimization goals

2. **CDN Configuration and Setup**

• Configure CDN with optimal settings:

**CloudFlare Configuration:**

   // Cloudflare Page Rules via API
   const cloudflare = require('cloudflare');
   const cf = new cloudflare({
     email: process.env.CLOUDFLARE_EMAIL,
     key: process.env.CLOUDFLARE_API_KEY
   });

   const pageRules = [
     {
       targets: [{ target: 'url', constraint: { operator: 'matches', value: '*/static/*' }}],
       actions: [
         { id: 'cache_level', value: 'cache_everything' },
         { id: 'edge_cache_ttl', value: 31536000 }, // 1 year
         { id: 'browser_cache_ttl', value: 31536000 }
       ]
     },
     {
       targets: [{ target: 'url', constraint: { operator: 'matches', value: '*/api/*' }}],
       actions: [
         { id: 'cache_level', value: 'bypass' },
         { id: 'compression', value: 'gzip' }
       ]
     }
   ];

   async function setupCDNRules() {
     for (const rule of pageRules) {
       await cf.zones.pagerules.add(process.env.CLOUDFLARE_ZONE_ID, rule);
     }
   }

**AWS CloudFront Distribution:**

   # cloudformation-cdn.yaml
   AWSTemplateFormatVersion: '2010-09-09'
   Resources:
     CloudFrontDistribution:
       Type: AWS::CloudFront::Distribution
       Properties:
         DistributionConfig:
           Origins:
             - Id: S3Origin
               DomainName: !GetAtt S3Bucket.DomainName
               S3OriginConfig:
                 OriginAccessIdentity: !Sub 'origin-access-identity/cloudfront/${OAI}'
             - Id: APIOrigin
               DomainName: api.example.com
               CustomOriginConfig:
                 HTTPPort: 443
                 OriginProtocolPolicy: https-only
           
           DefaultCacheBehavior:
             TargetOriginId: S3Origin
             ViewerProtocolPolicy: redirect-to-https
             CachePolicyId: 4135ea2d-6df8-44a3-9df3-4b5a84be39ad # Managed-CachingOptimized
             OriginRequestPolicyId: 88a5eaf4-2fd4-4709-b370-b4c650ea3fcf # Managed-CORS-S3Origin
             
           CacheBehaviors:
             - PathPattern: '/api/*'
               TargetOriginId: APIOrigin
               ViewerProtocolPolicy: https-only
               CachePolicyId: 4135ea2d-6df8-44a3-9df3-4b5a84be39ad
               TTL:
                 DefaultTTL: 0
                 MaxTTL: 0
               Compress: true
             
             - PathPattern: '/static/*'
               TargetOriginId: S3Origin
               ViewerProtocolPolicy: https-only
               CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6 # Managed-CachingOptimizedForUncompressedObjects
               TTL:
                 DefaultTTL: 86400
                 MaxTTL: 31536000

3. **Static Asset Optimization**

• Optimize assets for CDN delivery:

**Asset Build Process:**

   // webpack.config.js - CDN optimization
   const path = require('path');
   const { CleanWebpackPlugin } = require('clean-webpack-plugin');
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');

   module.exports = {
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: '[name].[contenthash].js',
       publicPath: process.env.CDN_URL || '/',
       assetModuleFilename: 'assets/[name].[contenthash][ext]',
     },
     
     optimization: {
       splitChunks: {
         chunks: 'all',
         cacheGroups: {
           vendor: {
             test: /[\\/]node_modules[\\/]/,
             name: 'vendors',
             filename: 'vendors.[contenthash].js',
           },
         },
       },
     },
     
     plugins: [
       new CleanWebpackPlugin(),
       new MiniCssExtractPlugin({
         filename: 'css/[name].[contenthash].css',
       }),
     ],
     
     module: {
       rules: [
         {
           test: /\.(png|jpe?g|gif|svg)$/i,
           type: 'asset/resource',
           generator: {
             filename: 'images/[name].[contenthash][ext]',
           },
           use: [
             {
               loader: 'image-webpack-loader',
               options: {
                 mozjpeg: { progressive: true, quality: 80 },
                 optipng: { enabled: false },
                 pngquant: { quality: [0.6, 0.8] },
                 webp: { quality: 80 },
               },
             },
           ],
         },
       ],
     },
   };

**Next.js CDN Configuration:**

   // next.config.js
   const withOptimizedImages = require('next-optimized-images');

   module.exports = withOptimizedImages({
     assetPrefix: process.env.CDN_URL || '',
     
     images: {
       domains: ['cdn.example.com'],
       formats: ['image/webp', 'image/avif'],
       deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
       imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
       minimumCacheTTL: 31536000, // 1 year
     },
     
     async headers() {
       return [
         {
           source: '/static/(.*)',
           headers: [
             {
               key: 'Cache-Control',
               value: 'public, max-age=31536000, immutable',
             },
           ],
         },
       ];
     },
   });

4. **Compression and Optimization**

• Configure optimal compression settings:

**Gzip/Brotli Compression:**

   // Express.js compression middleware
   const compression = require('compression');
   const express = require('express');
   const app = express();

   // Advanced compression configuration
   app.use(compression({
     level: 6, // Compress