В данном модуле вы с помощью 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. Выберите «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» (Создать) выберите «Cognito User Pool Authorizer» (Средство авторизации пула пользователей Cognito).

    3. Выберите регион, для которого вы создали пул пользователей Cognito при прохождения модуля 2.

    4. Выберите пул пользователей WildRydes Cognito из раскрывающегося списка.

    5. Введите WildRydes в качестве имени средства авторизации.

    6. Убедитесь, что для параметра «Identity token source» (Источник маркера идентификации) установлено значение «Authorization» (Авторизация)..

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

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

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

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

    3. Скопируйте маркер авторизации из уведомления на странице /ride.htmlи вставьте его в поле «Identity token» (Маркер идентификации) на вкладке консоли API Gateway.

    4. Выберите «Test» (Тест) и убедитесь, что отображаются утверждения для вашего пользователя.

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

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


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

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

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

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

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

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

    7. Выберите POST из нового раскрывающегося списка, который появится, а затем установите флажок.

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

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

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

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

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

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

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

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

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

  • Шаг 4. Включение CORS

    Современные браузеры блокируют запросы HTTP от скриптов со страниц одного домена к API, размещенным в другом домене. Исключение составляет тот случай, когда они явно разрешены в заголовке ответа при совместном использовании ресурсов между разными источниками (CORS). На консоли Amazon API Gateway можно добавить нужную конфигурацию для отправки соответствующих заголовков CORS в меню действий при выбранном ресурсе. Нужно включить CORS для POST и OPTIONS в ресурсе /requestunicorn. Для упрощения можно установить значение заголовка Access-Control-Allow-Origin «*», но в рабочем приложении следует всегда явно указывать разрешенные домены из белого списка для защиты от атак с применением межсайтовой подделки запроса (CSRF).

    Для получения дополнительной информации о конфигурациях CORS в целом см. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS.


    1. На средней панели консоли Amazon API Gateway выберите ресурс /ride .

    2. Выберите в раскрывающемся списке «Actions» (Действия) «Enable CORS» (Включить CORS).

    3. Используя настройки по умолчанию, выберите «Enable CORS and replace existing CORS headers» (Включить CORS и заменить существующие заголовки CORS).

    4. Выберите «Yes, replace existing values» (Да, заменить существующие значения).

    5. Подождите, пока возле всех шагов появятся отметки.

  • Шаг 5. Развертывание 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-адрес вызова). Он понадобится в следующем разделе.

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

    Обновите файл /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. Выберите «Next» (Далее), не изменяя значения по умолчанию в разделах «Set permissions» (Задать разрешения) и «Set properties» (Задать свойства) .

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

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

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


    1. Откройте /ride.html в домене веб-сайта.

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

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

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