CDN para Assets Estáticos - C-Suite
Este documento descreve a estratégia e configuração de CDN para servir assets estáticos do ecossistema C-Suite.
Visão Geral
Usar CDN (Content Delivery Network) para servir assets estáticos (CSS, JavaScript, imagens) reduz carga nos servidores e melhora performance para usuários.
Benefícios
- ✅ Redução de carga nos servidores
- ✅ Melhor performance global
- ✅ Cache distribuído
- ✅ Redução de latência
- ✅ Economia de bandwidth
Opções de CDN
1. CloudFront (AWS)
Vantagens:
- Integração nativa com S3
- SSL/TLS automático
- Cache configurável
- Integração com AWS
Configuração:
# cloudfront.yml
Resources:
StaticAssetsDistribution:
Type: AWS::CloudFront::Distribution
Properties:
DistributionConfig:
Origins:
- DomainName: s3-bucket.s3.amazonaws.com
Id: S3Origin
S3OriginConfig:
OriginAccessIdentity: ""
Enabled: true
DefaultCacheBehavior:
TargetOriginId: S3Origin
ViewerProtocolPolicy: redirect-to-https
AllowedMethods:
- GET
- HEAD
CachedMethods:
- GET
- HEAD
ForwardedValues:
QueryString: false
Cookies:
Forward: none
MinTTL: 86400
DefaultTTL: 86400
MaxTTL: 31536000
2. Cloudflare
Vantagens:
- Gratuito para uso básico
- Fácil configuração
- DDoS protection
- Analytics
Configuração:
- Criar conta Cloudflare
- Adicionar domínio
- Configurar DNS
- Ativar CDN
- Configurar cache rules
3. Traefik com Cache
Vantagens:
- Já está em uso
- Sem custo adicional
- Controle total
Configuração:
labels:
- "traefik.http.middlewares.static-cache.headers.customResponseHeaders.Cache-Control=max-age=31536000"
- "traefik.http.routers.static.middlewares=static-cache"
Estratégia de Implementação
Fase 1: Assets Estáticos Básicos
- Identificar assets:
- CSS files
- JavaScript files
- Images
-
Fonts
-
Configurar S3 bucket:
bash aws s3 mb s3://csuite-static-assets aws s3 sync ./static s3://csuite-static-assets/static/ -
Configurar CloudFront:
- Criar distribution
- Configurar origin (S3)
- Configurar cache behavior
Fase 2: Versionamento de Assets
# Adicionar hash ao nome do arquivo
def get_asset_url(filename: str) -> str:
hash = hashlib.md5(open(filename, 'rb').read()).hexdigest()[:8]
name, ext = os.path.splitext(filename)
return f"{name}.{hash}{ext}"
Fase 3: Integração com Apps
# Em templates Jinja2
<link rel="stylesheet" href="{{ cdn_url }}/static/css/style.css">
<script src="{{ cdn_url }}/static/js/main.js"></script>
Configuração por Ambiente
Development
CDN_ENABLED=false
CDN_URL=http://localhost:8000
Staging
CDN_ENABLED=true
CDN_URL=https://cdn-staging.example.com
Production
CDN_ENABLED=true
CDN_URL=https://cdn.example.com
Cache Headers
Assets Estáticos
Cache-Control: public, max-age=31536000, immutable
Assets Dinâmicos
Cache-Control: public, max-age=3600
Monitoramento
Métricas
- Cache hit rate
- Bandwidth economizado
- Latência reduzida
- Erros de CDN
Alertas
- Cache hit rate < 80%
- Erros de CDN > 1%
- Latência aumentada
Best Practices
- Versionamento: Use hash nos nomes de arquivos
- Compressão: Habilite gzip/brotli
- HTTPS: Sempre use HTTPS
- Cache: Configure TTL apropriado
- Fallback: Tenha fallback se CDN falhar