Supabase: примеры использования в web-разработке с Vue

В этой статье мы научимся создавать многопользовательское приложение на Vue с использованием Supabase — платформы, предоставляющей backend как сервис (BaaS) с поддержкой аутентификации, хранилища файлов, реляционной базы данных (PostgreSQL), функций реального времени, serverless-функций и готовых API для ваших таблиц и не только. 

В качестве примера создадим приложение «Мои VPS» (реестр ваших серверов), где реализуем авторизацию по email, а также покажем примеры управления данными (добавление, удаление и т.д.) и работу с фреймворком supabase-js.

Нам потребуется около 5-7 минут для разбора кода и еще 5 минут — для развертывания приложения на сервисе Timeweb Cloud Apps, после чего мы получим готовый сайт-админку с публичным URL-адресом.

В этом туториале вы узнаете, как подключить Supabase к приложению Vue, а также:

1. Реализовать аутентификацию пользователей.
2. Выполнять CRUD-операции (создание, чтение, удаление данных).
3. Использовать возможности Supabase для хранения и работы с базой данных.

Через 10–15 минут у нас будет:

• Готовое приложение для управления списком ваших серверов.
• Возможность авторизации пользователей в приложении.
• Свои списки для каждого пользователя.
• Полный цикл работы с данными (добавление, редактирование, удаление).
• Полностью настроенный URL для развертывания приложения.

Вот так будет выглядеть ваше приложение:

Форма авторизации

Список VPS

Что нам потребуется

• Зарегистрированный аккаунт на Github, Gitlab или Bitbucket
• Зарегистрированный аккаунт на платформе Timeweb Cloud
• Знание фреймворка Vue или JavaScript

Кейсы: кому и как использовать Vue + Supabase

1. Веб-разработчикам приложений с авторизацией и управлением данными
   Если вы создаете одностраничные приложения (SPA) и хотите быстро внедрить функционал аутентификации, работы с базой данных, а также реального времени, Supabase идеально дополнит Vue. Например, для CRM-систем или инструментов управления задачами.

2. Разработчикам корпоративных систем
   Быстрая интеграция с Supabase позволяет сосредоточиться на бизнес-логике, а не на настройке серверной части. Vue отлично подходит для разработки активных прототипов и масштабируемых интерфейсов, а Supabase обеспечит надежную работу backend.

3. Web-дизайнерам для сайтов с динамическими данными
   Supabase позволяет не ломать голову с организацией backend-части проектов, настраивать правила безопасности HTTP-серверов, на задумываться о развертывании базы данных. Все это есть в пакете. И более того, ко всему есть доступ по API.

4. Разработчикам API и микросервисов
   Supabase предоставляет готовые API и поддержку Edge Functions, что позволяет легко организовать сложные перекрестные запросы, например, для агрегации данных или интеграции с внешними сервисами.

5. Разработчикам real-time-приложений
   Используйте возможности Supabase для создания приложений с обновлением данных в реальном времени, таких как чаты, мониторинг серверов или доски задач.

6. Студентам и начинающим разработчикам
   Связка Vue и Supabase упрощает процесс создания интерактивных учебных приложений. Вы сможете без лишних затрат времени и ресурсов реализовать учебные проекты, презентации или тестовые задачи.

Деплой приложения на Vue + Supabase

В данной инструкции мы рассмотрим деплой приложения с использованием Github. Мы подготовили для вас готовое приложение для демонстрации простоты деплоя Vue-приложений на наш сервис Timeweb Cloud Apps. Итак, приступим.

Шаг 1: Создайте проект в Supabase

Для работы с Supabase вы можете использовать собственное self-hosted решение (его можно реализовать по инструкции «Как развернуть Supabase в облаке Timeweb Cloud»).

Также вы можете создать свой проект в облаке Supabase.com (в бесплатном тарифе присутствуют определенные ограничения на трафик и т.д., но для маленького проекта или обучения данный вариант вполне подойдет).

Поскольку dashboard и принцип работы и у self-hosted решения, и у облачного решения абсолютно идентичны, в данной статье мы рассмотрим пример на базе облачного решения. 

cloud

Регистрация проекта Supabase

