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 digite WildRydes para o API Name.

    4. 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. Na lista suspensa Create, selecione Cognito User Pool Authorizer.

    3. Selecione a região onde você criou o grupo de usuário Cognito no módulo 2.

    4. Selecione WildRydes para o grupo de usuário Cognito na lista suspensa.

    5. Digite WildRydes para o nome do autorizador.

    6. Certifique-se de que a Identity token source está configurada para Autorização.

    7. Escolha Create.

    Verify your authorizer configuration

    1. Abra uma nova guia do navegador e acesse /ride.html no domínio do 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 no /ride.htmle cole-o no campo Identity token no console do API Gateway.

    4. Escolha Test e verifique se você verá as reivindicações para o usuário.

  • 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. Digite ride como o Resource Name

    4. Certifique-se de que o Resource Path está configurado como ride.

    5. Clique em Create Resource.

    6. Com o recém-criado recurso /ride selecionado, a partir do menu suspenso Action, selecione Create Method.

    7. Selecione POST na nova lista suspensa que aparece e, em seguida, clique na marca de seleção.

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

    9. Marque a caixa para Use Lambda Proxy integration.

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

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

    12. 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.

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

    14. Escolha o cartão Method Request.

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

    16. 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. Ativar CORS

    Os navegadores web modernos impedem pedidos HTTP de scripts em páginas hospedadas em um domínio para APIs hospedadas em outro domínio, a menos que a API forneça cabeçalhos de resposta de compartilhamento de recursos de origem cruzada (CORS) que os permita explicitamente. No console do Amazon API Gateway, você pode adicionar a configuração necessária para enviar cabeçalhos de CORS apropriados no menu de ação quando você tem um recurso selecionado. Você deve ativar o CORS para POST e OPTIONS em seu recurso /requestunicorn. Para simplificar, você pode definir o valor do cabeçalho Access-Control-Allow-Origin para '*', mas, em um aplicativo de produção, você deve sempre listar explicitamente os domínios autorizados para mitigar ataques cross-site request forgery (CSRF).

    Para obter mais informações sobre as configurações de CORS em geral, consulte https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS


    1. No console do Amazon API Gateway, no painel no meio, selecione /ride como recurso.

    2. Na lista suspensa Actions, selecione Enable CORS.

    3. Use as configurações padrão e escolha Enable CORS and replace existing CORS headers.

    4. Escolha Yes, replace existing values.

    5. Aguarde que uma marca de seleção apareça próxima a todas as etapas.

  • Etapa 5. 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. Digite prod para o Stage Name.

    4. Escolha Deploy.

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

  • Etapa 6. 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.


    Se você concluiu o módulo 2 manualmente, você pode editar o arquivo config.js salvo localmente. Se você tiver usado o modelo do AWS CloudFormation, você deve primeiro fazer o download do arquivo config.js do bucket do S3. Para fazer isso, acesse /js/config.js sob o URL base para o seu site e escolha File e, em seguida, escolha Save Page As a partir de 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 completo config.js está incluído 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, em seguida, navegue para o prefixo de chave js .

    4. Escolha Upload.

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

    6. Escolha Next sem alterar os padrões por meio das seções Set permissions e Set properties .

    7. Escolha Upload na seção Análise .

  • Etapa 7. 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. Acesse /ride.html no domínio do 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.