Блог Amazon Web Services

Создание масштабируемого бессерверного (serverless) веб-приложения с определением местоположения – часть 1

Оригинал статьи: ссылка (James Beswick, Senior Developer Advocate)

Одной из крупных областей применения бессерверных вычислений являются веб-приложения. С помощью фреймворков для одностраничных приложений (Single-Page Application, SPA) вы можете создавать адаптивные фронтенд-приложения. С помощью бессерверного бэкенда такие приложения могут масштабироваться до сотен тысяч пользователей, не требуя от вас управления какими-либо серверами.

В этой серии из трёх статей я продемонстрирую пример создания бессерверного веб-приложения. Оно включает в себя аутентификацию, получение обновлений в реальном времени, а также функции, связанные с определением местоположения. Я рассмотрю функциональность, архитектуру и подходы к проектированию, которые необходимо принять при разработке. Весь исходный код фронтенда и бэкенда расположен в репозитории. К концу этой серии вы сможете использовать соответствующие паттерны и примеры в своих веб-приложениях.

В серию войдут следующие статьи:

  • Часть 1: Установка фронтенда и бэкенда; ознакомление с тем, как веб-приложения SPA взаимодействуют с бессерверными бэкендами.
  • Часть 2: Обзор архитектуры бэкенда, Amazon API Gateway HTTP API, а также внедрение гео-хеширования (geohashing).
  • Часть 3: Рассмотрение управления данными в бэкенде и их агрегирования в Amazon DynamoDB, а также развёртывание приложения в производственной среде.

Исходный код использует AWS Serverless Application Model (SAM), что позволяет упростить развертывание в вашем аккаунте AWS. Ресурсы, создаваемые в этой статье, входят в Уровень бесплатного пользования AWS, однако могут привести к расходам при использовании в большем количестве, чем требуется для разработки и тестирования.

Чтобы установить пример, скачайте его из репозитория GitHub и следуйте инструкциям в файле README.md.

Представляем «Ask Around Me» – приложение для поиска ответов от местных пользователей

Ask Around Me – это веб-приложение, которое позволяет вам задавать вопросы сообществу местных пользователей. Оно предназначено для использования в веб-браузере смартфона.

Ask Around Me front end application

Фронтенд использует Auth0 для аутентификации, поддерживается вход через социальные сети с использованием сторонних провайдеров идентификации (identity provider). После входа пользователя приложение отображает карту с его местоположением:

No questions in your area

Пользователи могут задавать вопросы своим соседям. Вопросы могут быть связанными с рейтингом («Насколько расслабляющая атмосфера в этом парке?») или местоположением («Где найти лучший кофе?»).

Ask a new question

Вопросы отправляются всем пользователям в радиусе 5 миль (~8,05 км). Любой пользователь в этой области автоматически получает новые вопросы и видит их в списке внутри приложения:

New questions in Ask Around Me

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

Ask Around Me Heatmap

Приложение создано, чтобы быть весёлым и простым в использовании. Оно требует аутентификацию, чтобы удостовериться, что каждый пользователь может проголосовать только один раз. Для того, чтобы пользователи могли видеть и отвечать только на вопросы в своих окрестностях, используется гео-хеширование. Список вопросов и ответов обновляется в реальном времени.

Что касается пользовательского трафика, приложение рассчитано на тысячу вопросов и десять тысяч ответов в час. Запрос списка вопросов по местоположению будет производиться примерно 50 тысяч раз в час. В этом и следующих постах я рассмотрю архитектуру и сервисы, выбранные для работы с указанным объёмом запросов. Всё приложение построено с использованием бессерверных технологий с учётом экономической эффективности. Затраты при таком подходе растут в зависимости от объёма использования. Кроме того, я рассмотрю оптимальное использование бюджета в таком сценарии.

Фреймворки SPA и бессерверные бэкенды

Вы можете использовать бессерверный бэкенд практически с любым фреймворком для мобильной или веб-разработки, но использование SPA может облегчить процесс. В современной разработке выросла популярность таких фреймворков, как React.js, Vue.js и Angular, они стали стандартным способом построения сложных интерфейсов с большим количеством функциональности.