• Перейдите на сайт supabase.com и зарегистрируйтесь.
• Создайте новый проект.
• На странице настроек найдите Anon key и URL проекта, они потребуются для интеграции (не забудьте сохранить их).

Настройка проекта Supabase

Важно: После создания аккаунта на supabase.com вам нужно позаботиться о рассылке транзакционных email. Для рассылки писем о регистрации, сброса пароля и т.д. можно использовать встроенные возможности supabase.com, но если вы планируете большое количество пользователей или отправку писем от имени своего домена, то можно воспользоваться сервисом smtp.bz (10000 писем в месяц бесплатно).  

Настройка SMTP в Dashboard → Project setting → Authentication

После создания проекта создайте таблицу vps, и обязательно настройте ее для работы Row level security. Эта система безопасности позволит без лишнего кода ограничить доступ к записям в таблице только зарегистрированным пользователям и только к своим записям.

Создание таблицы VPS

Создадим таблицу vps, в которую будем записывать данные, сохраненные пользователями (напомним, что наше приложение многопользовательское). Для этого в панели управления Supabase зайдите в раздел Table Editor.

Нажмите кнопку Create a new table. Далее откроется диалог, в котором нужно указать поля и их типы, как показано на рисунке ниже.

Для полей name, ip_address и user_id установите обязательность заполнения (настраивается кнопкой шестеренки справа от поля). Чекбокс Is nullable должен быть отключен, как на нижеприведенном скриншоте:

Очень важно для работы с Supabase: в каждой таблице обязательно создавайте поле user_id, которое обеспечит вам защиту и разделение данных между пользователями без лишнего кода (на основании политик безопасности). Любой залогиненный юзер сможет видеть и исправлять только те записи в таблице, которые принадлежат его user_id. А всю работу по безопасности возьмет на себя Supabase. Вам останется лишь творить на фронте ваши гениальные задумки, ну и можно сэкономить на зарплатах DEVOPS-инженеров 😇

Кстати, небольшое отступление: большинство мобильных разработчиков уже используют данную модель работы с данными на серверах, но о том, как разработать мобильное приложение на Vue+Supabase мы расскажем в следующей статье. А пока потренируйтесь на разработке web-приложения.

Настройка политики доступа

Давайте настроим доступ к таблице VPS. Нам нужно создать 3 политики безопасности: для чтения данных, для редактирования и для удаления. В панели управления Supabase найдите кнопку Auth policies для выбранной таблицы.

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

Нажмите кнопку Create policy и укажите настройки для чтения таблицы, как показано на рисунке:

Ключевые моменты: 

• В Policy Command укажите SELECT.
• В Target Roles укажите authenticated, чтобы доступ был только у залогиненных пользователей.
• В блоке using укажите ((SELECT auth.uid() AS uid) = user_id) — это означает, что при запросе к таблице Supabase будет сравнивать uid залогиненного пользователя со значением поля user_id в таблице VPS. Соответственно, пользователь увидит только свои записи и ни при каких условиях не сможет получить чужие записи.

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

Ключевые моменты:

• В Policy Command укажите INSERT.
• В Target Roles укажите authenticated, чтобы доступ был только у залогиненных пользователей.
• В блоке using укажите (auth.uid() IS NOT NULL) — это означает, что при добавлении записи в таблицу пользователь должен быть авторизован.

Далее сделаем политику доступа для удаления данных:

Ключевые моменты: 

• В Policy Command укажите DELETE.
• В Target Roles укажите authenticated, чтобы доступ был только у залогиненных пользователей.
• В блоке using укажите ((SELECT auth.uid() AS uid) = user_id) — это означает, что при операции удаления пользователь сможет удалить исключительно собственные записи.

Как видите, настройка не сложная. И сделать ее нужно один раз. После этого все пользователи изолированы друг от друга. И вы можете забыть раз и навсегда и программных проверках авторизации и других серверных политиках безопасности. Supabase уже все за вас сделала. Дальше творите искусство frontend.

Итак, дальше перейдем к магии программирования.

Шаг 2: Копирование шаблона приложения в github

Откройте в браузере страницу репозитория с шаблоном нашего приложения и нажмите кнопку «Fork», чтобы скопировать его в свой аккаунт Github.

Сохраните репозиторий в своем аккаунте. Название репозитория менять не обязательно.

