Проекты на AWS

Создание бессерверного веб-приложения

посредством AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB и Amazon Cognito

Serverless_Web_App_LP_assets-15
Serverless_Web_App_LP_assets-22

Введение

Progression-Bar-07

Размещение статического веб‑сайта

Progression-Bar-08

Управление пользователями

Progression-Bar-09

Создание серверной части для бессерверного приложения

Progression-Bar-16

Развертывание RESTful API

Progression-Bar-11

Удаление ресурсов

Модуль 4. RESTful API

В этом модуле вы будете использовать Amazon API Gateway для предоставления API RESTful с помощью функции Lambda, которую вы создали в предыдущем модуле. К этому 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

    Создание нового API REST

    1. В Консоли управления AWS в разделе сервисов приложений выберите Services (Сервисы), а затем – API Gateway.

    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

    Создание средства авторизации пулов пользователей 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. Нажмите кнопку Создать.

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

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

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

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

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

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

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

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

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

    Создание нового ресурса и метода

    Создайте новый ресурс под именем /ride в вашем API. Затем создайте метод 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. Нажмите Сохранить. Обратите внимание, что при возникновении ошибки, связанной с отсутствием функции, необходимо убедиться, что выбранный регион совпадает с регионом, который использовался в предыдущем модуле.

    14. При появлении запроса на предоставление Amazon API Gateway разрешения на вызов функции нажмите OK (ОК).

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

    16. Нажмите значок карандаша рядом с пунктом Authorization (Авторизация).

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

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

    Развертывание собственного API

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

    1. Из раскрывающегося списка Actions (Действия) выберите пункт Deploy API (Развертывание API).

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

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

    4. Щелкните Развертывание.

    5. Запишите URL вызова. Он пригодится при выполнении задания из следующего раздела.

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

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

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

    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. Сохраните измененный файл и поместите его в репозиторий Git, чтобы выполнить его автоматическое развертывание на консоли Amplify.

    $ git push

  • Шаг 6. Проверка реализации

    Проверка реализации

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

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

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

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

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

Далее: удаление ресурсов