Diagrama de arquitetura de uma aplicação web

Visão geral

Uma aplicação web típica separa responsabilidades em camadas: cliente (frontend), API (regras de negócio), dados (banco e cache) e serviços transversais (autenticação, observabilidade, deploy).

Usuário no navegador

DNS e CDN

Frontend

Detalhes do frontend

• HTML, CSS e JavaScript (ou frameworks como React, Vue, Svelte)
• Renderização no cliente (SPA) ou no servidor (SSR)
• Gerencia estado de tela, rotas e chamadas à API
• Nunca guarda segredos: todo código do cliente é público

Balanceador de carga

API

Detalhes da API

• Expõe endpoints REST ou GraphQL sobre HTTPS
• Valida entrada, aplica regras de negócio e autorização
• Sem estado entre requisições (facilita escalar horizontalmente)
• Versionamento (ex.: /v1) para não quebrar clientes

Autenticação

Como funciona a autenticação

• Autenticação: quem é você (senha com hash bcrypt/argon2, OAuth 2.0 / OpenID Connect, passkeys)
• Sessão: cookie HttpOnly + Secure + SameSite, ou token (JWT) de curta duração com refresh token
• Autorização: o que você pode fazer (papéis, permissões por recurso)

Cache

Banco de dados

Escolha do banco

• Relacional (PostgreSQL, MySQL): transações ACID, esquemas, junções
• Documento/chave-valor (MongoDB, Redis): flexibilidade e velocidade
• Migrações versionadas, índices, backups e consultas parametrizadas (contra SQL injection)

Fila e workers

Processamento assíncrono

Tarefas lentas (e-mails, relatórios, processamento de imagens) vão para uma fila (RabbitMQ, SQS, Redis) e são executadas por workers, liberando a API para responder rápido.

Armazenamento de arquivos

Checklist de segurança

• ☐ HTTPS em tudo (TLS)
• ☐ Segredos em variáveis de ambiente, fora do repositório
• ☐ Validação de entrada no servidor
• ☐ Proteção contra XSS, CSRF e SQL injection (OWASP Top 10)
• ☐ Limite de requisições (rate limiting)
• ☐ Princípio do menor privilégio no banco

Observabilidade

• ☐ Logs estruturados
• ☐ Métricas (latência, taxa de erro, throughput)
• ☐ Rastreamento distribuído
• ☐ Alertas

Ciclo de entrega

Desenvolvimento

• Código versionado em Git
• Revisão por pull request

Integração contínua

• Testes automatizados
• Build

Entrega

• Deploy em homologação
• Deploy em produção

Operação

• Monitoramento
• Rollback se necessário

Fontes

• OWASP Top 10 (owasp.org).
• MDN Web Docs — HTTP, cookies e segurança (developer.mozilla.org).
• RFC 6749 (OAuth 2.0) e especificação OpenID Connect.
• Kleppmann, Designing Data-Intensive Applications.
• The Twelve-Factor App (12factor.net).