© 2014 Amazon.com, Inc. and its affiliates. All rights reserved. May not be copied, modified, or distributed in whole or in part without the express consent of Amazon.com, Inc.

Aceleração de Conteúdo Dinâmico: Suas Aplicações Web mais Rápidas com Amazon CloudFront e Amazon Route 53

Eduardo Horai, Manager Solutions Architecture 27 Maio, 2014

Fatores fundamentais Qualquer aplicação WEB tem que possuir: •  Segurança forte •  Alta disponibilidade •  Alta performance

Por que disponibilidade importa?

•  Aplicação indisponível à perda de 100% da receita

•  Impacto na lealdade dos clientes e imagem da empresa

Como AWS ajuda? ü Amazon Route 53: verificação de saúde dos

servidores web de origem com failover automático

ü Amazon CloudFront: reduzir a carga na origem

ü Amazon CloudFront: páginas de erros customizadas

ü Amazon CloudFront: serve conteúdo cacheado se a origem estiver indisponível

Por que performance importa? •  Performance se transforma em…

•  Mais Page Views •  Melhor experiência do usuário •  Maior taxa de conversão

Por que performance importa?

Por que performance importa?

Muito tempo e dinheiro é gasto melhorando a infraestrutura de backend

Por que performance importa? 80% da latência percebida pelo usuário é originária do front-end

Como melhorar a performance? Aplicação Web tem …

•  Conteúdo estático ou reusável

•  TTLs altos •  TTLs baixos (conteúdo customizado)

•  Conteúdo dinâmico ou único •  TTL zero

Conteúdo estático ou reusável

Pode ser cacheado (TTLs altos ou baixos)

Arquitetura típica

Conteúdo dinâmico ou único

Não pode ser cacheado – MAS afeta 100% dos visitantes!

Por que não…?

Como Amazon CloudFront ajuda? ü Otimizações TCP/IP no caminho da rede

ü Keep-Alive para reduzir RTT ü Terminação SSL próxima dos visitantes

ü POST/PUT otimizado ü Roteamento baseado em latência ü Preço igual ao conteúdo estático!

Estático ou Reusável Conteúdo que não se altera em um determinado

período de tempo

t0 t1

Dinâmico OU Único Conteúdo que se altera rapidamente, assim que

é criado

t0 t1

Exemplo

Exemplo Index.jsp (dinâmico)

Imagens (estático)

Exemplo

. sec

Tempo para carregar a página?

. Sec

Melhorando a performance Web

Acelerando conteúdo estático Acelerando conteúdo dinâmico

Endereço: www…. Navegador renderiza

Gráficos em cascata (Waterfall)

DNS Lookup

TCP Connection

Time to First Byte

Content Download

Gráficos em cascata

Index.jsp

Otimizando conteúdo estático

Otimizando conteúdo estático

Index.jsp

Images, JS e CSS

Otimizando conteúdo estático

Index.jsp

Otimizado com cache do Amazon CloudFront

Cacheando

Origin

Edge Location

User Request A

Cacheando

Origin

Edge Location

Get Image

User Request A

Cacheando

Origin

Edge Location

Get Image

Get Image

User Request A

Cacheando

Origin

Edge Location

Get Image

Get Image

Image

User Request A

Cacheando

Origin

Edge Location

Get Image

Get Image

Image

Image

User Request A

Cacheando

Origin

Edge Location

User Request B

Get Image

Cacheando

Origin

Edge Location

Get Image Image

User Request B

Otimizando conteúdo estático com Cache

Traz conteúdo próximo aos usuários

Otimizando conteúdo estático com Cache

Melhora a experiência do usuário e performance

Otimizando conteúdo estático com Cache

Reduz a carga na sua infraestrutura

Antes de cachear = 1.46sec

Depois de cachear = 770ms

Conteúdo estático &

•  Empresa brasileira de segurança digital; •  Feita por brasileiros, para brasileiros; •  Possui escritórios no Rio de Janeiro, São

Paulo e Florianópolis; •  Toda sua infra-estrutura no Brasil; •  Mais de 6 milhões de usuários ativos; •  10 MM usuários ativos mensais; •  9 MM Android memory cleanups por dia; •  2 MM Android scans por dia; •  Utiliza diversos serviços AWS;

Amazon CloudFront CDN - Apresentação

“A  flexibilidade  do  CloudFront  permite  com  que  os  desenvolvedores  sigam  o  

