Темы



Пишем мессенджер на Vue в облаке Amazon17.01.2021 02:47

Разберем, как использовать облачный сервис Amazon для создания мессенджера Chattyмногопользовательского чат-приложения в реальном времени с одной комнатой с помощью фреймворка Vue и AWS Amplify. Настроим регистрацию пользователей и хранение данных.

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 Node

    • npm:  6.14.7.

npm install -g npm

Начало работы — Создание приложения

Чтобы начать, нам сначала нужно создать новый проект Vue используя: 

npm install -g @vue/cli
vue create amplify-datastore

  • ?  Выберите предустановку: по умолчанию [Vue 2] (babel, eslint)

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

cd amplify-datastore 
npm run serve

Приложение Vue.js открылось в браузере и самое время разобрать получившийся код

c3a9537a4b1bcaf13841255e3f22aafc.png

Откроем папку проекта C:\Users\Admin\amplify-datastore> в редакторе Visual Studio Code:

Обратите внимание на окончание строк LFОбратите внимание на окончание строк LF

Мы видим шаблон приложения 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:  (ACCESSKEYID>)secretAccessKey:  (SECRETACCESSKEY>)

  • Имя профиля: по умолчанию

Чтобы просмотреть нового созданного пользователя 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? да

  • Пожалуйста, выберите профиль, который вы хотите использовать по умолчанию

Теперь интерфейс командной строки AWS Amplify инициировал новый проект, и вы увидите новую папку:  ampify . Файлы в этой папке содержат конфигурацию вашего проекта.


    |_ amplify
      |_ .config
      |_ #current-cloud-backend
      |_ backend
      team-provider-info.json

Добавление аутентификации

Чтобы добавить аутентификацию в наш проект Amplify, используем следующую команду: 

amplify add auth

При появлении запроса выберите

Чтобы ничего не выбрать, просто нажмите 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,  запустим: 

amplify status

Чтобы получить доступ к консоли AWS Cognito в любое время, перейдите на панель управления по адресу 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 :

Теперь мы можем запустить приложение и увидеть, что поток аутентификации был добавлен перед нашим компонентом приложения. Этот поток дает пользователям возможность зарегистрироваться и войти в систему.

Чтобы просмотреть всех созданных пользователей, вернитесь на панель управления 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

Ответьте на следующие вопросы

Чтобы ничего не выбрать, просто нажмите Enter.

При появлении запроса обновите схему до следующего: 

type Chatty @model {
  id: ID!
  user: String!
  message: String!
  createdAt: AWSDateTime
}

Это позволит нам отображать сообщения каждого пользователя вместе с датой и временем создания.

Примечание: не забудьте сохранить изменения в файле схемы!

Затем давайте перенесем конфигурацию в нашу учетную запись: 

amplify push

Обратите внимание на конечную точку GraphQL и КЛЮЧ API .

На этом шаге был создан новый API AWS AppSync. Используйте команду ниже, чтобы получить доступ к панели управления AWS AppSync. Убедитесь, что ваш регион правильный.

amplify console api

Настроить Amplify DataStore

Установка Amplify DataStore

Далее мы установим необходимые зависимости: 

npm install --save @aws-amplify/core @aws-amplify/datastore

Генерация модели данных

Затем мы сгенерируем модели для доступа к нашим сообщениям из нашего ChattyAPI.

amplify codegen models

Важно: НЕ забывайте генерировать модели каждый раз, когда вы вносите изменения в свою схему.

Теперь интерфейс командной строки AWS Amplify сгенерировал необходимые модели данных, и вы увидите новую папку в своем источнике:  models . Файлы в этой папке содержат классы и схему вашей модели данных.


    |_ src
      |_ models

Самые нетерпеливые могут заглянуть в репозиторий проекта https://github.com/lazy-fox-code/amplify-datastore и уточнить куда какой код добавлять. Основная логика приложения описывается в App.vue и следующие разделы будут разбирать именно этот файл.

Структура App.vue содержит шаблон