Primeiras aulas do curso Aplicações Serverless: Integrando aplicação fullstack

Aplicações Serverless: Integrando aplicação fullstack

Hospedando o frontend - Apresentação

Olá, meu nome é Humberto e eu irei guiá-los nesse curso sobre desenvolvimento de Aplicações Serverless. Este curso é uma continuação do curso Aplicações Serverless: Construindo uma API REST onde nós construímos uma API para cadastro de pacientes. Então caso ainda não tenha feito, recomendo que faça esse curso antes.

O nosso curso é indicado para pessoas que já conheçam alguma linguagem de programação e tenham alguma familiaridade com os serviços da AWS. Nesse curso iremos continuar trabalhando na nossa API de cadastro de pacientes, vamos torná-la mais segura implementando um mecanismo de aplicação utilizando uma lambda autorizadora, que tem por papel interceptar as requisições para nossa API e determinar se quem está invocando essa API tem autorização ou não para consumir os dados.

No segundo passo nós vamos aprimorar esse mecanismo de autenticação utilizando um serviço da AWS chamado Amazon Cognito. Esse serviço vai nos entregar as funcionalidades de autenticação e autorização, e cadastro de usuários. Nesse nosso curso nós também iremos contar com um front-end, uma aplicação desenvolvida em React.js, e o nosso papel será integrar esse front-end com a nossa API cadastro de pacientes, permitindo que nossos usuários através desse front-end possam interagir com os dados dos pacientes.

E também nós iremos integrar o nosso front-end ao serviço do Amazon Cognito. Vamos fazer a integração dos formulários de autenticação, do formulário de "esqueci minha senha" e o formulário de cadastro de usuários.

E para nos ajudar nessa integração, nós vamos utilizar uma biblioteca chamada “amazon amplify” que simplifica, e muito, esse processo de integração. Então bastante com um arquivo nós configuramos a comunicação tanto com nossa API, como também com o serviço Amazon Cognito.

Nós também iremos hospedar o nosso site, vamos configurar um bucket na Amazon S3 para fazer a hospedagem do nosso site e vamos utilizar um domínio customizado configurando o serviço Amazon Route 53. Então nós vamos utilizar no nosso caso o domínio “alura.xyz” e configurá-lo através do serviço Amazon Route 53.

Para que o nosso site seja entregue da maneira mais eficiente e rápida possível para nossos usuários, nós vamos utilizar um outro serviço da Amazon chamado Amazon CloudFront, para que os nosso usuários, independentemente de qual lugar do mundo eles estejam, sempre tenham o acesso mais rápido possível ao nosso site.

E para nos ajudar a orquestrar a implantação de recursos na AWS, nós vamos utilizar uma ferramenta chamada AWS CloudFormation. Essa ferramenta nos dá um arquivo onde iremos descrever todos os recursos da AWS que a nossa operação precisa. Então com apenas um comando, nós conseguimos implantar todos esses recursos, criação de bucket, configuração do Amazon Route 53, configuração do AWS Cognito e quaisquer outros serviços que nós precisamos da AWS, nós conseguimos descrever isso em um único arquivo.

[03:11] Estão preparados para começar? Então te aguardo nos próximos vídeos.

Hospedando o frontend - Executando localmente

No curso Aplicações Serverless: Construindo uma API REST, nós desenvolvemos o back-end do sistema de cadastro de pacientes que será utilizado em consultórios. Com ele é possível fazer a inserção, a remoção, edição, listagem de dados de pacientes.

Esse projeto nós desenvolvemos com JavaScript e Node JS e contamos também com DynamoDB para realizar a persistência dos dados. E fora isso, também estamos contando com o Serverless Framework que nos ajuda com todo o workflow de deploy e organização do projeto.

Fora o back-end nós também vamos contar agora com uma aplicação de front-end, uma aplicação SPA construída em JavaScript e React JS. Esse front-end vai nos permitir interagir com a API que nós desenvolvemos no back-end. O que nós vamos fazer agora é baixar o código fonte desses dois projetos e executá-los localmente.

Vou abrir o terminal, eu já fiz o download desses dois projetos, o “aluramed-api” que é o back-end e o “aluramed-front” que é o front-end, eu vou começar configurando o back-end. Então eu vou executar o comando unzip aluramed-api.zip, mas antes eu preciso criar um diretório se não ele vai descompactar tudo aqui. Então antes de descompactar eu vou criar um diretório, vou executar o comando mkdir aluramed-api.

