1 / 11
Modulo 5 / Arquitetura Web e Deploy

Servidores Web e Hospedagem

Tipos de servidores, serviços de hospedagem e ambientes.

school Aula 23 schedule 2 horas

Conceito

O que é um servidor web?

dns Hardware (máquina)

  • ▸ Um computador dedicado que fica ligado 24/7
  • ▸ Conectado à internet com IP fixo
  • ▸ Geralmente em datacenters com segurança, energia e refrigeração
  • ▸ Pode ser físico ou virtual (VPS, cloud)

terminal Software (programa)

  • ▸ Programa que recebe requisições HTTP e envia respostas
  • ▸ Exemplos: Apache, Nginx, Node.js
  • ▸ Serve arquivos estáticos (HTML, CSS, JS, imagens)
  • ▸ Pode processar lógica no servidor (back-end)

Tipos de conteúdo

Estático vs Dinâmico

description Site estático

  • ▸ Arquivos HTML, CSS e JS prontos
  • ▸ O servidor apenas entrega os arquivos
  • ▸ Mesmo conteúdo para todos os visitantes
  • ▸ Rápido e barato de hospedar
Exemplos: portfólios, páginas de documentação, blogs simples, landing pages

data_object Site dinâmico

  • ▸ O servidor gera o HTML em tempo real
  • ▸ Precisa de linguagem de back-end (Node.js, Python, PHP)
  • ▸ Conteúdo personalizado por usuário
  • ▸ Geralmente conecta a um banco de dados
Exemplos: redes sociais, e-commerce, painéis administrativos, aplicações SaaS

Onde hospedar

Tipos de hospedagem

share Hospedagem compartilhada

  • ▸ Vários sites no mesmo servidor
  • ▸ Recursos compartilhados (CPU, RAM)
  • ▸ Barato, mas menos controle
Ex: Hostgator, Locaweb, HostGator

cloud VPS (Virtual Private Server)

  • ▸ Servidor virtual com recursos dedicados
  • ▸ Mais controle e desempenho
  • ▸ Precisa de conhecimento de Linux/servidor
Ex: DigitalOcean, Linode, Vultr

cloud_queue Cloud (nuvem)

  • ▸ Infraestrutura escalável sob demanda
  • ▸ Você paga pelo que usa
  • ▸ Muitos serviços integrados
Ex: AWS, Google Cloud, Azure

rocket_launch Plataformas modernas (PaaS)

  • ▸ Deploy automático via Git
  • ▸ Zero configuração de servidor
  • ▸ Planos gratuitos generosos
Ex: Vercel, Netlify, Railway

Ciclo de vida

Ambientes de desenvolvimento

laptop

Desenvolvimento (local)

Onde o código é escrito e testado inicialmente. Roda na sua máquina.

localhost:3000
science

Staging (homologação)

Ambiente que imita produção para testes finais antes de publicar.

staging.meusite.com
public

Produção (live)

Ambiente real acessado pelos usuários. Precisa de estabilidade.

www.meusite.com
Desenvolvimento git push Staging aprovação Produção

Arquitetura

Front-end vs Back-end

laptop Front-end

  • ▸ Roda no navegador do usuário
  • ▸ HTML, CSS, JavaScript
  • ▸ Interface visual e interativa
  • ▸ Frameworks: React, Vue, Angular
Hospedagem: GitHub Pages, Vercel, Netlify (gratuito)

dns Back-end

  • ▸ Roda no servidor
  • ▸ Node.js, Python, PHP, Java
  • ▸ Lógica de negócio, banco de dados, autenticação
  • ▸ APIs para o front-end consumir
Hospedagem: Vercel (serverless), Railway, Render, AWS

Preview

Conhecendo a Vercel

rocket_launch O que é

  • ▸ Plataforma de deploy moderna e gratuita
  • ▸ Conecta direto ao GitHub
  • ▸ Deploy automático a cada push
  • ▸ Suporta front-end e back-end (serverless)
  • ▸ HTTPS e CDN global incluídos

compare_arrows Vercel vs GitHub Pages

Estático Ambos
Back-end Vercel (serverless)
Frameworks Vercel (Next.js, React)
Preview por PR Vercel
Simplicidade Ambos
Na próxima aula, faremos deploy de projetos reais usando a Vercel!

Automação

O que é CI/CD?

sync CI - Integração Contínua

  • ▸ Automatiza testes e verificações a cada commit
  • ▸ Detecta erros rapidamente
  • ▸ Mantém o código sempre funcional

cloud_upload CD - Deploy Contínuo

  • ▸ Automatiza o deploy para produção
  • ▸ Após testes do CI passarem, o site é atualizado
  • ▸ Vercel e Netlify fazem isso automaticamente
git push arrow_forward testes arrow_forward build arrow_forward deploy arrow_forward produção

Segurança

Variáveis de ambiente

key O que sao

# Arquivo .env (NUNCA suba no Git!) DATABASE_URL=mongodb://localhost/meubanco API_KEY=sk-abc123xyz456 PORT=3000 NODE_ENV=production
warning NUNCA coloque senhas ou chaves de API diretamente no código! Use variáveis de ambiente e .gitignore.

settings Diferentes por ambiente

Desenvolvimento

DATABASE_URL=mongodb://localhost/dev

Staging

DATABASE_URL=mongodb://staging-server/test

Produção

DATABASE_URL=mongodb://prod-cluster/app

Hora de praticar

Exercício prático

rocket_launch Investigando a web

  1. Abra o DevTools (F12) em qualquer site
  2. Vá na aba Network e recarregue a página
  3. Identifique: quantas requisições foram feitas? Quais tipos de arquivo?
  4. Clique em uma requisição e observe os headers (Request Headers e Response Headers)
  5. No terminal, teste nslookup google.com para ver o DNS
  6. Teste ping google.com para medir a latência
lightbulb Desafio extra: compare o número de requisições entre um site simples e uma rede social. O que explica a diferença?
Próxima aula

Aula 24

Deploy: Vercel para front-end e back-end.

task_alt O que aprendemos hoje

  • check_circle O que é um servidor web (hardware e software)
  • check_circle Sites estáticos vs dinâmicos
  • check_circle Tipos de hospedagem (compartilhada, VPS, cloud, PaaS)
  • check_circle Ambientes: desenvolvimento, staging y produção
  • check_circle CI/CD, Vercel e variáveis de ambiente
Próxima aula
auto_stories Referência: MDN Web Mechanics
Leandro Medeiros