В данном модуле вы с помощью Amazon API Gateway откроете функцию Lambda, созданную в предыдущем модуле как API RESTful. Этот API будет доступен в Интернете. Он будет защищен с помощью пула пользователей Amazon Cognito, который вы создали в предыдущем модуле. Используя данную конфигурацию, вы превратите свой статически размещенный веб-сайт в динамическое интернет-приложение, добавив клиентский JavaScript для вызовов AJAX к открытым API.

Serverless_Web_App_LP_assets-05

На схеме выше показано, как компонент API Gateway, созданный вами в данном модуле, интегрируется в существующие компоненты, созданные ранее. Серым выделены элементы, которые вы уже внедрили при выполнении предыдущих шагов.

Статический веб-сайт, развернутый вами в первом модуле, уже содержит страницу, настроенную для взаимодействия с API, который вы создали в данном модуле. Страница на /ride.html имеет простой интерфейс на основе карты для запроса поездки на единороге. После аутентификации с помощью страницы /signin.html ваши пользователи смогут выбрать удобное расположение, щелкнув на карте и отправив запрос на поездку нажатием кнопки «Request Unicorn» (Запрос единорога) в правом верхнем углу.

В этом модуле основное внимание уделяется шагам, необходимым для создания облачных компонентов API, но если вам интересно, как работает код браузера, вызывающий этот API, просмотрите файл ride.js веб-сайта. В данном случае удаленные запросы в приложении выполняются с помощью метода jQuery ajax().

Время на выполнение модуля: 15 минут

Используемые сервисы: Amazon API Gateway и AWS Lambda


