com AWS Lambda com Vuejs/Nuxt.js Side …...2019/05/17 · AWS Lambda Serviço Serverless da AWS...
Transcript of com AWS Lambda com Vuejs/Nuxt.js Side …...2019/05/17 · AWS Lambda Serviço Serverless da AWS...
Serverless Side-Rendering com Vuejs/Nuxt.js com AWS Lambda
www.blueticket.com.br
Quem sou eu?
▪ Nome: Júlio César Ferreira Guedes.▪ Trabalho: Blueticket.▪ Função: Analista/Desenvolvedor Front-end.
Linkedin: https://www.linkedin.com/in/julioguedes/
www.blueticket.com.br
Blueticket▪ +2M de usuários cadastrados
▪ +600 mil usuários únicos mês
▪ +1 milhão de acessos no total
▪ 200 á 20 mil usuários simultâneos
www.blueticket.com.br
Show Guns N Roses
www.blueticket.com.br
Show Guns N Roses - EC2
www.blueticket.com.br
Como fica o Auto-Scale ?
▪ Não daria tempo de subir máquinas tão rápido em um servidor tradicional
▪ Servidor em carga máxima seria caríssimo
www.blueticket.com.br
Vue.jsVuejs é um framework simples para a construção de interfaces de usuário.
fonte: vuejs.org
www.blueticket.com.br
React
Github
Angular
Vuejs
www.blueticket.com.br
Vuejs + Cloudfront + S3 bucket ?
www.blueticket.com.br
Problemas com SEO!
www.blueticket.com.br
Nuxtjs (SSR)É um framework para criação de aplicações Vue.js, seja ela universal, gerada estaticamente ou single page application.fonte: nuxtjs.org
www.blueticket.com.br
Github
Nuxtjs
www.blueticket.com.br
Instalação
www.blueticket.com.br
Instalação - Várias opções
▪ Qual framework Server-Side quer usar ?
▪ Qual framework UI quer usar ?
▪ Qual framework de test quer usar ?
▪ Axios, eslint, prettier...
www.blueticket.com.br
Features
www.blueticket.com.br
Nuxtjs - Features
▪ Routing system baseado em pastas e arquivos
▪ Hierarquia layout/página (propriedades head nas páginas)
▪ Middlewares
▪ Plugins
▪ AsyncData/Fetch
www.blueticket.com.br
Nuxtjs - Routing (Feature)
▪ Basic routing
▪ Dynamic routing
www.blueticket.com.br
Nuxtjs - Hierarquia Layout/Página (Feature)
www.blueticket.com.br
Nuxtjs - Middlewares (Feature)
▪ São funções customizáveis que são executadas antes de renderizar uma página
▪ Ficam localizados na pasta /middleware
www.blueticket.com.br
▪ São usados antes mesmo da inicialização da instância do Vue, para justamente poder ter algo injetado na aplicação.
▪ Ficam localizados na pasta /plugins
Nuxtjs - Plugins (Feature)
www.blueticket.com.br
▪ Fazem a requisição no server-side antes de carregar a página
▪ A página só é carregada após o retorno da requisição
Nuxtjs - AsyncData/Fetch (Feature)
www.blueticket.com.br
Fluxo de uma requisição Nuxtjs
www.blueticket.com.br
▪ Grande performance (melhores práticas nodejs).
▪ Mais de 50 módulos (PWA, SPA e etc…)
▪ Soluções preparadas para sistemas complexos
Nuxtjs - Vantagens
www.blueticket.com.br
Nuxtjs - Módulos de Renderização
▪ Single Page Applications (SPA)
▪ Static Generated (Pre Rendering)
▪ Server Rendered (Universal SSR)
www.blueticket.com.br
▪ É o modo mais popular do Nuxt
▪ Preparado para receber o SEO
▪ Comunicação Server Side/Client Side
Server Side Rendered (Universal SSR)
www.blueticket.com.br
Este é o tradicional Single Page Application do Vue.js.
Single Page Applications (SPA)
www.blueticket.com.br
É o melhor dos dois mundos:
▪ Não há necessidade de um servidor nodejs rodando
▪ Benefício do SEO configurado no seu site.
Static Generated (Pre Rendering)
www.blueticket.com.br
Nuxtjs - Resumindo
▪ Você tem 3 aplicações complexas em um só sistema.
▪ Mude a medida de sua necessidade.
www.blueticket.com.br
Nuxt + AWS LambdaServerless ? Sim!
www.blueticket.com.br
Primeiro: O que éServerless ?
www.blueticket.com.br
ServerlessExistem:▪ Serverless Computing
▪ Serverless (framework)
www.blueticket.com.br
Serverless Computing
▪ Veio para simplificar o deployment do código em produção
▪ Não precisa provisionar ou gerenciar o servidor
▪ Aplicativos ganham escalabilidade automaticamente
▪ Foco no desenvolvimento da aplicação.
www.blueticket.com.br
www.blueticket.com.br
É um framework serverless que ajuda no build, deploy e auto-scaling do seu sistema baseado em funções.
É free e Open Source!
Serverless(Framework)
www.blueticket.com.br
Como Funciona esse Serverless Framework?
www.blueticket.com.br
▪ Passo 1: Você seleciona um Servidor Provider: AWS, Google Cloud, Azure..
▪ Passo 2: Autenticação.
▪ Passo 3: Build & deploy!
Serverless(Framework) - Passos
www.blueticket.com.br
AWS Lambda ▪ Serviço Serverless da AWS▪ Modelo do tipo "pay-as-you-go", ou seja,
pague o que usar▪ Acionado por eventos▪ Execução ilimitada de execuções paralelas▪ Suporte a várias linguagens, exemplo:
java, python, nodejs, e etc...
www.blueticket.com.br
AWS Lambda - Quanto custa?
www.blueticket.com.br
www.blueticket.com.br
Como o Nuxt se comunica com o AWS Lambda ?
www.blueticket.com.br
Através de uma função handler
www.blueticket.com.br
www.blueticket.com.br
Pode se usar em todas as aplicações ?
www.blueticket.com.br
Tem alguns caso que Não.
www.blueticket.com.br
Quais os casos que NÃO se deve usar ?
Em todos os casos de conexões persistentes como websockets, stream, social real-time chat e etc...
www.blueticket.com.br
Em todos os outros… Sim!
www.blueticket.com.br
Em resumo...▪ Você paga apenas o que usar▪ Menos tempo cuidando do servidor▪ Expectativa de economia de +50%
em comparação
Dúvidas ?
Email: [email protected]: https://www.linkedin.com/in/julioguedes/
Fim!Obrigado pela
atenção!