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.

Serverless_Web_App_LP_assets-05

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, o aplicativo usa o método ajax() do jQuery para fazer a solicitação remota.

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

Serviços usados: Amazon API Gateway e AWS Lambda


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

  • Etapa 1. Criar uma API REST


    1. No Console de Gerenciamento da AWS, clique em Services (Serviços) e selecione API Gateway em Application Services (Serviços de aplicativo).

    2. Selecione Create API (Criar API).

    3. Selecione New API (Nova API) e insira WildRydes para o API Name (Nome da API).

    4. Mantenha a opção Edge optimized (Otimizada para fronteiras) selecionada na lista suspensa Endpoint Type (Tipo de endpoint). Observação: a opção "otimizada para fronteiras" é 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.

    5. Selecione Create AP (Criar API).

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


    1. Na sua API recém-criada, selecione Authorizers (Autorizadores).

    2. Selecione Create New Authorizer (Criar autorizador).

    3. Insira WildRydes para o Authorizer name (Nome do autorizador).

    4. Selecione Cognito como tipo.

    5. Na lista vertical Region (Região) em Cognito User Pool (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).

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

    7. Insira Authorization (Autorização) para a Token Source (Origem do token).

    8. Selecione Create (Criar).

    Verificar a configuração do autorizador

    1. Abra uma nova guia do navegador e acesse /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 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 (Testar) na parte superior do cartão do autorizador.

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

    7. Clique no botão Test (Testar) 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 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.


    1. No painel de navegação à esquerda, clique em Resources (Recursos) na API WildRydes.

    2. No menu vertical Actions (Ações), selecione Create Resource (Criar recurso).

    3. Insira ride (carona) como o Resource Name (Nome do recurso).

    4. Verifique se o Resource Path (Caminho do recurso) está configurado como ride (carona).

    5. Selecione Enable API Gateway CORS (Habilitar CORS do API Gateway) para o recurso.

    6. Clique em Create Resource (Criar recurso).

    7. Com o recurso /ride recém-criado selecionado, na lista vertical Action (Ação), selecione Create Method (Criar método).

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

    9. Selecione Lambda Function (Função do Lambda) como tipo de integração.

    10. Marque a caixa Use Lambda Proxy integration (Usar integração de proxy do Lambda).

    11. Selecione a região que está usando para Lambda Region (Região do Lambda).

    12. Insira o nome da função criada no módulo anterior, RequestUnicorn, para Lambda Function (Função do Lambda).

    13. Selecione Save (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.

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

    15. Escolha o cartão Method Request (Solicitação de método).

    16. Selecione o ícone de lápis ao lado de Authorization (Autorização).

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

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


    1. Na lista vertical Actions (Ações), selecione Deploy API (Implantar API).

    2. Selecione [New Stage] (Novo estágio) na lista vertical Deployment stage (Estágio de implantação).

    3. Insira prod como Stage Name (Nome do estágio).

    4. Selecione Deploy (Implantar).

    5. Anote o valor Invoke URL (URL de invocação). Você vai usá-lo na próxima seção.

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


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

    2. Atualize a configuração invokeUrl na chave api no arquivo config.js. Defina o valor para o Invoke URL (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, 
    
        } 
    
    };
    1. Salve o arquivo modificado e envie-o para seu repositório Git para que ele seja implantado automaticamente no console do Amplify.

    $ git push
  • Etapa 5. 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.


    1. Acesse /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. Depois que o mapa for carregado, clique em qualquer lugar dele para definir um local de partida.

    4. Selecione Request Unicorn (Solicitar unicórnio). 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.