Conceitos básicos da AWS

Crie uma aplicação Web sem servidor

com o AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB e Amazon Cognito

Crie uma aplicação Web sem servidor

Módulo 4: Implantar uma API RESTful

Você usará o Amazon API Gateway para expor a função do Lambda criada no módulo anterior como uma API RESTful.

Visão geral

Neste módulo, você usará o Amazon API Gateway para expor a função do Lambda criada no módulo anterior como uma API RESTful. Essa API será acessível pela Internet pública. Ela será protegida usando o grupo de usuários do Amazon Cognito criado no módulo anterior. Ao usar essa configuração, você transformará seu site hospedado de maneira estática em um aplicativo web dinâmico adicionando JavaScript do lado do cliente que faz chamadas AJAX para as APIs expostas.

Visão geral da arquitetura

Serverless_Web_App_LP_assets-03

O diagrama acima mostra como o componente do API Gateway que será criado neste módulo se integra aos componentes existentes criados anteriormente. Os itens desativados são as partes já implementadas em etapas anteriores.

O site estático implantado no primeiro módulo já tem uma página configurada para interagir com a API criada neste módulo. A página em /ride.html tem uma interface simples baseada em mapa para solicitar uma carona de unicórnio. Depois de fazer a autenticação usando a página /signin.html, os usuários poderão selecionar o local de partida clicando em um ponto do mapa e solicitando uma carona ao clicar no botão "Request Unicorn" (Solicitar unicórnio) no canto superior direito.

Este módulo se concentrará nas etapas necessárias para criar os componentes de nuvem da API, mas se estiver interessado em como o código do navegador funciona para chamar essa API, você poderá inspecionar o arquivo ride.js do site. Neste caso, a aplicação usa o método ajax() do jQuery para fazer a solicitação remota.

 Tempo para a conclusão

15 minutos

 Serviços usados

