Cloudflare: Guia Completo da Plataforma Edge Computing Mais Rápida

Cloudflare começou como uma Content Delivery Network (CDN), mas evoluiu para se tornar muito mais: uma plataforma global de edge computing que alimenta websites, APIs, aplicações serverless e muito mais. Com presença em mais de 310 cidades em 120 países, Cloudflare processa mais de 20% do tráfego web global.

O que é Cloudflare?

Cloudflare é uma plataforma de infraestrutura de internet que oferece CDN, segurança, otimização de performance, DNS, edge computing e muito mais. Sua rede global distribui conteúdo e executa código próximo aos usuários finais, resultando em latência mínima e performance máxima.

De CDN a Edge Platform

Tradicional:

Usuário → Origem (Servidor distante)

Latência alta, sem cache, sem proteção.

Com Cloudflare:

Usuário → Edge (Data center próximo) → [Cache Hit? Sim: Retorna | Não: Origem]

Latência mínima, cache inteligente, proteção DDoS, otimizações automáticas.

Por que Cloudflare?

1. Performance Global

310+ data centers distribuídos globalmente:

Usuário em São Paulo → Edge em São Paulo (2ms)
Usuário em Tokyo → Edge em Tokyo (2ms)
Usuário em London → Edge em London (2ms)

Ao invés de todos acessarem um servidor na Virgínia (150-300ms).

2. CDN Grátis

Tier gratuito inclui:

• CDN global ilimitado
• SSL/TLS grátis
• DDoS protection básico
• Analytics
• DNS gerenciado

# Adicionar site ao Cloudflare
1. Criar conta em cloudflare.com
2. Adicionar domínio
3. Mudar nameservers
4. Pronto! CDN ativo

3. Segurança Incluída

• DDoS Protection: Mitiga ataques massivos automaticamente
• WAF: Web Application Firewall bloqueio de ataques
• Bot Management: Bloqueia bots maliciosos
• Rate Limiting: Previne abuse
• SSL/TLS: Certificados grátis e renovação automática

4. Edge Computing

Execute código JavaScript globalmente com Cloudflare Workers:

// worker.js - Roda em 310+ data centers
export default {
  async fetch(request) {
    const url = new URL(request.url);
    
    // Cache API response
    if (url.pathname.startsWith('/api/')) {
      return handleAPI(request);
    }
    
    // Serve static assets
    return fetch(request);
  }
};

async function handleAPI(request) {
  const cache = caches.default;
  let response = await cache.match(request);
  
  if (!response) {
    response = await fetch(request);
    response = new Response(response.body, response);
    response.headers.set('Cache-Control', 'max-age=300');
    await cache.put(request, response.clone());
  }
  
  return response;
}

Cloudflare Workers

Serverless JavaScript/TypeScript na edge:

Hello World

export default {
  async fetch(request) {
    return new Response('Hello from Cloudflare Edge!', {
      headers: { 'content-type': 'text/plain' }
    });
  }
};

Deploy:

npm install -g wrangler
wrangler login
wrangler init meu-worker
wrangler deploy

API na Edge

import { Router } from 'itty-router';

const router = Router();

// GET /api/users
router.get('/api/users', async () => {
  const users = await fetchUsers();
  return new Response(JSON.stringify(users), {
    headers: { 'content-type': 'application/json' }
  });
});

// POST /api/users
router.post('/api/users', async (request) => {
  const data = await request.json();
  const user = await createUser(data);
  return new Response(JSON.stringify(user), {
    status: 201,
    headers: { 'content-type': 'application/json' }
  });
});

// 404
router.all('*', () => new Response('Not Found', { status: 404 }));

export default {
  fetch: router.handle
};

Manipular Requests/Responses

export default {
  async fetch(request) {
    // Modificar request
    const modifiedRequest = new Request(request, {
      headers: {
        ...request.headers,
        'X-Custom-Header': 'value'
      }
    });
    
    // Fetch origem
    const response = await fetch(modifiedRequest);
    
    // Modificar response
    const modifiedResponse = new Response(response.body, response);
    modifiedResponse.headers.set('X-Powered-By', 'Cloudflare Workers');
    modifiedResponse.headers.set('Cache-Control', 'public, max-age=3600');
    
    return modifiedResponse;
  }
};

A/B Testing

export default {
  async fetch(request) {
    const url = new URL(request.url);
    
    // 50% tráfego para versão A, 50% para B
    const version = Math.random() < 0.5 ? 'A' : 'B';
    
    if (version === 'A') {
      url.hostname = 'version-a.example.com';
    } else {
      url.hostname = 'version-b.example.com';
    }
    
    const response = await fetch(url);
    
    // Adiciona header indicando versão
    const modified = new Response(response.body, response);
    modified.headers.set('X-Version', version);
    
    return modified;
  }
};