caminho  mais  natural  e  óbvio  no  que  diz  respeito  a  distribuição  de  conteúdo.”  

 -­‐  Rafael  Lopes  

•  Atender milhares de requests simultâneos simplificando a solução ao máximo;

•  Ter total autonomia sobre a origem a CDN;

•  Ter estatísticas estratégicas para nosso BI;

•  Liberdade de poder criar distribuições sem tickets de suporte;

•  Prover conteúdo de maneira dinâmica usando uma CDN;

•  Conseguir isso tudo com um preço competitivo;

Amazon CloudFront CDN - Desafio

Amazon CloudFront CDN - Solução e benefícios alcançados

•  Conseguir isso tudo com um preço competitivo;

•  Custom Origin;

•  Analytics – antes com logs no s3 bucket e MapR, agora com interface web nativa;

•  AWS Console e IAM management com usuários internos e ACL pra cada time;

•  Prover conteúdo de maneira dinâmica usando uma CDN;

•  Entrada no DNS Route 53

•  CloudFront;

•  Download distribution, escrevendo todos os logs dos edge servers em um S3 bucket;

•  ELB como origem, escrevendo logs do loadbalancer em um S3 bucket e com CloudWatch com alarme;

•  Servidores servindo conteúdo estático customizado;

Diagrama de arquitetura

Terminamos?

Ainda não . sec Objetivo:

Cache As Much As You Can

Como? Já estou cacheando minhas

imagens, CSS e JSS

Passos para encontrar conteúdos cacheáveis

1.  Coletar logs web (W3C) da camada web

2.  Rodar uma análise nos seus logs (EMR, RDS ou Redshift)

3.  Identificar os top N URLs acessados

220 /index.jsp 200 /images/book1.gif 120 /css/style.css 119 /js/script1.js 110 /factory/create_image?name=book1&size=10x10 100 /api/GetBooks?category=math 90 /api/GetBooks?category=math&lang=spanish 80 /api/GetBooks?top=10

Estático ou Reusável Conteúdo que não se altera em um determinado

período de tempo

t0 t1

Cache por um tempo menor •  Encontrar conteúdo que pode ser cacheado por qualquer

período:

•  Horas

•  Minutos

•  Segundos

•  CloudFront pode cachear por qualquer período de tempo

Conteúdo com Query Strings

Reutilizável!

110 /factor/create_image?name=book1&size=10x10

Chamadas de API

Reutilizável!

100 /api/GetBooks?category=math

Chamadas de API

Reutilizável!

80 /api/GetBooks?top=10

Cache por um tempo menor

•  API GETS atinge 100 ou 1000 RPS

•  Retira da sua camada web a carga de 1000 RPS

•  Retira carga do seu load balancer: ELB ou outro LB

•  Provisiona menos capacidade e reduz custo

1000 /api/GetBooks?top=10

Página base (primeira página HTML)

E agora?

220 /index.jsp

Otimizando conteúdo dinâmico

Conteúdo dinâmico

Index.jsp

Otimizando conteúdo dinâmico

Index.jsp

O Conteúdo dinâmico pode ser otimizado?

Dinâmico não é cacheável Conteúdo é enviado como se fosse um proxy pela CDN

O Conteúdo dinâmico pode ser otimizado?

User Request

Origin

Edge Location

Poke

Poke

Ok

Ok

Poke Poke

User Request

O Conteúdo dinâmico pode ser otimizado?

Adiciona latência? Como otimizar conteúdo dinâmico?

Como otimizar o conteúdo dinâmico?

DNS Lookup

TCP Connection

Time to First Byte

Content Download

Como otimizar entrega dinâmica? Route 53

Keep-Alive Connections & SSL Termination

Reduzir DNS Time

+

Reduzir Connection Time

+

Reduzir First Byte Time

+

Reduzir Content Download Time

Keep-Alive Connections

TCP/IP Optimization

Rute53

Route 53

Depois cachear/antes de CloudFront para conteúdo dinâmico = 770ms

Como melhorar o DNS Lookup?

DNS Lookup

Index.jsp

Com Amazon Route 53

Route 53

Otimizando tempo do DNS •  Route 53: DNS gerenciado

•  Desenhado para ser rápido

•  Latência baixa de resolução DNS

•  Rede global de servidores de DNS

•  Queries roteadas para o servidor DNS mais próximo

Sem Route 53

Com Route 53

Como melhorar TCP Connection e First Byte Time?

TCP Connection

Index.jsp