Muito bem, vou copiar arquivo aluramed-api.zip para este diretório, então vou executar o comando cp aluramed-api.zip para o diretório aluramed-api. Aguardar um pouco para realizar a cópia. Agora sim, vamos acessar o diretório cd aluramed-api e descompactar o arquivo ZIP que nós copiamos para cá. Então para isso eu vou executar o comando unzip aluramed-api.zip e dar “Enter” aguardar um pouco para que o arquivo seja totalmente descompactado.

O arquivo foi descompactado, então vou listar todo o conteúdo do diretório para ver como ele ficou, então comando ls -la, todos os arquivos do projeto do back-end estão aqui. O próximo passo é realizar a instalação das dependências, como esse projeto foi desenvolvido em JavaScript e contamos com NPM para realizar todo gerenciamento de dependências, vamos precisar executar o comando, no terminal, chamado npm install. Esse comando pode levar alguns minutos para concluir, então nós vamos precisar aguardar um pouco.

Dependências foram instalados, agora o próximo passo é fazermos a instalação do Dynamo localmente. O projeto do back-end já tem um plugin que facilita bastante esse processo de instalação do Dynamo, para isso vamos, no terminal, executar o comando sls dynamodb install.

Esse processo vai fazer o download do arquivo dynamosdb e todas as configurações de instalação para nós, é um plugin do Serverless Framework que facilita bastante esse trabalho. Esse processo pode demorar alguns minutos, então nós vamos precisar aguardar um pouco até essa conclusão.

A instalação do Dynamo foi concluída, agora o próximo passo é subir aplicação. Então para isso nós vamos executar um comando no terminal chamado sls offline start, então esse comando vai popular o Dynamo que nós estamos localmente com alguns dados de exemplo e subir todos os endpoints da nossa API. Então esse processo demora um pouco, nós precisamos aguardar também.

Finalizada a subida da aplicação, podemos ver que ele já expôs alguns endpoints no nosso ambiente local, então vamos acessar no navegador o endpoint que lista todos os pacientes. Os endpoints estão expostos na porta 3001. Então eu vou copiar a primeira url da caixa na parte inferior da tela e vou abrir o navegador, uma nova aba e colar esse endereço no navegador para verificar se deu tudo certo. Vamos aguardar um pouco, muito bem, nós temos a massa de dados de exemplo do nosso back-end.

Agora vamos fazer as configurações para rodar localmente também o front-end. Vamos abrir novamente o terminal, eu vou parar a aplicação do back-end e vamos descompactar o arquivo do projeto do front-end, executar a instalação e subir a aplicação. Então aguardar a parada do back-end, vou voltar um nível com o comando cd e vamos descompactar o arquivo aluramed-front.

Então para isso nós vamos executar no terminal o comando unzip aluramed-front.zip. Ou melhor, antes de descompactar, nós vamos criar um diretório para esse projeto para esse projeto também. Se nós descompactarmos aqui ele vai salvar todos os arquivos na raiz e não é o que eu quero.

Então com o comando mkdir, vou criar a pasta aluramed-front. Agora sim, criando o diretório, esperar um pouco. Agora vou copiar o arquivo aluramed-front para esse novo diretório que nós acabamos de criar, então para isso eu vou digitar o comando cp aluramed-front.zip copiando o conteúdo para a pasta aluramed-front.

Aguardar um pouco, o arquivo está sendo copiado. Agora com o comando cd vou acessar a pasta aluramed-front e, por fim, agora sim executar o comando para descompactar, que é o comando unzip aluramed-front.zip.

Então a descompactação vai demorar um pouco mais porque esse projeto possui muito mais arquivos em relação ao back-end, vamos aguardar a finalização da descompactação para nós começarmos a instalar as dependências. Então conteúdo todo descompactado, se nós listarmos o conteúdo do diretório e todos os arquivos estão aqui disponíveis.

Então agora o que vamos fazer é realizar a instalação, como esse projeto também é JavaScript e estamos utilizando o npm para gerenciar as dependências vamos digitar novamente o comando npm install e aguardar um pouco, esse processo demora alguns minutos, então vamos aguardar que todas as dependências sejam instaladas.

As dependências foram instaladas, agora o próximo passo é subirmos o front-end, para ele rodar localmente. Para isso nós vamos executar outro comando que é o npm start, então deixa eu limpar o terminal, digitar npm start, com isso o servidor local que tem o front-end irá startar, preparar toda a aplicação e abrir o navegador para nós, então o comando pode demorar um pouco para inicializar, nós vamos aguardar a conclusão.

Então na primeira execução nós podemos demorar um pouco de tempo, mas ter um pouco de paciência que já inicializa. Então vamos aguardar aqui todo o processo de inicialização do front-end. Assim que ele finalizar ele já vai inicializar o servidor e já vai abrir uma página para nós no navegador com o front-end da aplicação. Vamos aguardar um pouco para finalizar.