Эти фреймворки предоставляют преимущества как разработчикам, так и пользователям. Разработчики могут создавать приложения с использованием IDE и тестировать их локально с помощью горячей перезагрузки, при которой содержание страницы обновляется в рамках существующего контекста браузера. При этом пользователи получают веб-интерфейс, похожий на традиционное приложение и предлагающий продвинутые и быстрые интерактивные возможности.

В результате сборки SPA-приложения создаются файлы HTML, JavaScript и CSS. Вы предоставляете пользователям доступ к ним с помощью сервиса Amazon CloudFront, использующего Amazon S3 в качестве источника. CloudFront имеет 216 глобальных точек присутствия, из которых осуществляется доставка этих файлов до пользователей, что приводит к уменьшению задержек при скачивании, независимо от того, где находится пользователь.

CloudFront/S3 app distribution

Вы также можете использовать консоль AWS Amplify, с помощью которой можно автоматизировать процесс сборки и развёртывания. Этот процесс может вызываться в результате событий из вашего репозитория: например, после внесения изменений в код, они автоматически развёртываются в производственную среду.

Традиционный веб-сервер часто обслуживает как запросы на статические ресурсы, так и на динамический контент. В предложенной выше модели вы передаёте всю работу по обслуживанию запросов на статические ресурсы в глобальную сеть доставки данных (Content Delivery Network, CDN). Динамическая часть приложения представляет собой бессерверный бэкенд, использующий Amazon API Gateway и AWS Lambda. С помощью фреймворков SPA и бессерверного бэкенда вы можете создавать производительные, высоко-масштабируемые веб-приложения, которые достаточно легко разрабатывать.

Конфигурация Auth0

Наше приложение интегрируется с Auth0 для аутентификации пользователей. Из фронтенда, если пользователь не вошёл в систему, происходит вызов к этому сервису, а затем, после аутентификации, Auth0 возвращает стандартный токен JWT. Перед установкой самого приложения, вам необходимо создать аккаунт Auth0 и настроить его:

  1. Перейдите по ссылке https://auth0.com/ и нажмите кнопку регистрации («Try Auth0»). Пройдите процесс создания аккаунта.
  2. На главной странице нажмите Create Application. Введите AskAroundMe в качестве названия и выберите Single Page Web Applications в Application Type. Нажмите Create.
  3. На следующей странице откройте вкладку Settings. Скопируйте значения полей Client ID и Domain в текстовый редактор. Эти значения понадобятся позже для настройки вашего приложения на Vue.js.Auth0 configuration next step
  4. Ниже на той же вкладке введите http://localhost:8080 в поля Allowed Logout URLs, Allowed Callback URLs и Allowed Web Origins. Нажмите Save Changes.
  5. На вкладке Connections, в секции Social добавьте google-oauth2 и twitter и убедитесь, что переключатели справа от них включены. Это позволит включить вход через социальные сети.Auth0 Connections tab

Такая конфигурация позволит приложению работать с сервисом Auth0 на вашей локальной машине. В производственной среде вам необходимо будет ввести настоящее доменное имя в указанные выше поля. Более подробную информацию можно получить в документации Auth0, в секции Application Settings.

Развёртывание приложения

В репозитории созданы отдельные директории для фронтенда и бэкенда. В первую очередь необходимо установить бэкенд. Для выполнения этого шага следуйте детальным инструкциям в файле README.md.

В процессе есть несколько важных значений, которые необходимо сохранить для дальнейших шагов:

  • IoT endpoint address и Cognito Pool ID: они используются для обмена сообщениями в реальном времени между бэкендом и фронтендом.
  • API endpoint: URL-путь до API бэкенда.
  • Region: регион AWS, где было установлено приложение.

Следующим шагом необходимо установить приложение Vue.js из директории frontend:

  1. Приложение использует Google Maps API, поэтому создайте аккаунт разработчика и сохраните ключ API.
  2. Откройте файл main.js в директории src. Строки с 45 по 62 содержат конфигурацию, в которую вам необходимо внести значения из предыдущих шагов:Ask Around Me Vue.js configuration

