Aula: Hospedagem, DNS e Cloudflare

Programação com IA - 30 minutos

📚 Parte 1: Hospedagem (10 min)

O que é Hospedagem?

Hospedar significa colocar seu site/aplicação em um servidor conectado à internet 24/7 para que qualquer pessoa possa acessar.

Principais Opções de Hospedagem

1. Vercel (Recomendado para iniciantes)

• ✅ Gratuito para projetos pessoais
• ✅ Deploy automático via Git
• ✅ Ideal para: React, Next.js, Vue, HTML/CSS/JS

Como hospedar:

# Instalar Vercel CLI
npm i -g vercel

# Na pasta do projeto
vercel login
vercel

2. Netlify

• ✅ Gratuito
• ✅ Drag-and-drop de pastas
• ✅ Ideal para: Sites estáticos, SPAs

3. Railway / Render

• ✅ Suporta backend (Node.js, Python, etc)
• ✅ Banco de dados incluído
• ✅ Plano gratuito limitado

4. GitHub Pages

• ✅ Totalmente gratuito
• ✅ Integrado com GitHub
• ✅ Ideal para: Portfólios, documentação

🎬 Demo Prática

Vamos hospedar um projeto simples no Vercel:

1. Criar conta no Vercel
2. Conectar repositório GitHub
3. Deploy automático
4. Projeto no ar em 2 minutos!

---

📚 Parte 2: Domínios e DNS (10 min)

O que é um Domínio?

É o endereço do seu site (ex: meusite.com.br).

Onde Comprar Domínios?

• Registro.br (.com.br) - R$ 40/ano
• Namecheap - A partir de $8/ano
• GoDaddy - Várias opções

O que é DNS?

DNS (Domain Name System) traduz nomes legíveis em endereços IP.
meusite.com.br → 192.168.1.1 (servidor)

Como Apontar um Domínio

Registros DNS Principais:

Tipo	Função	Exemplo
A	Aponta para um IP	185.199.108.153
CNAME	Aponta para outro domínio	cname.vercel-dns.com
MX	Servidores de email	mail.google.com
TXT	Verificações e configs	verification=abc123

Configuração Típica (Vercel):

No painel do provedor de domínio:

1. Adicionar registro A:
   • Nome: @
   • Valor: 76.76.21.21
2. Adicionar registro CNAME:
   • Nome: www
   • Valor: cname.vercel-dns.com

No Vercel:

1. Settings → Domains
2. Adicionar domínio customizado
3. Seguir instruções de verificação

---

🚀 Parte 3: Cloudflare (10 min)

O que é Cloudflare?

É uma CDN (Content Delivery Network) que fica entre seus visitantes e seu servidor, oferecendo:

• 🚀 Performance (cache global)
• 🛡 Segurança (proteção DDoS)
• 🔒 SSL/HTTPS gratuito
• 📊 Analytics

Por que usar Cloudflare?

• Sem Cloudflare: Visitante → Servidor (pode estar longe, lento)
• Com Cloudflare: Visitante → Servidor Cloudflare mais próximo → Seu servidor (cache, proteção, SSL)

Como Configurar Cloudflare

Passo 1: Criar conta
Acessar cloudflare.com. Plano Free é suficiente.

Passo 2: Adicionar site

1. Clicar em "Add a Site"
2. Digitar seu domínio
3. Cloudflare vai escanear registros DNS existentes

Passo 3: Mudar Nameservers
No seu provedor de domínio, trocar os nameservers para:

• alina.ns.cloudflare.com
• scott.ns.cloudflare.com

(Os nomes variam, Cloudflare mostra os corretos)

Passo 4: Configurar no Cloudflare

• SSL/TLS: Deixar em "Full" ou "Flexible"
• Always Use HTTPS: Ativar
• Auto Minify: Ativar (JS, CSS, HTML)
• Brotli: Ativar

Recursos Úteis do Cloudflare

1. Page Rules (3 grátis):
   • Criar regras personalizadas.
   • Ex: meusite.com.br/admin/* → Desabilitar cache → Security Level: High
2. Firewall: Bloquear países, IPs, bot maliciosos.
3. Analytics: Ver tráfego, ameaças bloqueadas, performance.
4. Workers (opcional): Código serverless que roda na edge.

---

🎯 Fluxo Completo: Do Código ao Ar

1. Desenvolver projeto localmente
    ↓
2. Subir código no GitHub
    ↓
3. Conectar GitHub com Vercel/Netlify
    ↓
4. Deploy automático → URL temporária
    ↓
5. Comprar domínio
    ↓
6. Configurar Cloudflare (opcional mas recomendado)
    ↓
7. Apontar domínio para hospedagem
    ↓
8. Site no ar com domínio próprio!

---

💡 Dicas Importantes

🔧 Comandos Úteis

Vercel CLI

vercel login          # Login
vercel                # Deploy
vercel --prod         # Deploy em produção
vercel domains        # Gerenciar domínios
vercel env            # Gerenciar variáveis de ambiente

Netlify CLI

netlify login         # Login
netlify init          # Configurar projeto
netlify deploy        # Deploy preview
netlify deploy --prod # Deploy produção

---

📖 Recursos Adicionais

Documentação

• Vercel Docs
• Netlify Docs
• Cloudflare Learning Center

Ferramentas de Teste

• DNS Checker - Verificar propagação DNS
• GTmetrix - Testar performance
• SSL Labs - Testar configuração SSL

---

🎓 Exercício Prático

---

📤 Entrega de Projeto

Preencha formulário abaixo para registrar a conclusão do seu desafio.

---

❓ Perguntas Frequentes

P: Preciso pagar por hospedagem para aprender?
R: Não! Vercel, Netlify e GitHub Pages são gratuitos para projetos pessoais.

P: Quanto custa um domínio?
R: .com.br = ~R$ 40/ano | .com = ~$10-15/ano

P: Cloudflare é obrigatório?
R: Não, mas é altamente recomendado (e grátis!).

P: Posso hospedar backend (Node.js, Python)?
R: Sim! Use Vercel (serverless functions), Railway, ou Render.

P: Como faço para atualizar o site?
R: Faça commit no GitHub. O deploy é automático!

---

📝 Resumo de 3 Pontos

1. Hospedagem: Vercel/Netlify para frontend são gratuitos e fáceis
2. Domínio: Compre onde preferir, aponte com registros A/CNAME
3. Cloudflare: Acelera, protege e adiciona SSL gratuito

🎤 Encerramento

Agora vocês têm todo conhecimento necessário para colocar projetos no ar!

Próximos passos:

• Experimentem hospedar um projeto hoje mesmo
• Testem diferentes plataformas
• Compartilhem seus projetos no ar!

Dúvidas? Vamos para a prática!