Шаг 3: Деплой приложения

Для автоматического развертывания статических и динамических приложений, созданных на основе таких фреймворков, как Vue, Next.js, Svelte и других, используйте Timeweb Cloud Apps. Эта платформа автоматически компилирует и публикует Ваше приложение, создавая публичный URL-адрес, что позволяет мгновенно делиться результатами вашей работы.

Всего за 1 рубль в месяц вы получите:

• сборку и деплой вашего кода на наш сервер,
• готовый рабочий домен,
• SSL-сертификат.

Первое развертывание займет 5-7 минут, любые обновления вашего приложения будут производиться в течение 1 минуты.

Предполагаем, что вы уже зарегистрированы в Timeweb Cloud. Просто перейдите к созданию нового Apps и выберите тип приложения «Vue» и версию Node.js по желанию.

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

Остался последний шаг — ввести переменные окружения (те самые секретные настройки, которые вы не хотите никому показывать, но которые нужны для подключения к вашему аккаунту Supabase). 

Чтобы не морочить себе голову с настройкой файла .env, вы можете ввести переменные прямо здесь, перед запуском деплоя. Вводятся они один раз, и, что самое важное, хранятся в безопасном хранилище Timeweb Cloud.

Какие переменные мы указываем:

Теперь нажимайте кнопку «Запустить деплой» и наслаждайтесь.

Платформа Timeweb Cloud Apps соберет приложение, покажет вам весь процесс компиляции и деплоя на сервер.

Готово! Ваше приложение Vue успешно размещено в сервисе Timeweb Cloud Apps, и теперь вы можете использовать его без необходимости настройки хостинга. Перейдите в настройки, скопируйте публичный URL и откройте приложение в браузере. Вы также можете изменить адрес на свой собственный, используя кнопку «Редактировать». Затем скопируйте сформированный публичный URL и переходите в браузер.

После деплоя зайдите в Dashboard вашего Supabase-проекта и http://localhost:3000 на домен, который вы видите в настройках (на картинке выше tecspda…twc1.net). Это значение, которое будет использоваться, если URL-адрес перенаправления не указан или не соответствует URL-адресу из списка разрешенных. Это значение также отображается как переменная шаблона в разделе шаблонов электронной почты.

Код приложения на Vue + Supabase

Далее давайте посмотрим, как устроен код нашего web-приложения.

Внешний вид и функционал

Визуально ваше приложение состоит из двух страниц: авторизация и основное окно со списком ваших серверов VPS. Несмотря на небольшое количество страниц, функционал работы с Supabase показан в достаточном объеме, чтобы понять принцип работы.

Изучив код данного web-приложения на Vue+Supabase, вы получите следующие преимущества, как разработчик:

• Научитесь современному подходу написания web-приложений без использования собственной backend-архитектуры.
• Научитесь записывать и получать данные из базы данных Supabase (PostgreSQL).
• Научитесь фильтрации данных средствами JavaScript.
• Начнете деплоить приложения, применяя современный подход CI/CD Github.
• Поймете, как просто и без лишнего кода делать многопользовательские приложения.

Запуск для локальной разработки

Откройте терминал (для Windows, например, PowerShell, подробности можно найти в статье). Затем перейдите в папку, где вы храните свои разработки:

cd "/путь/к/папке" 

Клонируйте ваше Vue-приложение на локальный компьютер:

git clone https://github.com/ВАШ_НИК/timeveb-vue-supabase-demo.git 
cd timeveb-vue-supabase-demo

Установите зависимости:

npm install

Для запуска приложения введите команду:

npm run dev

Вывод в терминал:

  VITE v6.0.3  ready in 265 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Откройте ваше приложение в браузере по адресу: http://localhost:5173/.

Исходники приложения

Структура файлов

Откройте редактор или IDE (например VS Code или Zed) и загрузите ваш проект. Структура каталогов вашего приложения выглядит следующим образом:

Роутинг

Основной каталог, содержащий логику приложения — это src. В файле router.js указаны пути вызова двух форм: для авторизации и для основной формы.

Как это работает

Когда пользователь пытается перейти на страницу /vps, хук beforeEach проверяет, есть ли активный пользователь в системе:

• Если пользователь не залогинен, его перенаправляют на главную страницу для прохождения авторизации.

