Разберем, как использовать облачный сервис Amazon для создания мессенджера Chatty
многопользовательского чат-приложения в реальном времени с одной комнатой с помощью фреймворка Vue и AWS Amplify. Настроим регистрацию пользователей и хранение данных.
![](https://habrastorage.org/getpro/habr/upload_files/264/c6a/353/264c6a353daecfe38b048c7cb6b8ef7e.png)
Темы, которые мы рассмотрим:
Аутентификация
GraphQL API с AWS AppSync
Настроить Amplify DataStore
Развертывание через консоль Amplify
Удаление сервисов
Приложение и устранение неисправностей
Результат можно увидеть тут: https://master.d58xs5f4j0v44.amplifyapp.com/
Предварительные условия:
Регистрация за $1 в сервисах Amazon AWS уже произведена
Бесплатный редактор Visual Studio Code установлен, локализован и установлен npm:
Node:
14.7.0
. Visit Nodenpm:
6.14.7
.
npm install -g npm
Начало работы - Создание приложения
Чтобы начать, нам сначала нужно создать новый проект Vue используя:
npm install -g @vue/cli
vue create amplify-datastore
? Выберите предустановку: default [Vue 2] (babel, eslint)
Теперь перейдите в новый каталог приложения и убедитесь, что оно запущено.
cd amplify-datastore
npm run serve
Приложение Vue.js открылось в браузере и самое время разобрать получившийся код
![](https://habrastorage.org/getpro/habr/upload_files/c3a/953/7a4/c3a9537a4b1bcaf13841255e3f22aafc.png)
Откроем папку проекта C:\Users\Admin\amplify-datastore> в редакторе Visual Studio Code:
![Обратите внимание на окончание строк LF Обратите внимание на окончание строк LF](https://habrastorage.org/getpro/habr/upload_files/0d3/9ae/163/0d39ae163e39979d131cb5a372603d20.png)
Мы видим шаблон приложения Vue, и оно работает локально.
Остановим его CTRL+C что бы продолжить.
Давайте теперь установим API AWS Amplify и библиотеку AWS Amplify Vue:
npm install --save aws-amplify @aws-amplify/ui-vue moment
Установка интерфейса командной строки AWS Amplify
Далее мы установим интерфейс командной строки AWS Amplify:
npm install -g @aws-amplify/cli
Теперь нам нужно настроить CLI с нашими учетными данными:
amplify configure
Если вы хотите посмотреть видео-пошаговое руководство по процессу настройки, щелкните здесь .
Здесь мы рассмотрим 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 . Также убедитесь, что ваш регион соответствует вашему выбору.
Инициализация нового проекта
amplify init
Введите название проекта: 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-app>
|_ amplify
|_ .config
|_ #current-cloud-backend
|_ backend
team-provider-info.json
Добавление аутентификации
Чтобы добавить аутентификацию в наш проект Amplify, используем следующую команду:
amplify add auth
При появлении запроса выберите
Вы хотите использовать конфигурацию аутентификации и безопасности по умолчанию ?: Default configuration
Как вы хотите, чтобы пользователи могли входить в систему при использовании вашего пула пользователей Cognito ?: Username
Вы хотите настроить дополнительные параметры? Yes, I want to make some additional changes.
Какие атрибуты необходимы для регистрации? (Нажмите <пробел>, чтобы выбрать, <a>, чтобы переключить все, <i>, чтобы инвертировать выделение): Email
Вы хотите включить какие-либо из следующих возможностей? (Нажмите <пробел>, чтобы выбрать, <a>, чтобы переключить все, <i>, чтобы инвертировать выделение): None
Чтобы ничего не выбрать, просто нажмите
Enter
последнюю опцию.
Теперь мы запустим команду push, и облачные ресурсы будут созданы в нашей учетной записи AWS.
amplify push
Current Environment: dev
| Category | Resource name | Operation | Provider plugin |
| -------- | ------------------ | --------- | ----------------- |
| Auth | amplifyappuuid | Create | awscloudformation |
? Are you sure you want to continue? Yes
Чтобы быстро проверить созданный Cognito User Pool, запустим:
amplify status
Чтобы получить доступ к AWS Cognito Console в любое время, перейдите на панель управления по адресу https://console.aws.amazon.com/cognito/ .
Настраиваем приложение Vue
Теперь наши ресурсы созданы, и мы можем начать их использовать!
Первое, что нам нужно сделать, это настроить наше приложение Vue, чтобы оно было осведомлено о нашем новом проекте AWS Amplify. Мы можем сделать это, обратившись к автоматически сгенерированному aws-exports.js
файлу, который теперь находится в src
папке.
Чтобы настроить приложение, откройте main.js и добавьте следующий код:
import Vue from 'vue'
import App from './App.vue'
import Amplify from 'aws-amplify';
import '@aws-amplify/ui-vue';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Теперь наше приложение готово к использованию сервисов AWS.
Использование компонента аутентификации
AWS Amplify предоставляет компоненты пользовательского интерфейса, которые можно использовать в своем приложении. Добавим эти компоненты в проект
Чтобы использовать компонент Authenticator, добавьте его в src / App.vue :
<template>
<div id="app">
<amplify-authenticator>
<div>
<h1>Hey, {{user.username}}!</h1>
<amplify-sign-out></amplify-sign-out>
</div>
</amplify-authenticator>
</div>
</template>
Теперь мы можем запустить приложение и увидеть, что поток аутентификации был добавлен перед нашим компонентом приложения. Этот поток дает пользователям возможность зарегистрироваться и войти в систему.
Чтобы просмотреть всех созданных пользователей, вернитесь на панель управления Cognito по адресу https://console.aws.amazon.com/cognito/ .
В качестве альтернативы мы также можем использовать
amplify console auth
Доступ к данным пользователя
Прослушивая изменения состояния аутентификации с помощью, onAuthUIStateChange
мы можем получить доступ к информации пользователя после того, как он вошел в систему, как показано ниже.
<script>
import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components'
export default {
name: 'app',
data() {
return {
user: { },
}
},
created() {
// authentication state managament
onAuthUIStateChange((state, user) => {
// set current user and load data after login
if (state === AuthState.SignedIn) {
this.user = user;
}
})
}
}
</script>
Добавление GraphQL API
Чтобы добавить GraphQL API, мы можем использовать следующую команду:
amplify add 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
.
При появлении запроса обновите схему до следующего:
type Chatty @model {
id: ID!
user: String!
message: String!
createdAt: AWSDateTime
}
Это позволит нам отображать сообщения каждого пользователя вместе с датой и временем создания.
Примечание: не забудьте сохранить изменения в файле схемы!
Затем давайте перенесем конфигурацию в нашу учетную запись:
amplify push
Вы уверены что хотите продолжить? Yes
Вы хотите сгенерировать код для недавно созданного GraphQL API? Yes
Выберите целевой язык генерации кода javascript
Введите шаблон имени файла для запросов, мутаций и подписок graphql src / graphql / ** / *. Js
Вы хотите сгенерировать / обновить все возможные операции GraphQL - запросы, изменения и подписки? Yes
Введите максимальную глубину инструкции [увеличьте значение по умолчанию, если ваша схема глубоко вложена] 2
Обратите внимание на конечную точку GraphQL и КЛЮЧ API .
На этом шаге был создан новый API AWS AppSync. Используйте команду ниже, чтобы получить доступ к панели управления AWS AppSync. Убедитесь, что ваш регион правильный.
amplify console api
Пожалуйста, выберите одну из нижеуказанных служб GraphQL
Настроить Amplify DataStore
Установка Amplify DataStore
Далее мы установим необходимые зависимости:
npm install --save @aws-amplify/core @aws-amplify/datastore
Генерация модели данных
Затем мы сгенерируем модели для доступа к нашим сообщениям из нашего ChattyAPI.
amplify codegen models
Важно: НЕ забывайте генерировать модели каждый раз, когда вы вносите изменения в свою схему.
Теперь интерфейс командной строки AWS Amplify сгенерировал необходимые модели данных, и вы увидите новую папку в своем источнике: models . Файлы в этой папке содержат классы и схему вашей модели данных.
<amplify-app>
|_ src
|_ models
Самые нетерпеливые могут заглянуть в репозиторий проекта https://github.com/lazy-fox-code/amplify-datastore и уточнить куда какой код добавлять. Основная логика приложения описывается в App.vue и следующие разделы будут разбирать именно этот файл.
Структура App.vue содержит шаблон <template> в котором присутствуют блоки <div id="app"> с формами, кнопками, авторизацией и прочими деталями приложения. Затем идет раздел <script> в котором импортируются и применяются модели и методы приложения. Затем следуют стили оформления приложения.
Создание сообщения
Теперь, когда GraphQL API и модели данных созданы, мы можем начать с ними взаимодействовать!
Первое, что мы сделаем, это создадим новое сообщение, используя сгенерированные модели данных, и сохраним.
import { DataStore } from "@aws-amplify/datastore";
import { Chatty } from "./models";
await DataStore.save(new Chatty({
user: "amplify-user",
message: "Hi everyone!",
createdAt: new Date().toISOString()
}))
Это создаст запись локально в вашем браузере и синхронизирует ее в фоновом режиме с помощью базового API GraphQL.
Запрос данных
Давайте теперь посмотрим, как мы можем запрашивать данные с помощью Amplify DataStore. Чтобы запросить нашу модель данных, мы будем использовать запрос и предикат, чтобы указать, что нам нужны все записи.
import { DataStore, Predicates } from "@aws-amplify/datastore";
import { Chatty } from "./models";
const messages = await DataStore.query(Chatty, Predicates.ALL);
Это вернет массив сообщений, которые мы можем отобразить в нашем пользовательском интерфейсе.
Предикаты также поддерживают фильтры для распространенных типов, таких как строки, числа и списки.
Найдите все поддерживаемые фильтры в разделе "Запрос с предикатами"
Создание UI
Теперь давайте посмотрим, как мы можем создать пользовательский интерфейс для создания и отображения сообщений для нашего чата.
<template>
<div v-for="message of sorted" :key="message.id">
<div>{{ message.user }} - {{ moment(message.createdAt).format('YYYY-MM-DD HH:mm:ss')}})</div>
<div>{{ message.message }}</div>
</div>
</template>
<script>
import { Auth } from "aws-amplify";
import { DataStore, Predicates } from "@aws-amplify/datastore";
import { Chatty } from "./models";
import moment from "moment";
export default {
name: 'app',
data() {
return {
user: {},
messages: [],
}
},
computed: {
sorted() {
return [...this.messages].sort((a, b) => -a.createdAt.localeCompare(b.createdAt));
}
},
created() {
this.currentUser();
},
methods: {
moment: () => moment(),
currentUser() {
Auth.currentAuthenticatedUser().then(user => {
this.user = user;
this.loadMessages();
});
},
loadMessages() {
DataStore.query(Chatty, Predicates.ALL).then(messages => {
this.messages = messages;
});
},
}
}
</script>
Создание сообщения
Теперь давайте посмотрим, как мы можем создавать новые сообщения.
<template>
<form v-on:submit.prevent>
<input v-model="form.message" placeholder="Enter your message..." />
<button @click="sendMessage">Send</button>
</form>
</template>
<script>
export default {
data() {
return {
form: {},
};
},
methods: {
sendMessage() {
const { message } = this.form
if (!message) return;
DataStore.save(new Chatty({
user: this.user.username,
message: message,
createdAt: new Date().toISOString()
})).then(() => {
this.form = { message: '' };
this.loadMessages();
}).catch(e => {
console.log('error creating message...', e);
});
},
}
}
</script>
Удаление всех сообщений
Одним из основных преимуществ работы с Amplify DataStore является возможность запускать пакетные мутации без использования серии отдельных операций.
См. Ниже, как мы можем использовать delete вместе с предикатом для удаления всех сообщений.
DataStore.delete(Chatty, Predicates.ALL).then(() => {
console.log('messages deleted!');
});
Подписки GraphQL
Затем давайте посмотрим, как мы можем создать подписку, чтобы подписаться на изменения данных в нашем API.
Для этого нам нужно прослушивать подписку и обновлять состояние всякий раз, когда через подписку поступает новый фрагмент данных.
Когда компонент будет уничтожен, мы откажемся от подписки, чтобы избежать утечки памяти.
<script>
export default {
data() {
return {
subscription: undefined;
};
},
created() {
//Subscribe to changes
this.subscription = DataStore.observe(Chatty).subscribe(msg => {
console.log(msg.model, msg.opType, msg.element);
this.loadMessages();
});
},
destroyed() {
if (!this.subscription) return;
this.subscription.unsubscribe();
},
}
</script>
Развертывание через консоль Amplify
Мы рассмотрели развертывание через категорию хостинга Amplify CLI, но что, если нам нужно непрерывное развертывание CI/CD? Для этого мы можем использовать консоль Amplify для развертывания приложения.
Первое, что нам нужно сделать, это создать новый репозиторий GitHub для этого проекта. После того, как мы создали репо, мы скопируем URL-адрес проекта в буфер обмена и инициализируем git в нашем локальном проекте:
git init
git remote add origin git@github.com:username/project-name.git
git add .
git commit -m 'initial commit'
git push origin master
Затем мы посетим консоль 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 remove auth
amplify push
Если вы не знаете, какие службы вы в любой момент включили, вы можете запустить amplify status
команду:
amplify status
amplify status
предоставит вам список ресурсов, которые в настоящее время включены в вашем приложении.
Приложение
Настройка учетной записи AWS
Чтобы пройти этот урок, необходимо создать и активировать учетную запись Amazon Web Services.
Следуйте инструкциям здесь
Устранение неполадок
Сообщение: для идентификатора ключа доступа AWS требуется подписка на сервис
Решение: убедитесь, что вы подписаны на бесплатный план. Подписывайся
Сообщение: TypeError: fsevents не является конструктором
Решение: npm audit fix --force
Поведение: данные не синхронизируются с облаком и / или наоборот
Решение:
amplify update api
amplify push
Убедитесь, что вы ответили на следующие вопросы как
Настроить обнаружение конфликтов? Y
Выберите стратегию разрешения по умолчанию Auto Merge
Вы хотите изменить настройки по умолчанию для каждой модели? N
Послесловие
Надеюсь данный пост поможет легче пройти квест создания приложения Vue в облаке AWS.
![Результат работы двух пользователей Результат работы двух пользователей](https://habrastorage.org/getpro/habr/upload_files/e76/4ee/7d5/e764ee7d5632ab5f74a73178068a2ab3.png)
Что дальше?
Конечно у разработчика возникнет ряд вопросов по эффективности использования приложения в среде Amplify. Вот некоторые из них:
![5 шагов администрирования приложения 5 шагов администрирования приложения](https://habrastorage.org/getpro/habr/upload_files/664/327/db7/664327db70f771fe330b6824da9f09ae.png)
Так же удобно просматривать параметры и настраивать приложение в визуальном инструменте администратора приложения. По мере выполнения команд в консоли пока мы строили приложение, тут появлялись модель данных и API авторизации и содержимого:
![](https://habrastorage.org/getpro/habr/upload_files/eb6/908/4e0/eb69084e0b1825a5c25ab0d0a597b28d.png)
В статье преднамеренно использовался самый простой способ достижения цели. Во время создания разработчик заметит много дополнительных возможностей: авторизацию по телефону, письмо со ссылкой с переадресацией, капчу при регистрации для защиты от роботов, привязку своего домена (в том числе в кириллице, кстати чего нет в Azure). А так же множество других не менее интересных плюшек.