Для создания API REST выполните пошаговые инструкции, изложенные ниже. Щелкните номер шага, чтобы развернуть соответствующий раздел.

  • Шаг 1. Создание нового API REST


    1. Щелкните на Консоли управления AWS «Services» (Сервисы) и выберите API Gateway в разделе «Application Services» (Сервисы приложений).

    2. Выберите «Create API» (Создать API).

    3. Выберите «New API» (Новый API) и введите WildRydes в поле «API Name» (Имя API).

    4. Оставьте выбранным «Edge optimized» (Оптимизирован для периферийного местоположения) в раскрывающемся списке «Endpoint Type» (Тип адреса). Примечание. Тип «Edge optimized» лучше всего подходит для доступа к публичным сервисам через Интернет. Региональные адреса используются, как правило, для API, доступ к которым осуществляется преимущественно из одного и того же региона AWS.

    5. Выберите «Create API» (Создать API).

  • Шаг 2. Создание средства авторизации для пулов пользователей Cognito

    Amazon API Gateway может использовать маркеры JWT, возвращаемые пулами пользователей Cognito, для аутентификации вызовов API. При выполнении данного шага вы настроите средство авторизации API для применения пула пользователей, созданного во время прохождения модуля 2.

    Создайте на консоли Amazon API Gateway новое средство авторизации пулов пользователей Cognito для своего API. Настройте его, указав сведения о пуле пользователей, созданном при прохождении предыдущего модуля. Можно потестировать конфигурацию на консоли. Для этого скопируйте и вставьте маркер авторизации, предоставленный вам после входа с помощью страницы /signin.html текущего веб-сайта.


    1. Выберите в только что созданном API «Authorizers» (Средства авторизации).

    2. Выберите «Create New Authorizer» (Создать новое средство авторизации).

    3. Введите WildRydes в поле «Authorizer name» (Имя средства авторизации).

    4. В качестве типа выберите Cognito.

    5. Из раскрывающегося списка «Region» (Регион) в пункте «Cognito User Pool» (Пул пользователей Cognito) выберите регион, в котором был создан пул пользователей Cognito в модуле 2 (по умолчанию должен быть выбран текущий регион).

    6. Введите WildRydes (или иное имя, присвоенное пулу пользователей) в качестве входных данных в пункте «Cognito User Pool» (Пул пользователей Cognito).

    7. Введите Authorization в поле «Token Source»(Источник токена).

    8. Выберите «Create» (Создать).

    Проверка конфигурации средства авторизации

    1. Откройте новую вкладку браузера и перейдите на страницу /ride.html в домене веб-сайта.

    2. Если вы будете перенаправлены на страницу входа, войдите с помощью учетных данных пользователя, созданного при прохождении последнего модуля. После этого вы вернетесь на страницу/ride.html.

    3. Скопируйте токен авторизации из уведомления на странице /ride.html.

    4. Вернитесь на предыдущую вкладку, где только что было создано средство авторизации.

    5. Нажмите «Test» (Тест) в нижней части карточки для средства авторизации.

    6. Вставьте токен авторизации в поле «Authorization Token» (Токен авторизации) во всплывающем диалоговом окне.

    7. Нажмите кнопку «Test» (Тест) и убедитесь, что для вашего пользователя возвращается код 200 и отображаются утверждения.

  • Шаг 3. Создание нового ресурса и метода

    Создайте в своем API новый ресурс под названием /ride. Затем создайте метод POST для этого ресурса и настройте в нем использование интеграции прокси Lambda с поддержкой функции RequestUnicorn, которую вы создали при выполнении первого шага данного модуля.


    1. На панели навигации слева нажмите «Resources» (Ресурсы) в API WildRydes.

    2. Из раскрывающегося списка «Actions» (Действия) выберите «Create Resource» (Создать ресурсы).

    3. Введите ride в качестве «Resource Name» (Название ресурса).

    4. Убедитесь, что для параметра «Resource Path» (Путь ресурса) установлено значение ride.

    5. Выберите «Enable API Gateway CORS» (Включить API Gateway CORS) для ресурса.

    6. Нажмите «Create Resource» (Создать ресурс).

    7. При выбранном вновь созданном ресурсе /ride из раскрывающегося списка «Action» (Действие) выберите «Create Method» (Создать метод).

    8. Выберите «POST» в появившемся новом раскрывающемся списке, а затем установите рядом галочку.

    9. Выберите тип интеграции «Lambda Function» (Функция Lambda).

    10. Установите флажок «Use Lambda Proxy integration» (Использовать интеграцию прокси Lambda).

    11. Выберите используемый «Lambda Region» (Регион Lambda).

    12. Введите имя функции, которую вы создали в предыдущем модуле (RequestUnicorn), в качестве значения Lambda Function (Функция Lambda).

    13. Выберите «Save» (Сохранить). Если появится ошибка с сообщением о том, что функция не существует, убедитесь, что выбранный вами регион соответствует региону, который вы использовали в предыдущем модуле.

    14. Если появится запрос, разрешить ли Amazon API Gateway вызывать вашу функцию, выберите «OK».

    15. Выберите карточку «Method Request» (Запрос метода).

    16. Выберите значок карандаша рядом с пунктом «Authorization» (Авторизация).

    17. Выберите средство авторизации пула пользователей WildRydes Cognito из раскрывающегося списка и щелкните значок метки.

  • Шаг 4. Развертывание API

    На консоли Amazon API Gateway выберите «Actions» (Действия), «Deploy API» (Развернуть API). Вам будет предложено создать новый этап. Можно использовать имя этапа prod.


    1. Выберите в раскрывающемся списке «Actions» (Действия) «Deploy API» (Развернуть API).

    2. Выберите «[New Stage]» (Новый этап) в раскрывающемся списке «Deployment stage» (Этап развертывания).

    3. Введите prod в качестве «Stage Name» (Имя этапа).

    4. Выберите «Deploy» (Развернуть).

    5. Запишите «Invoke URL» (URL-адрес вызова). Он понадобится в следующем разделе.

  • Шаг 5. Обновление конфигурации веб-сайта

    Обновите файл /js/config.js при развертывании веб-сайта, включив URL-адрес вызова только что созданного этапа. Нужно скопировать URL-адрес вызова непосредственно из верхней части страницы редактора этапа на консоли Amazon API Gateway и вставить в ключ _config.api.invokeUrl файла /js/config.js ваших сайтов. При обновлении файла конфигурации обязательно убедитесь, что он по-прежнему содержит обновления, внесенные вами в предыдущем модуле для пула пользователей Cognito.


    Если вы завершили модуль 2 вручную, можно отредактировать файл config.js, который был сохранен локально. Если вы использовали шаблон AWS CloudFormation, нужно сначала загрузить файл config.js из своей корзины S3. Для этого перейдите на страницу /js/config.js под основным URL-адресом веб-сайта и выберите в браузере «File» (Файл), а затем «Save Page As» (Сохранить страницу как).

    1. Откройте файл config.js в текстовом редакторе.

    2. Обновите настройку invokeUrl в ключе api файла config.js. Установите значение «Invoke URL» (URL-адрес вызова) для этапа развертывания, который вы создали в предыдущем разделе.

      Ниже приведен пример полного файла config.js. Обратите внимание, что фактические значения в вашем файле будут другими.

    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. Сохраните изменения локально.

    2. Выберите на Консоли управления AWS «Services» (Сервисы), затем «S3» в разделе «Storage» (Хранилище).

    3. Перейдите в корзину веб-сайта и затем к префиксу ключа js.

    4. Выберите «Upload» (Загрузить).

    5. Выберите «Add files» (Добавить файлы), затем укажите локальную копию файла config.js и щелкните «Next» (Далее).

    6. В разделах «Set permissions» (Установить разрешения) и «Set properties» (Установить свойства) выберите «Next» без изменения значений по умолчанию.

    7. Выберите «Upload» (Загрузить) в разделе «Review» (Обзор).

  • Шаг 5. Проверка внедрения

    Примечание. Возможна задержка между обновлением файла config.js в вашей корзине S3 и временем обновления контента в браузере. Перед выполнением следующих шагов нужно очистить кэш браузера.


    1. Перейдите на страницу /ride.html в домене веб-сайта.

    2. Если вы будете перенаправлены на страницу входа, войдите с помощью учетных данных пользователя, созданного при прохождении предыдущего модуля.

    3. После загрузки карты щелкните в любой ее точке, чтобы задать удобное расположение.

    4. Выберите «Request Unicorn» (Запрос единорога). На правой боковой панели должно появиться уведомление о том, что единорог находится в пути, а затем – изображение единорога, летящего к указанному вами расположению.