Modulo 5 / Arquitetura Web e Deploy

Como funciona a Web

Protocolo HTTP, DNS e a arquitetura cliente-servidor.

school Aula 22 schedule 2 horas

Arquitetura

Cliente e Servidor

laptop

Cliente

O navegador (Chrome, Firefox). Faz requisições e renderiza as respostas para o usuário.

Requisição (pedido)

GET /index.html arrow_forward

arrow_back 200 OK + HTML

via HTTP/HTTPS

dns

Servidor

Um computador que processa as requisições e envia as respostas (HTML, CSS, JS, imagens, dados).

Resposta (conteúdo)

Na prática

O que acontece ao acessar google.com?

1

Digitação da URL

Você digita google.com no navegador

2

Consulta DNS

O navegador pergunta ao DNS: "qual o IP de google.com?"

3

Resposta DNS

O DNS responde: 142.250.79.46

4

Conexão TCP/TLS

Navegador estabelece conexão segura com o servidor

5

Requisição HTTP

Navegador envia GET / para o servidor

6

Resposta e renderização

Servidor responde com HTML, navegador renderiza a página

Resolução de nomes

O que é DNS?

menu_book A "agenda telefônica" da internet

▸ DNS = Domain Name System
▸ Traduz nomes legíveis em endereços IP
▸ Sem DNS, teríamos que memorizar números como 142.250.79.46
▸ Funciona de forma hierárquica e distribuída

swap_horiz Exemplos de tradução

google.com arrow_forward 142.250.79.46

github.com arrow_forward 20.201.28.151

fatec.sp.gov.br arrow_forward 200.144.x.x

lightbulb Teste no terminal: nslookup google.com mostra o IP real.

Protocolo

O que é HTTP?

sync_alt HyperText Transfer Protocol

▸ Protocolo de comunicação entre cliente e servidor
▸ Baseado em requisição e resposta
▸ Cada requisição é independente (stateless)
▸ HTTPS = HTTP + criptografia (TLS/SSL)

description Anatomia de uma requisição

# Requisição
GET /sobre.html HTTP/1.1
Host: meusite.com
Accept: text/html

# Resposta
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234

<html>...</html>

Verbos

Métodos HTTP

GET

Buscar dados

Carregar uma página, buscar lista de produtos

POST

Criar/enviar dados

Enviar formulário, criar conta, fazer login

PUT

Atualizar dados

Editar perfil, atualizar produto

DEL

Remover dados

Excluir conta, remover item do carrinho

lightbulb Esses métodos formam a base do padrão CRUD (Create, Read, Update, Delete) que veremos em módulos futuros.

Respostas

Códigos de status

2xx Sucesso

200 OK (tudo certo)

201 Created (recurso criado)

204 No Content (sem corpo)

3xx Redirecionamento

301 Moved Permanently

302 Found (redirect temporário)

304 Not Modified (cache)

4xx Erro do cliente

400 Bad Request

401 Unauthorized

403 Forbidden

404 Not Found

5xx Erro do servidor

500 Internal Server Error

502 Bad Gateway

503 Service Unavailable

Endereçamento

Anatomia de uma URL

https://www.exemplo.com:443/produtos?categoria=livros#destaque

Protocolo

https:// HTTP seguro (criptografado)

Domínio

www.exemplo.com nome do servidor

Porta

:443 porta HTTPS (80 para HTTP)

Caminho

/produtos recurso no servidor

Query string

?categoria=livros parâmetros

Fragmento

#destaque âncora na página

Ferramenta

Aba Network do DevTools

monitoring O que observar

▸ Abra com F12 e vá na aba Network
▸ Recarregue a página para ver as requisições
▸ Cada linha é uma requisição HTTP
▸ Clique em uma para ver detalhes (headers, body, tempo)

info Informações visíveis

Status 200, 404, 500...

Método GET, POST, PUT...

Tipo HTML, CSS, JS, imagem, API...

Tempo Quanto demorou cada requisição

Size Tamanho da resposta em bytes

Próxima aula

Aula 23

Servidores web, hospedagem e ambientes.

task_alt O que aprendemos hoje

check_circle Arquitetura cliente-servidor
check_circle DNS: tradução de domínios para IPs
check_circle Protocolo HTTP/HTTPS e anatomia da requisição
check_circle Métodos HTTP (GET, POST, PUT, DELETE) e status codes
check_circle Anatomia de uma URL e DevTools Network

Próxima aula

auto_stories Referência: MDN HTTP