• Если пользователь авторизован, он получает доступ к защищенному маршруту.

Этот подход гарантирует безопасность приложения, так как защищенные страницы недоступны без входа в систему.

Описание функциональности интерфейса

Данный компонент VPSManager.vue представляет собой интерфейс для управления серверами VPS. Он включает в себя возможности:

• Просматривать список VPS.
• Фильтровать список по различным параметрам.
• Добавлять новые записи о VPS.
• Удалять существующие записи.
• Копировать IP-адреса в буфер обмена.
• Выполнять выход из системы.

Структура компонента VPSManager.vue

Шапка интерфейса включает заголовок «VPS Manager» и имя текущего пользователя, а также кнопку выхода.

Форма поиска позволяет выполнять поиск и фильтрацию VPS по следующим параметрам:

• Имя сервера.
• IP-адрес.
• Имя хостера.
• Страна.

Форма добавления VPS включает поля:

• Имя сервера (VPS Name).
• IP-адрес с валидацией формата.
• Имя хостера (Hoster Name).
• Страна (по умолчанию — "RU").

Список VPS отображает записи с информацией о серверах:

• Имя.
• IP-адрес.
• Имя хостера.
• Страна.

Дополнительно, для каждой записи доступны:

• Кнопка удаления, которая вызывает подтверждение перед удалением.
• Иконка копирования IP-адреса в буфер обмена.

Логика и перечень методов

Методы управления данными

• fetchVPS(): Загружает список VPS из базы данных Supabase.

• addVPS(): Добавляет новый сервер в базу данных и обновляет список.

• deleteVPS(id): Удаляет запись о сервере по указанному идентификатору.

Фильтрация списка

• Метод filterEnable() позволяет искать VPS по имени, IP-адресу, имени хостера или стране.

• Результаты сохраняются в отдельный массив vpsListFiltered.

Работа с буфером обмена

• Метод copyToClipboard() копирует IP-адрес в буфер обмена, добавляя анимацию для визуального подтверждения.

Форматирование и валидация IP-адреса

• Метод formatIp() удаляет лишние символы и ограничивает длину каждого сегмента до 3 символов.

• Метод validateIp() проверяет формат введенного IP-адреса с использованием регулярного выражения.

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

• Метод logout() выполняет выход из системы (разлогинивание) и перенаправляет пользователя на страницу входа.

Пример метода с простым доступом к Supabase: fetchVPS

Метод fetchVPS() демонстрирует, насколько легко с помощью Supabase можно взаимодействовать с базой данных. В данном случае мы выполняем простое чтение данных из таблицы vps:

async fetchVPS() {
  const { data, error } = await supabase.from('vps').select('*');
  if (error) {
    console.error('Error fetching VPS:', error);
  } else {
    this.vpsList = data;
  }
}

Как видите, нет необходимости писать сложные SQL-запросы. Но, если, например, вы захотите сделать запрос с примирением фильтра, то можно сделать так: 

const { data, error } = await supabase.from('vps')
      .select('*')
      .eq('country', 'RU'); // Условие: country = 'RU'

Подготовили для вас выгодные тарифы на облачные серверы

Заключение

Итак, в данной статье мы научились создавать приложение на Vue с использованием Supabase и организовывать его функциональность. Мы рассмотрели, как настроить маршрутизацию, реализовать проверку аутентификации, а также создать интерфейс для управления серверами VPS.

Для начинающих разработчиков важно отметить, что Vue 3 — это современный JavaScript-фреймворк, который делает разработку веб-приложений удобной и быстрой. Он предлагает понятный синтаксис, гибкость и мощные инструменты для построения как небольших, так и масштабных приложений. Vue 3 особенно хорошо подходит для тех, кто уже имеет базовые знания JavaScript и хочет перейти на новый уровень разработки.

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

Использование подобных технологий позволяет сосредоточиться на логике приложения и интерфейсе, не беспокоясь о сложных настройках серверной инфраструктуры. Мы рекомендуем Supabase и Vue 3 всем, кто ищет удобный и производительный стек для разработки веб-приложений.

Экспериментируйте, создавайте и развивайтесь! Эти инструменты предоставляют всё необходимое для успешного старта в веб-разработке.