Geo-Routing

export default {
  async fetch(request) {
    const country = request.cf.country;
    
    // Redirecionar baseado em país
    const regionOrigins = {
      'BR': 'https://br.example.com',
      'US': 'https://us.example.com',
      'JP': 'https://jp.example.com'
    };
    
    const origin = regionOrigins[country] || 'https://global.example.com';
    
    return fetch(new Request(origin + request.url.pathname, request));
  }
};

Cloudflare Pages

Deploy de sites estáticos com Git integration:

# wrangler.toml
name = "meu-site"
pages_build_output_dir = "dist"

[build]
command = "npm run build"

# Deploy manual
wrangler pages deploy dist

# Deploy automático via Git
# Connect repository no Cloudflare dashboard
# Push para main → auto-deploy

Next.js na Edge

// next.config.js
module.exports = {
  output: 'export', // Static export
  images: {
    unoptimized: true
  }
};

npm run build
wrangler pages deploy out

Framework Support

Cloudflare Pages suporta:

• Next.js (SSG e Edge Runtime)
• React (via Vite, Create React App)
• Vue (Vite, Nuxt)
• Svelte (SvelteKit)
• Astro
• Hugo, Jekyll (SSG)

Cloudflare KV

Key-Value storage na edge:

export default {
  async fetch(request, env) {
    // Ler do KV
    const value = await env.MY_KV.get('chave');
    
    if (!value) {
      // Escrever no KV
      await env.MY_KV.put('chave', 'valor', {
        expirationTtl: 3600  // 1 hora
      });
    }
    
    return new Response(value);
  }
};

Use Cases KV

// Cache de API externa
async function getCachedData(key, fetcher) {
  let data = await env.CACHE_KV.get(key, 'json');
  
  if (!data) {
    data = await fetcher();
    await env.CACHE_KV.put(key, JSON.stringify(data), {
      expirationTtl: 300  // 5 minutos
    });
  }
  
  return data;
}

// Feature flags
const featureEnabled = await env.FLAGS_KV.get('feature_x') === 'true';

// User sessions
const session = await env.SESSIONS_KV.get(`session:${sessionId}`, 'json');

// Rate limiting
const requests = await env.RATE_LIMIT_KV.get(ip) || 0;
if (requests > 100) {
  return new Response('Too many requests', { status: 429 });
}
await env.RATE_LIMIT_KV.put(ip, requests + 1, { expirationTtl: 60 });

Cloudflare D1

SQLite serverless na edge:

export default {
  async fetch(request, env) {
    // Query D1 database
    const { results } = await env.DB.prepare(
      'SELECT * FROM usuarios WHERE email = ?'
    ).bind('user@example.com').all();
    
    return Response.json(results);
  }
};

Migrations

-- schema.sql
CREATE TABLE usuarios (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  nome TEXT NOT NULL,
  email TEXT UNIQUE NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

CREATE INDEX idx_usuarios_email ON usuarios(email);

wrangler d1 execute DB --file=schema.sql

CRUD Operations

// Create
await env.DB.prepare(
  'INSERT INTO usuarios (nome, email) VALUES (?, ?)'
).bind('João', 'joao@example.com').run();

// Read
const usuarios = await env.DB.prepare(
  'SELECT * FROM usuarios WHERE nome LIKE ?'
).bind('%João%').all();

// Update
await env.DB.prepare(
  'UPDATE usuarios SET email = ? WHERE id = ?'
).bind('novo@example.com', 123).run();

// Delete
await env.DB.prepare(
  'DELETE FROM usuarios WHERE id = ?'
).bind(123).run();

// Transaction
const info = await env.DB.batch([
  env.DB.prepare('INSERT INTO usuarios (nome, email) VALUES (?, ?)').bind('A', 'a@x.com'),
  env.DB.prepare('INSERT INTO usuarios (nome, email) VALUES (?, ?)').bind('B', 'b@x.com'),
]);

Cloudflare R2

Object storage (S3-compatible):

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const key = url.pathname.slice(1);
    
    // Upload
    if (request.method === 'PUT') {
      await env.MY_BUCKET.put(key, request.body, {
        httpMetadata: {
          contentType: request.headers.get('content-type')
        }
      });
      return new Response('Uploaded', { status: 201 });
    }
    
    // Download
    const object = await env.MY_BUCKET.get(key);
    
    if (!object) {
      return new Response('Not Found', { status: 404 });
    }
    
    return new Response(object.body, {
      headers: {
        'content-type': object.httpMetadata.contentType
      }
    });
  }
};

R2 vs S3

Cloudflare R2:

