Разберем, как использовать облачный сервис Amazon для создания мессенджера Chatty  многопользовательского чат-приложения в реальном времени с одной комнатой с помощью фреймворка Vue и AWS Amplify. Настроим регистрацию пользователей и хранение данных. Темы, которые мы рассмотрим: Аутентификация GraphQL API с AWS AppSync Настроить Amplify DataStore Развертывание через консоль Amplify Удаление сервисов Приложение и устранение неисправностей Результат можно увидеть тут: https://master.d58xs5f4j0v44.amplifyapp.com/ Предварительные условия:  Регистрация за $1 в сервисах Amazon AWS уже произведена Бесплатный редактор Visual Studio Code установлен, локализован и установлен npm: Node: 14.7.0. Visit Node npm: 6.14.7. Чтобы начать, нам сначала нужно создать новый проект Vue используя: ? Выберите предустановку: default [Vue 2] (babel, eslint) Теперь перейдите в новый каталог приложения и убедитесь, что оно запущено. Приложение Vue.js открылось в браузере и самое время разобрать получившийся код Откроем папку проекта C:\Users\Admin\amplify-datastore> в редакторе Visual Studio Code: Мы видим шаблон приложения Vue, и оно работает локально.  Остановим его CTRL+C что бы продолжить.  Давайте теперь установим API AWS Amplify и библиотеку AWS Amplify Vue: Далее мы установим интерфейс командной строки AWS Amplify: Теперь нам нужно настроить CLI с нашими учетными данными: Если вы хотите посмотреть видео-пошаговое руководство по процессу настройки, щелкните здесь . Здесь мы рассмотрим amplify configureнастройку. После входа в консоль AWS продолжайте: Укажите регион AWS: eu-central-1 (Франкфурт) Укажите имя пользователя нового пользователя IAM: ampify-datastore В консоли AWS нажмите Далее: Разрешения , Далее: Теги , Далее: Обзор и Создать пользователя, чтобы создать нового пользователя IAM. Затем вернитесь в командную строку и нажмите Enter. Введите ключ доступа вновь созданного пользователя: accessKeyId: (<YOURACCESSKEYID>)secretAccessKey: (<YOURSECRETACCESSKEY>) Имя профиля: default Чтобы просмотреть нового созданного пользователя IAM, перейдите на панель управления по адресу https://console.aws.amazon.com/iam/home?region=eu-central-1#/users . Также убедитесь, что ваш регион соответствует вашему выбору. Введите название проекта: ampifydatastore Введите имя для среды: dev Выберите редактор по умолчанию: Visual Studio Code Выберите тип приложения, которое вы создаете javascript Какую среду JavaScript вы используете vue Путь к исходному каталогу: src Путь к каталогу распространения: dist Команда сборки: npm run-script build Команда запуска: npm run-script serve Вы хотите использовать профиль AWS? Yes Пожалуйста, выберите профиль, который вы хотите использовать default Теперь интерфейс командной строки AWS Amplify инициировал новый проект, и вы увидите новую папку: ampify . Файлы в этой папке содержат конфигурацию вашего проекта. Чтобы добавить аутентификацию в наш проект Amplify, используем следующую команду: При появлении запроса выберите Вы хотите использовать конфигурацию аутентификации и безопасности по умолчанию ?: Default configuration Как вы хотите, чтобы пользователи могли входить в систему при использовании вашего пула пользователей Cognito ?: Username Вы хотите настроить дополнительные параметры? Yes, I want to make some additional changes. Какие атрибуты необходимы для регистрации? (Нажмите <пробел>, чтобы выбрать, <a>, чтобы переключить все, <i>, чтобы инвертировать выделение): Email Вы хотите включить какие-либо из следующих возможностей? (Нажмите <пробел>, чтобы выбрать, <a>, чтобы переключить все, <i>, чтобы инвертировать выделение): None Чтобы ничего не выбрать, просто нажмите Enterпоследнюю опцию. Теперь мы запустим команду push, и облачные ресурсы будут созданы в нашей учетной записи AWS. Чтобы быстро проверить созданный Cognito User Pool, запустим: Чтобы получить доступ к AWS Cognito Console в любое время, перейдите на панель управления по адресу https://console.aws.amazon.com/cognito/ . Теперь наши ресурсы созданы, и мы можем начать их использовать! Первое, что нам нужно сделать, это настроить наше приложение Vue, чтобы оно было осведомлено о нашем новом проекте AWS Amplify. Мы можем сделать это, обратившись к автоматически сгенерированному aws-exports.jsфайлу, который теперь находится в srcпапке. Чтобы настроить приложение, откройте main.js и добавьте следующий код: Теперь наше приложение готово к использованию сервисов AWS. AWS Amplify предоставляет компоненты пользовательского интерфейса, которые можно использовать в своем приложении. Добавим эти компоненты в проект Чтобы использовать компонент Authenticator, добавьте его в src / App.vue : Теперь мы можем запустить приложение и увидеть, что поток аутентификации был добавлен перед нашим компонентом приложения. Этот поток дает пользователям возможность зарегистрироваться и войти в систему. Чтобы просмотреть всех созданных пользователей, вернитесь на панель управления Cognito по адресу https://console.aws.amazon.com/cognito/ .  В качестве альтернативы мы также можем использовать Прослушивая изменения состояния аутентификации с помощью, onAuthUIStateChangeмы можем получить доступ к информации пользователя после того, как он вошел в систему, как показано ниже. Чтобы добавить GraphQL API, мы можем использовать следующую команду: Ответьте на следующие вопросы Пожалуйста, выберите одну из нижеуказанных служб GraphQL Укажите имя API: ChattyAPI Выберите тип авторизации по умолчанию для API: API key Введите описание ключа API: (empty) Через сколько дней истечет срок действия ключа API (1-365): 7 Вы хотите настроить дополнительные параметры для GraphQL API? Yes, I want to make some additional changes. Настроить дополнительные типы авторизации? N Настроить обнаружение конфликтов? Y Выберите стратегию разрешения по умолчанию Auto Merge Вы хотите изменить настройки по умолчанию для каждой модели? N У вас есть аннотированная схема GraphQL? N Вам нужно управляемое создание схемы? Y Что лучше всего описывает ваш проект: Single object with fields (e.g. “Todo”) Вы хотите отредактировать схему сейчас? Y Чтобы ничего не выбрать, просто нажмите Enter. При появлении запроса обновите схему до следующего: Это позволит нам отображать сообщения каждого пользователя вместе с датой и временем создания. Примечание: не забудьте сохранить изменения в файле схемы! Затем давайте перенесем конфигурацию в нашу учетную запись: Вы уверены что хотите продолжить? Yes Вы хотите сгенерировать код для недавно созданного GraphQL API? Yes Выберите целевой язык генерации кода javascript Введите шаблон имени файла для запросов, мутаций и подписок graphql src / graphql / ** / *. Js Вы хотите сгенерировать / обновить все возможные операции GraphQL - запросы, изменения и подписки? Yes Введите максимальную глубину инструкции [увеличьте значение по умолчанию, если ваша схема глубоко вложена] 2 Обратите внимание на конечную точку GraphQL и КЛЮЧ API . На этом шаге был создан новый API AWS AppSync. Используйте команду ниже, чтобы получить доступ к панели управления AWS AppSync. Убедитесь, что ваш регион правильный. Пожалуйста, выберите одну из нижеуказанных служб GraphQL Далее мы установим необходимые зависимости: Затем мы сгенерируем модели для доступа к нашим сообщениям из нашего ChattyAPI. Важно: НЕ забывайте генерировать модели каждый раз, когда вы вносите изменения в свою схему. Теперь интерфейс командной строки AWS Amplify сгенерировал необходимые модели данных, и вы увидите новую папку в своем источнике: models . Файлы в этой папке содержат классы и схему вашей модели данных. Самые нетерпеливые могут заглянуть в репозиторий проекта https://github.com/lazy-fox-code/amplify-datastore и уточнить куда какой код добавлять. Основная логика приложения описывается в App.vue и следующие разделы будут разбирать именно этот файл. Структура App.vue содержит шаблон <template> в котором присутствуют блоки <div id="app"> с формами, кнопками, авторизацией и прочими деталями приложения. Затем идет раздел <script> в котором импортируются и применяются модели и методы приложения. Затем следуют стили оформления приложения. Теперь, когда GraphQL API и модели данных созданы, мы можем начать с ними взаимодействовать! Первое, что мы сделаем, это создадим новое сообщение, используя сгенерированные модели данных, и сохраним. Это создаст запись локально в вашем браузере и синхронизирует ее в фоновом режиме с помощью базового API GraphQL. Давайте теперь посмотрим, как мы можем запрашивать данные с помощью Amplify DataStore. Чтобы запросить нашу модель данных, мы будем использовать запрос и предикат, чтобы указать, что нам нужны все записи. Это вернет массив сообщений, которые мы можем отобразить в нашем пользовательском интерфейсе. Предикаты также поддерживают фильтры для распространенных типов, таких как строки, числа и списки. Найдите все поддерживаемые фильтры в разделе "Запрос с предикатами" Теперь давайте посмотрим, как мы можем создать пользовательский интерфейс для создания и отображения сообщений для нашего чата. Теперь давайте посмотрим, как мы можем создавать новые сообщения. Одним из основных преимуществ работы с Amplify DataStore является возможность запускать пакетные мутации без использования серии отдельных операций. См. Ниже, как мы можем использовать delete вместе с предикатом для удаления всех сообщений. Затем давайте посмотрим, как мы можем создать подписку, чтобы подписаться на изменения данных в нашем API. Для этого нам нужно прослушивать подписку и обновлять состояние всякий раз, когда через подписку поступает новый фрагмент данных. Когда компонент будет уничтожен, мы откажемся от подписки, чтобы избежать утечки памяти. Мы рассмотрели развертывание через категорию хостинга Amplify CLI, но что, если нам нужно непрерывное развертывание CI/CD? Для этого мы можем использовать консоль Amplify для развертывания приложения. Первое, что нам нужно сделать, это создать новый репозиторий GitHub для этого проекта. После того, как мы создали репо, мы скопируем URL-адрес проекта в буфер обмена и инициализируем git в нашем локальном проекте: Затем мы посетим консоль Amplify в нашей учетной записи AWS по адресу https://eu-central-1.console.aws.amazon.com/amplify/home . Здесь мы нажмем «Get Started», чтобы создать новое развертывание.  Затем авторизуйте Github как службу репозитория. Затем мы выберем новый репозиторий и ветку для только что созданного проекта и нажмем Next . На следующем экране мы создадим новую роль и воспользуемся этой ролью, чтобы позволить консоли Amplify развернуть эти ресурсы, и нажмите Next . Наконец, мы можем нажать «Save and Deploy», чтобы развернуть наше приложение! Теперь мы можем отправлять обновления в Master, чтобы обновить наше приложение. Если в любое время или в конце этого семинара вы захотите удалить службу из своего проекта и своей учетной записи, вы можете сделать это, выполнив amplify removeкоманду: Если вы не знаете, какие службы вы в любой момент включили, вы можете запустить amplify statusкоманду: amplify status предоставит вам список ресурсов, которые в настоящее время включены в вашем приложении. Чтобы пройти этот урок, необходимо создать и активировать учетную запись Amazon Web Services. Следуйте инструкциям здесь Сообщение: для идентификатора ключа доступа AWS требуется подписка на сервис Решение: убедитесь, что вы подписаны на бесплатный план. Подписывайся Сообщение: TypeError: fsevents не является конструктором Решение: npm audit fix --force Поведение: данные не синхронизируются с облаком и / или наоборот Решение: Убедитесь, что вы ответили на следующие вопросы как Настроить обнаружение конфликтов? Y Выберите стратегию разрешения по умолчанию Auto Merge Вы хотите изменить настройки по умолчанию для каждой модели? N Надеюсь данный пост поможет легче пройти квест создания приложения Vue в облаке AWS.  Конечно у разработчика возникнет ряд вопросов по эффективности использования приложения в среде Amplify. Вот некоторые из них: Так же удобно просматривать параметры и настраивать приложение в визуальном инструменте администратора приложения. По мере выполнения команд в консоли пока мы строили приложение, тут появлялись модель данных и API авторизации и содержимого:  В статье преднамеренно использовался самый простой способ достижения цели. Во время создания разработчик заметит много дополнительных возможностей: авторизацию по телефону, письмо со ссылкой с переадресацией, капчу при регистрации для защиты от роботов, привязку своего домена (в том числе в кириллице, кстати чего нет в Azure). А так же множество других не менее интересных плюшек.  Инженер