Implementação

  • Criar uma nova API REST

    a. No Console de Gerenciamento da AWS, clique em Serviço e selecione API Gateway em Serviços de aplicação.
    b. Escolha Criar API.
    c. Selecione Nova API e insira WildRydes como o Nome da API.
    d. Mantenha a opção Otimizada para borda selecionada na lista suspensa Tipo de endpoint. Observação: a opção otimizada para borda é a melhor para serviços públicos acessados da Internet. Normalmente, os endpoints regionais são usados para APIs acessadas principalmente de dentro da mesma região da AWS.
    e. Escolha Criar API

  • Criar um autorizador de grupos de usuários do Cognito

    O Amazon API Gateway pode usar os tokens JWT retornados por grupos de usuários do Cognito para autenticar chamadas de API. Nesta etapa, você configurará um autorizador para sua API para usar o grupo de usuários criado no Módulo 2.

    No console do Amazon API Gateway, crie um novo autorizador de grupos de usuários do Cognito para sua API. Configure-a com os detalhes do grupo de usuários criado no módulo anterior. Você pode testar a configuração no console copiando e colando o token de autorização apresentado a você após o login feito pela página /signin.html do seu site atual.

    a. Em sua API recém-criada, selecione Autorizadores.

    b. Selecione Criar autorizador.

    c. Insira WildRydes Nome do autorizador.

    d. Selecione Cognito como tipo.

    e. Na lista suspensa Região em Grupo de usuários do Cognito, selecione a região onde o grupo de usuários do Cognito foi criado no módulo 2 (por padrão, a região atual deve estar selecionada).

    f. Insira WildRydes (ou o nome que você deu ao seu grupo de usuários) na entrada Grupo de usuários do Cognito.

    g. Insira Autorização para a Origem do token.

    h. Selecione Criar.


    Verificar a configuração do autorizador

    j. Abra uma nova guia do navegador e acesse /ride.html no domínio do seu site.

    k. Se você for redirecionado para a página de login, faça login com o usuário criado no último módulo. Você será redirecionado para /ride.html.

    l. Copie o token de autorização da notificação em /ride.html.

    m. Volte à guia anterior, onde você concluiu a criação do autorizador

    n. Clique em Testar na parte superior do cartão do autorizador.

    o. Cole o token de autorização no campo Token de autorização na caixa de diálogo pop-up.

    Clique no botão Testar e verifique se o código de resposta é 200 e se as reivindicações do seu usuário são exibidas.

  • Criar um novo recurso e método

    Crie um recurso chamado /ride na sua API. Então, crie um método POST para esse recurso e configure-o para usar uma integração de proxy do Lambda baseada na função RequestUnicorn criada na primeira etapa deste módulo.

    a. No painel de navegação à esquerda, clique em Recursos na API WildRydes.

    b. No menu suspenso Ações, selecione Criar recurso.

    c. Insira ride como o Nome do recurso.

    d. Verifique se o Caminho do recurso está configurado como ride.

    e. Selecione Habilitar CORS do API Gateway para o recurso.

    f. Clique em Criar recurso.

    g. Com o recurso /ride recém-criado selecionado, na lista suspensa Ação, selecione Criar método.

    h. Selecione POST na nova lista suspensa que aparecerá e clique na marca de seleção.

    i. Selecione Função do Lambda como tipo de integração.

    j. Marque a caixa Usar integração de proxy do Lambda.

    k. Selecione a região que está usando para a Região do Lambda.

    l. Insira o nome da função criada no módulo anterior, RequestUnicorn, para a Função do Lambda.

    m. Escolha Salvar. Se você receber um erro informando que a função não existe, verifique se a região selecionada corresponde à que você usou no módulo anterior.

    n. Quando for solicitado a conceder permissão para o Amazon API Gateway invocar sua função, selecione OK.

    o. Escolha o cartão Solicitação de método.

    Selecione o ícone de lápis ao lado de Autorização.

    q. Selecione o autorizador do grupo de usuários WildRydes do Cognito na lista vertical e clique no ícone de marca de seleção.

  • Implantar sua API

    No console do Amazon API Gateway, selecione Actions (Ações), Deploy API (Implantar API). Será solicitado que você crie um estágio. Você pode usar prod como nome do estágio.

    a. Na lista suspensa Ações, selecione Implantar API.
    b. Selecione [Novo estágio na lista suspensa Estágio de implantação.
    c. Insira prod como o Nome do estágio.
    d. Selecione Implantar.
    e. Anote o URL de invocação. Você vai usá-lo na próxima seção.

  • Atualizar a configuração do site

    Atualize o arquivo /js/config.js na implantação do site para incluir o URL de invocação do estágio que você acabou de criar. Você deve copiar o URL de invocação diretamente da parte superior da página do editor de estágio no console do Amazon API Gateway e colá-lo no chave _config.api.invokeUrl do arquivo /js/config.js dos seus sites. Ao atualizar o arquivo de configuração, certifique-se de que ele ainda contenha as atualizações que você fez no módulo anterior para o grupo de usuários do Cognito.

    a. Abra o arquivo js.config em um editor de texto.
    b. Atualize a configuração invokeUrl na chave api no arquivo config.js. Defina o valor para o URL de invocação para o estágio de implantação criado na seção anterior.

    Um exemplo de um arquivo config.js concluído pode ser visto abaixo. Os valores reais do seu arquivo serão diferentes.

    window._config = {
    
        cognito: {
    
            userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         
    
            userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
    
            region: 'us-west-2' // e.g. us-east-2 
    
        }, 
    
        api: { 
    
            invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 
    
        } 
    
    };

    c. Salve o arquivo modificado e envie-o para seu repositório git para que ele seja implantado automaticamente no console do Amplify.

    $ git push
    
  • Validar sua implementação

    Observação: é possível que você veja um atraso entre o momento em que é feita a atualização do arquivo config.js no bucket do S3 e o momento em que o conteúdo atualizado fica visível no navegador. Você também deve limpar o cache do navegador antes de executar as etapas a seguir.

    a. Acesse /ride.html no domínio do seu site.
    b. Se você for redirecionado para a página de login, faça login com o usuário criado no módulo anterior.
    c. Depois que o mapa for carregado, clique em qualquer lugar dele para definir um local de partida.
    d. Selecione Solicitar Unicorn. Você verá uma notificação na barra lateral direita informando que um unicórnio está a caminho e, então, verá o ícone de um unicórnio voando até o local de partida.

Este módulo foi útil?

Agradecemos a sua atenção
Gostaríamos de saber do que você gostou.
Fechar
Desculpe por ter desapontado
Encontrou algo desatualizado, confuso ou incorreto? Envie seus comentários para nos ajudar a melhorar este tutorial.
Fechar

Encerrar os recursos