Então essa primeira inicialização finalizou, a aplicação está rodando na localhost porta 3000, ele já abriu até para nós uma nova aba no navegador com o site. Então basicamente a segurança da aplicação está estática, não tem nenhuma integração com o front-end, todos os dados estão planetados de forma estática.

Então com isso nós finalizamos essa primeira parte de subir aplicação para rodar localmente. A seguir, nós vamos trabalhar para implantar na AWS tanto o front-end, como o back-end. Até a próxima.

Hospedando o frontend - Deploy da aplicacão

Anteriormente nós realizamos as configurações necessárias para rodar localmente tanto o front-end como o back-end da nossa aplicação de cadastro de pacientes. Agora nós vamos criar os ambientes na AWS para implantar esses dois projetos. O nosso time decidiu fazer isso para que seja possível validar as alterações de maneira rápida, já com a aplicação rodando na AWS, e também permitir que membros de outros times possam acompanhar o desenvolvimento do projeto.

Então agora nós vamos fazer as ações necessárias para implantar primeiramente o back-end da aplicação. Vamos abrir o terminal e acessar o diretório do projeto do back-end, então digitar o comando aluramed-api. O próximo passo é executar o comando sls deploy. Esse comando é disponibilizado pelo Serverless Framework que é a ferramenta de automação de deploy de controle de fluxo de deploy que nós estamos utilizando no projeto de back-end.

Esse comando por trás dos panos, vai realizar todas as ações necessárias para provisionar os recursos que o back-end precisa e fazer todas as configurações necessárias. Geralmente esse é um comando que demora alguns minutos para concluir as configurações, então ele pode demorar um pouco para finalizar.

Assim que o comando finaliza a execução das configurações que ele precisou executar, ele exibe todos os endpoints da nossa API, o nome das functions que ele precisou criar. Nós também podemos conferir tudo que ele configurou diretamente no console da AWS. Então vamos abrir o navegador e acessar o console da AWS.

No console da AWS, vamos acessar o serviço “CloudFormation”. É nessa área que nós podemos visualizar todas as stacks que foram criadas na nossa conta da AWS, então nós podemos procurar o projeto “alura-med-api-dev” e podemos ver na aba “Resources” todos os recursos que foram criados, as “lambdas", o “ApiGateway”, o “dynamodb”, tudo que ele precisou configurar.

Então apenas com esse comando, nós já conseguimos criar um ambiente para rodar o back-end na AWS. Agora vamos fazer as configurações necessárias para implantar um front-end, como o front-end não utiliza o Serverless Framework, nessa implantação, nós vamos precisar realizar algumas ações manuais. E além dessas ações manuais, nós vamos ao invés de utilizar um servidor web, como o Apache ou o Nginx, nós vamos utilizar um bucket para hospedar o nosso site.

Pois o front-end é uma aplicação SPA que conta apenas com arquivos estáticos que podem ser processados no navegador do usuário, dispensando a necessidade de ter um servidor web. Então, para isso o “bucket S3” atende muito bem a nossa necessidade.

Ainda aqui no console da AWS, na barra de pesquisa dos serviços vamos digitar “s3”, clicar no primeiro resultado da busca e na próxima tela nós teremos a listagem de todos os buckets que nós temos criados na nossa conta, então vamos criar um novo bucket. Vamos clicar no botão “Criar bucket”, na próxima tela nós teremos um formulário com várias informações, a primeira delas é o “nomde do bucket”, então vamos definir o nome do bucket como o host que será quando o site já estiver no ar, então “aluramed.com.br”.

Na parte da região vamos manter a configuração “us-east-1", não precisa mudar. Na seção “configurações de bloqueio de acesso público deste bucket” vamos desmarcar essa opção “bloquear todo o acesso público”. Como vamos publicar o nosso site e o “bucket s3”, nós precisamos que os arquivos estejam disponibilizados publicamente na internet para que nós consigamos acessar o site.

Então essa informação nós vamos deixar desmarcada e vamos marcar mais abaixo, nesse alerta que a AWS nos faz, ele diz que tem alguns riscos de deixar o acesso público, mas é o que nós precisamos. Então nós vamos a deixar marcado que nós temos ciência do que nós estamos fazendo.

E para concluir, vamos clicar no botão “criar bucket”. Confirmando a criação do bucket, a próxima página, nós podemos ver na listagem o nosso bucket recém criado, “aluramed.com.br”, vamos clicar nele e na próxima página vamos na aba “Propriedades”. Nós vamos ativar a configuração que está no rodapé, chamada “Hospedagem de site estático”.