Убедитесь, что вы завершили конфигурацию Auth0 и оставшиеся шаги из файла README.md. После этого вы готовы к тестированию.

Для запуска фронтенда выполните команду npm run serve, которая запустит сервер разработки. В терминале вы можете увидеть URL, по которому доступно приложение:

Running the Vue.js app

Откройте веб-браузер и перейдите на страницу http://localhost:8080, чтобы увидеть приложение.

Как приложения Vue.js работают с бессерверным бэкендом

В отличие от традиционных веб-приложений, приложения SPA загружаются в пользовательском браузере и выполняют исходный код JavaScript на стороне клиента. Приложение загружает необходимые ресурсы и производит инициализацию перед тем, как начать взаимодействие с бэкендом. Этим поведением оно похоже на стандартное компьютерное или мобильное приложение.

Фреймворк Vue.js основан на компонентах. Каждый компонент может содержать пользовательский интерфейс вместе с соответствующим кодом и стилями. Общее состояние приложения управляется с помощью специального хранилища – в данном случае используется Vuex. Вы можете использовать многие паттерны из этого примера и в своих приложениях.

Auth0 предоставляет компонент Vue.js, который автоматизирует хранение и парсинг токена JWT в браузере. Каждый раз при запуске приложения этот компонент проверяет токен и предоставляет доступ к нему из вашего кода.

Приложение производит несколько шагов по инициализации перед тем, как запросить список вопросов из бэкенда:

Initialization process for the app

Аутентификация пользователя > Расшифровка токена JWT > Определение местоположения пользователя > Запрос списка вопросов

Некоторые компоненты могут запрашивать данные из бэкенда с помощью API Gateway. Например, в файле src/views/HomeView.vue компонент загружает список вопросов после определения местоположения пользователя:

const token = await this.$auth.getTokenSilently()
const url = `${this.$APIurl}/questions?lat=${this.currentLat}&lng=${this.currentLng}`
console.log('URL: ', url)
// Make API request with JWT authorization
const { data } = await axios.get(url, {
  headers: {
    // send access token through the 'Authorization' header
    Authorization: `Bearer ${token}`   
  }
})

// Commit question list to global store
this.$store.commit('setAllQuestions', data)

В данном случае для управления HTTP-запросами и передачи токена аутентификации в заголовке Authorization используется библиотека Axios. Результат сохраняется в хранилище Vuex. Так как приложения SPA реагируют на изменение данных, любой фронтенд-компонент, отображающий информацию, обновится при её изменении.

Компонент src/components/IoT.vue использует передачу сообщений по протоколу MQTT с помощью AWS IoT Core. Благодаря этому, обновления данных поступают на фронтенд в режиме реального времени. Например, когда появляется новый ответ на вопрос, соответствующий компонент получает информацию об этом. Он обновляет данные в глобальном хранилище, и все остальные компоненты, которые используют эти данные, также получают обновлённую информацию:

        mqttClient.on('message', function (topic, payload) {
          const msg = JSON.parse(payload.toString())
          
          if (topic === 'new-answer') {
            _store.commit('updateQuestion', msg)
          } else {
            _store.commit('saveQuestion', msg)
          }
        })

Приложение использует как синхронные запросы API Gateway, так и информацию, поступающую через MQTT WebSocket, для коммуникации с бэкендом. В результате вы получаете гибкий контроль состояния приложения и можете предложить своим пользователям более динамический интерфейс.

Заключение

В этом посте я представил веб-приложение Ask Around Me. Я рассмотрел преимущества использования фреймворков для одностраничных приложений (Single-Page Application, SPA) с точки зрения разработчиков и пользователей. Я показал, как с их помощью можно создавать высоко-масштабируемые и производительные веб-приложения, использующие бессерверный бэкенд.

Также в этой части вы сконфигурировали Auth0 и развернули фронтенд и бэкенд приложения из репозитория GitHub.

В следующей части я покажу архитектуру бэкенда, конфигурацию Amazon API Gateway, а также имплементацию гео-хеширования.