• Zero egress fees (bandwidth grátis)
• S3-compatible API
• Acesso via Workers (baixíssima latência)

AWS S3:

• Mais mature features
• Egress caro ($0.09/GB)

Cloudflare Stream

Vídeo hosting e streaming:

// Upload vídeo
const formData = new FormData();
formData.append('file', videoFile);

const response = await fetch(
  `https://api.cloudflare.com/client/v4/accounts/${accountId}/stream`,
  {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${apiToken}`
    },
    body: formData
  }
);

const { result } = await response.json();
const videoId = result.uid;

<!-- Embed player -->
<stream src="${videoId}" controls></stream>
<script data-cfasync="false" defer type="text/javascript" 
        src="https://embed.cloudflare.com/embed/r4xu.fla9.latest.js">
</script>

Cloudflare Images

Image optimization e transformação:

<!-- Original -->
https://imagedelivery.net/account-hash/image-id/public

<!-- Resized -->
https://imagedelivery.net/account-hash/image-id/w=800,h=600

<!-- Variant -->
https://imagedelivery.net/account-hash/image-id/thumbnail

Transformações on-the-fly sem pré-processar.

Cloudflare Analytics

Métricas detalhadas sem impacto em performance:

• Web Analytics: Page views, visitors, geography
• Worker Analytics: Requests, errors, CPU time
• Performance: Core Web Vitals, LCP, FID, CLS
• Security: Threats blocked, bot traffic

Zero impact - não adiciona JS ao site.

Cloudflare DNS

DNS mais rápido do mundo (1.1.1.1):

# Dig query
dig @1.1.1.1 example.com

# Query time: ~14ms (média global)

Features:

• DNSSEC: Segurança adicional
• CAA Records: Controle de certificate authorities
• Proxied Records: Traffic via Cloudflare
• API Access: Automação completa

Cloudflare Tunnels

Exponha serviços locais sem abrir portas:

# Instalar cloudflared
brew install cloudflare/cloudflare/cloudflared

# Criar tunnel
cloudflared tunnel create meu-tunnel

# Configurar
# config.yml
tunnel: meu-tunnel-id
credentials-file: /path/credentials.json

ingress:
  - hostname: app.example.com
    service: http://localhost:3000
  - service: http_status:404

# Rodar
cloudflared tunnel run meu-tunnel

Acesse localhost:3000 via app.example.com sem port forwarding ou IP público.

Pricing

Free Tier:

• CDN ilimitado
• DDoS protection
• SSL grátis
• 100,000 Workers requests/dia
• 10 Pages projects

Pro ($20/mês):

• Web analytics
• Image optimization (limited)
• More Workers requests

Business ($200/mês):

• Advanced security
• PCI compliance
• More bandwidth

Enterprise (custom):

• SLA 100% uptime
• Dedicated support
• Custom contracts

Casos de Uso

Sites Estáticos: Deploy Next.js, React, Vue via Pages

APIs Serverless: Workers como backend global

Image Hosting: R2 + Images para assets otimizados

Video Platform: Stream para vídeo hosting

CDN: Cache assets estáticos globalmente

Security: WAF e DDoS protection

Edge Logic: A/B testing, redirects, authentication na edge

Cloudflare vs Alternativas

Cloudflare vs AWS CloudFront:

• Cloudflare: Mais fácil, cheaper, melhor free tier
• CloudFront: Integração AWS superior

Cloudflare vs Vercel:

• Cloudflare: Mais controle, cheaper em escala
• Vercel: Melhor DX para Next.js

Cloudflare vs Netlify:

• Cloudflare: Performance superior, cheaper
• Netlify: Melhor build system

Conclusão

Cloudflare evoluiu de CDN para plataforma completa de edge computing. Oferece performance global, segurança robusta e preços agressivos (free tier generoso).

Benefícios: ✅ Performance: 310+ data centers globais ✅ Segurança: DDoS, WAF, SSL grátis ✅ Serverless: Workers, Pages, D1, R2 ✅ Pricing: Free tier generoso, paid competitivo ✅ Developer Experience: CLI moderna, Git integration

Use Cloudflare quando: ✅ Performance global é crítica ✅ Segurança é prioridade ✅ Quer serverless simples ✅ Orçamento é limitado ✅ Precisa de CDN gratuito

Na Arkanus, Cloudflare é nossa escolha para:

• Hosting de sites estáticos (Pages)
• APIs serverless (Workers)
• CDN para assets
• DNS management
• DDoS protection

Se você quer aproveitar o poder da edge computing com Cloudflare, podemos ajudar você a implementar.

---

Quer migrar para Cloudflare ou construir na edge? Nossa equipe tem expertise em Workers, Pages e toda plataforma Cloudflare. Entre em contato.