Com Keep-Alive das conexões do Cloudfront

Sem CloudFront

Region

•  Todo usuário é uma nova conexão

•  Mais usuários = mais conexões TCP

Sem conexões Keep-Alive

•  Mais carga no seu servidor: Memory/CPU

Sem conexões Keep-Alive

•  Carga no servidor aumenta o time to first byte

Time to First Byte

•  Mais usuários Mais conexões TCP

•  Retira carga na camada web: CPU/memory •  Melhora tempo de resposta:

2 conexões Sem CloudFront 1 conexão Com CloudFront

720 ms Sem CloudFront

540 ms Com CloudFront

CloudFront Keep Alive

Test CPU Util. % Sem CloudFront 20% Com CloudFront 6%

Como otimizar as conexões SSL?

TCP Connection

Index.jsp

Com terminação de SSL do CloudFront

Otimização SSL com CloudFront

•  Suporta tráfego SSL •  Pode trazer o seu próprio certificado •  Tráfego SSL é terminado no ponto mais próximo

do CloudFront

Depois da otimização do CloudFront para conteúdo dinâmico = 555 ms

Exemplo: somecompany.com

. sec

Cloudfront &

•  O Esporte Interativo é o maior grupo de mídia esportiva do Brasil. Na TV, com conteúdos como Liga dos Campeões, Europa League, Copa do Rei, Copa do Nordeste, Copa Verde etc., é o maior canal de esportes do país, cobrindo mais de 32 milhões de lares. No meio digital, também é líder: são quase 9 milhões de fãs no Facebook, que fazem do Esporte Interativo o 2º maior grupo de mídia esportiva do mundo. Em 2012, criou o Esporte Interativo Plus, uma nova plataforma de conteúdo online, que possibilita ao usuário assistir a programação da emissora 24 horas por dia ao vivo ou on demand através do computador, celular ou tablet. Com o sucesso do aplicativo, torna-se imprescindível possuir um serviço de TI confiável, capaz de fornecer todo o conteúdo com a máxima qualidade e também de gerenciar os mais de 80 mil assinantes.

“O escalonamento de instâncias e o uso do cloudfront nos faz crescer de acordo com a demanda dos nossos assinantes.”

“A  AWS  nos  permite  crescer  de  acordo  com  a  demanda.  Podemos  escalar  várias  instâncias  

para  um  jogo  importante  e  depois  pará-­‐las,  o9mizando  

assim  nossos  recursos.”    -­‐  Mauricio  Portela  

O Desafio

•  O desafio do Esporte Interativo era encontrar uma estrutura que além de suportar milhões de acessos ao web site e todas as suas plataformas móveis, ainda possibilitasse que, ao assistir o video ao vivo ou on demand, o usuário tivesse a melhor experiência possível tanto em fluidez quanto nas diversas qualidades e velocidades oferecidas. O nosso assinante deveria conseguir ver um conteúdo em HD ou no 3G sem travamentos.

Sobre a o Papel da AWS e Benefícios alcançados

PARAGRAFO  RESUMO  CASO  _  KEY  WORDS  

de  BENEFICIO,  DESAFIO  VENCIDO  –  RESUMO  DO  CASO  EM  UM  

PARAGRAFO  

•  Escalabilidade de recursos rápida e automática utilizando cloudfront e elb.

•  Podemos crescer e diminuir de acordo com

a nossa audiência, que é crescente e muito alta em jogos e eventos importantes.

•  Cloudfront permitiu uma distribuição

inteligente e efetiva do conteúdo ao vivo e on demand.

Cloudfront   Encoder  

Instâncias  de  Midia  AWS  

Estrutura  Streaming  

Estrutura  Site  

Cloudfront  

RDS  

Instâncias    EC2  em  um  ELB   Elas9c  Cache  

Assinantes  /  Usuários  

Resumo

•  CloudFront para acelerar todo seu conteúdo

•  Utilize CloudFront (e também Route 53 com roteamento baseado em latência) para melhorar sua performance

•  Melhor disponibilidade com CloudFront e Amazon Route 53

Perguntas?

© 2014 Amazon.com, Inc. and its affiliates. All rights reserved. May not be copied, modified, or distributed in whole or in part without the express consent of Amazon.com, Inc.

Eduardo Horai, Manager Solutions Architecture 27 Maio 2014

Obrigado!

Aceleração de Conteúdo Dinâmico: Suas Aplicações Web mais Rápidas com Amazon CloudFront e Amazon Route 53