Neste módulo, você usará o Amazon API Gateway para expor a função do Lambda que você criou no módulo anterior como uma RESTful API. Esta API estará acessível na Internet pública. Ela estará protegida usando o grupo de usuários do Amazon Cognito que você criou no módulo anterior. Usando essa configuração, você transformará seu site hospedado estaticamente em um aplicativo web dinâmico adicionando JavaScript do lado do cliente que faz as ligações AJAX para as APIs expostas.

Serverless_Web_App_LP_assets-05

O diagrama acima mostra como o componente API Gateway que você construirá neste módulo se integra com os componentes existentes que você criou anteriormente. Os itens em cinza são peças que você já implementou em etapas anteriores.

O site estático que você implantou no primeiro módulo já possui uma página configurada para interagir com a API que você construirá neste módulo. A página /ride.html tem uma interface baseada em mapa simples para solicitar um unicorn ride. Após autenticar usando a página /signin.html, os usuários podem selecionar o local de coleta clicando em um ponto no mapa e, em seguida, solicitando “ a ride”, escolhendo o botão "Request Unicorn" no canto superior direito.

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

Tempo para conclusão do módulo: 15 minutos

Serviços usados: o Amazon API Gateway e o AWS Lambda


Siga as instruções abaixo para criar sua REST API. Clique em cada número de etapa para expandir a seção.

  • Etapa 1. Criar uma nova REST API


    1. No Console de Gerenciamento da AWS, clique em Services e, em seguida, selecione API Gateway em serviços de aplicativos.

    2. Escolha Create API.

    3. Selecione New API e insira WildRydes para API Name.

    4. Mantenha Edge optimized selecionado na lista suspensa Endpoint Type. Nota: Edge optimized é a melhor opção 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.

    5. Escolha Create API

  • Etapa 2. Criar um autorizador de grupos de usuários do Cognito

    O Amazon API Gateway pode usar os tokens do JWT retornados pelos 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ário que você criou no Módulo 2.

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


    1. Em sua API recém-criada, escolha Authorizers.

    2. Escolha Create New Authorizer.

    3. Insira WildRydes para Authorizer name.

    4. Selecione Cognito como tipo.

    5. Na lista suspensa Region em Cognito User Pool, 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).

    6. Insira WildRydes (ou o nome que você deu ao seu grupo de usuários) na entrada de Cognito User Pool.

    7. Insira Authorization para Token Source.

    8. Escolha Create.

    Verify your authorizer configuration

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

    2. 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 novamente para /ride.html.

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

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

    5. Clique em Test na parte superior do cartão do autorizador.

    6. Cole o token de autorização no campo Authorization Token no diálogo em pop-up.

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

  • Etapa 3. Criar um novo recurso e método

    Crie um novo recurso chamado /ride dentro da API. Em seguida, crie um método POST para esse recurso e configure-o para usar uma integração de proxy do Lambda suportada pela função RequestUnicorn que você criou na primeira etapa deste módulo.


    1. No navegador esquerdo, clique em Resources em sua API WildRydes .

    2. No menu suspenso Actions, selecione Create Resource.

    3. Insira ride como o Resource Name.

    4. Verifique se Resource Path está configurado como ride.

    5. Selecione Enable API Gateway CORS para o recurso.

    6. Clique em Create Resource.

    7. Com o recurso /ride recém-criado selecionado, na lista suspensa Action, selecione Create Method.

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

    9. Selecione Lambda Function para o tipo de integração.

    10. Marque a caixa para Use Lambda Proxy integration.

    11. Selecione a região que está usando para a Lambda Region.

    12. Insira o nome da função que você criou no módulo anterior, RequestUnicorn, para Lambda Function.

    13. Escolha Save. Observe que, se você obtém um erro dizendo que a função não existe, verifique se a região selecionada corresponde a que você usou no módulo anterior.

    14. Quando solicitado para oferecer permissão ao Amazon API Gateway para chamar a função, escolha OK.

    15. Escolha o cartão Method Request.

    16. Escolha o ícone de lápis próximo a Authorization.

    17. Selecione o autorizador do grupo de usuário WildRydes do Cognito na lista suspensa e clique no ícone de marca de verificação.

  • Etapa 4. Implantar sua API

    No console do Amazon API Gateway, escolha Actions, Deploy API. Você será solicitado a criar uma nova etapa. Você pode usar prod para o nome do estágio.


    1. Na lista suspensa Actions, selecione Deploy API.

    2. Selecione [New Stage] na lista suspensa de Deployment stage.

    3. Insira prod para Stage Name.

    4. Escolha Deploy.

    5. Observe o Invoke URL. Você o usará na próxima seção.

  • Etapa 5. Atualizar o site Config

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


    Caso tenha concluído a etapa 2 manualmente, você poderá editar o arquivo config.js salvo localmente. Caso tenha usado o modelo do AWS CloudFormation, primeiro você deverá fazer download do arquivo config.js do seu bucket do S3. Para isso, visite /js/config.js no URL base do seu site, escolha File e, em seguida, escolha Save Page As no seu navegador.

    1. Abra o arquivo config.js em um editor de texto.

    2. Atualize a configuração do invokeUrl na chave api em seu arquivo config.js. Defina o valor para o Invoke URL para a etapa de implantação criada na seção anterior.

      Um exemplo de um arquivo config.js concluído pode ser visto abaixo. Observe que os valores reais em 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,

        }

    };

    1. Salve suas alterações localmente.

    2. No Console de Gerenciamento da AWS, selecione Services e, em seguida, selecione S3 em Storage.

    3. Navegue até o bucket do site e procure o prefixo de chaves js.

    4. Escolha Upload.

    5. Escolha Add files, selecione a cópia local do config.js e clique em Next.

    6. Escolha Next sem alterar nenhum padrão nas seções Set permissions e Set properties.

    7. Escolha Upload na seção Review.

  • Etapa 5. Validar sua implementação

    Observação: é possível que veja um atraso entre a atualização do arquivo config.js no seu bucket do S3 e quando o conteúdo atualizado está visível em seu navegador. Você deve apagar o cache do navegador antes de executar as seguintes etapas.


    1. Visite /ride.html no domínio do seu site.

    2. Se você for redirecionado para a página de login, faça login com o usuário criado no módulo anterior.

    3. Após o mapa ser carregado, clique em qualquer lugar no mapa para definir um local de coleta.

    4. Escolha Request Unicorn. Você deve ver uma notificação na barra lateral direita de que um unicorn está a caminho e, em seguida, ver um ícone de unicorn passar para o local de coleta.