Essa configuração, por padrão, vem desabilitada, então vamos editar para habilitar a opção de “Hospedagem de site estático”, vamos marcar “ativar” e teremos mais algumas informações para preencher, então nós vamos preencher “Documento de índice”, vamos informar “index.html” pois é o ponto de entrada da nossa aplicação do front-end. E para “Documento de erro” também vamos deixar como “index.html” e clicar no botão “Salvar alterações” para confirmar todas as modificações.

Agora, se nós rolarmos a página para o rodapé, nós podemos ver que temos uma URL que é a URL de acesso ao bucket, vamos clicar nela e na próxima aba nós vamos ver a página com um erro de acesso negado. Esse erro ocorre, pois, nós precisamos adicionar uma política permitindo acesso a todo o conteúdo do diretório para qualquer usuário, porque se nós não habilitamos isso apenas o dono do bucket poderia estar acessando o conteúdo.

Então vamos voltar para o console da AWS, voltar para o topo da página e clicar na aba “permissões”. Mais abaixo, nós temos a opção “Política do bucket”, e é aqui que nós vamos fazer as configurações para permitir o acesso público. Então vamos clicar em “editar” e nesse campo “Política”, eu vou colar um template com as configurações e nós só vamos fazer alguns ajustes nesse template.

Então eu vou colar esse template no editor, então nesse template nós estamos informado que estamos dando permissão pública para o bucket e para o seu conteúdo. Na parte de resource nós vamos alterar a informação, então ao invés de utilizar a arn que veio do template que eu utilizei, vamos copiar a arn que está um pouco mais acima, então copiar e alterar as informações que estão no atributo resource. Então a arn desse bucket que nós criamos agora /* para informar que queremos dar acesso para todo o conteúdo do nosso bucket.

Feito isso, vamos salvar as alterações, aguardar as alterações serem salvas. Vamos acessar novamente a URL do bucket, atualizar a página e podemos ver agora que o erro mudou de 403, ao invés de ser acesso negado, agora para 404 not found, ou seja, o arquivo HTML não existe. Isso porque nós não realizamos o upload dos arquivos do front-end. Então vamos fazer isso agora.

Vamos voltar para o terminal e acessar o diretório do projeto do front-end, Então aluramed-front, e a primeira coisa que nós vamos fazer é executar o comando para utilizar os arquivos para realizarmos a publicação na internet.

Então o comando que nós vamos escutar é o npm run build e executar o comando. Ele vai compactar arquivo, minificar, diminuir tamanho, todas as otimizações necessárias para que o arquivo seja entregue da melhor maneira possível na internet. É um comando que pode demorar alguns minutos para finalizar.

Ao finalizar a execução do comando, nós podemos ver que ele compactou, gerou os arquivos utilizados e gerou uma nova pasta aqui no nosso projeto, a pasta “build”. É o conteúdo dessa pasta que nós vamos fazer upload para o nosso bucket. Para fazer o upload, eu vou utilizar o AWS CLI, vou executar o comando aws s3 sync, vou informar qual a pasta que eu quero fazer upload, no caso a pasta “build” e informar o nome do bucket, s3://aluramed.com.br e pressionar “Enter” para inicializar o upload dos arquivos.

Geralmente esse upload não demora muito porque são poucos arquivos e eles são pequenos, não deve ter nem 4 megas de tamanho total. Então vamos aguardar a finalização do processo de upload, ele está subindo cada arquivo de cada vez, subiu os chunk, os arquivos js, então ele vai tudo otimizado para que esse arquivo seja entregue de forma rápida quando o usuário acessar. Vamos aguardar a conclusão do upload.

Todos os arquivos foram enviados para o bucket, então se nós voltarmos para o console da AWS e clicar na aba “objetos” no topo da página, vamos atualizar, dar um “carregar”. Ou melhor, deixa eu voltar para a página, Ok. Então nós podemos ver agora que todos os arquivos do nosso front-end foram enviados para o bucket.

Se voltarmos para a URL do bucket e atualizá-la, podemos ver agora que ao invés de termos o erro 404, nós podemos visualizar que o nosso site agora está sendo entregue sem nenhum problema.

Então finalizamos, criamos um ambiente para o front-end e um ambiente para o back-end. O que podemos observar é que para fazer o deploy de back-end é muito mais simples do que precisamos fazer para implantar o front-end. Em seguida, vamos adicionar um pouco de automatização para facilitar o deploy também do front-end. Nos vemos lá.

Sobre o curso Aplicações Serverless: Integrando aplicação fullstack

O curso Aplicações Serverless: Integrando aplicação fullstack possui 205 minutos de vídeos, em um total de 52 atividades. Gostou? Conheça nossos outros cursos de AWS em DevOps, ou leia nossos artigos de DevOps.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda AWS acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas