Эта бесплатная альтернатива Firebase работает всего в одном файле
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00PocketBase — это опенсорс-альтернатива Supabase или Firebase, возможно, самый простой
00:00:04бэкенд из всех, что можно запустить. Всего один файл дает вам базу данных в реальном времени, аутентификацию и
00:00:11хранилище файлов. Это полная противоположность безумной сложности современной веб-разработки.
00:00:16Поэтому в сегодняшнем видео мы протестируем PocketBase и посмотрим, выдержит ли его
00:00:21простая архитектура проверку при создании чего-то большего, чем простое приложение.
00:00:29PocketBase — это один бинарный файл на Go со встроенной SQLite, но кодить на Go на самом деле
00:00:35не обязательно, так как бэкенд можно расширять с помощью JavaScript и TypeScript. Вы также получите
00:00:40доступ к базовому интерфейсу администратора, где можно настраивать коллекции — всё в точности как в Supabase.
00:00:46Теперь перейдем к архитектуре и к тому, как этим пользоваться. Как только PocketBase запущен, вы можете
00:00:51подключиться к нему с фронтенда через JS SDK. И снова — очень похоже на то, как устроены Firebase
00:00:57и Supabase: вы можете обращаться к своей базе данных напрямую с фронтенда и не
00:01:02беспокоиться: у PocketBase есть API-правила и аутентификация для безопасности. Но давайте перейдем сразу
00:01:08к демо: покажем реальное приложение с аутентификацией, базой данных и хранилищем. Если вам нравится это
00:01:13видео, подпишитесь на Better Stack, на нашем канале много контента для разработчиков.
00:01:18Итак, вот наше приложение: PocketBase на бэкенде и веб-интерфейс
00:01:22на React. Самый важный файл на фронтенде — это pb.ts, потому что
00:01:30здесь мы импортируем PocketBase, получаем класс, создаем новый экземпляр
00:01:36этого класса, подключаемся к нашему бэкенду, и теперь мы можем использовать pb во всем остальном
00:01:42приложении. Само приложение — это простой трекер багов: мы можем перетаскивать задачи между колонками, создавать
00:01:48новые тикеты. Если заглянуть в хук, который контролирует вошедшего пользователя, видно, что
00:01:53сначала мы задаем состояние через pb.authStore.record, что получает текущего аутентифицированного пользователя
00:01:59из PocketBase, а затем добавляем слушатель: если authStore меняется с помощью
00:02:05события onChange, мы просто устанавливаем нового пользователя в состояние. Всё действительно так просто.
00:02:11Мы можем получать доступ к состоянию, подписываться на него, то же самое касается и тикетов.
00:02:16Внутри нашего хука useIssues мы также инициализируем состояние, но оставляем его пустым.
00:02:21Затем используем useEffect: получаем полный список всех тикетов и
00:02:27записываем его в состояние. Это первоначальная загрузка данных, а затем мы можем
00:02:32подписаться на изменения: если перетащить тикеты между колонками, создать или удалить их,
00:02:38мы вызываем pb.collection(“issues”).subscribe() и при поступлении новой записи можем
00:02:44добавить её в состояние. Это значит, что при взаимодействии с базой PocketBase
00:02:49напрямую, например, при перетаскивании карточки, состояние обновляется автоматически. А при создании
00:02:54нового тикета можно прикрепить скриншот. Давайте сделаем скриншот приложения
00:02:59и нажмем “File issue” — новый тикет сразу появится здесь. В коде фронтенда это
00:03:05обрабатывается функцией отправки, куда мы добавляем все данные формы и вызываем pb.
00:03:11collection(“issues”).create(), передавая данные. На бэкенде у нас есть правила API коллекции,
00:03:17чтобы предотвратить злоупотребления. PocketBase предоставляет этот админ-интерфейс по умолчанию.
00:03:24Здесь видно коллекции пользователей и тикетов,
00:03:27где хранятся все наши задачи, если мы заглянем в коллекцию пользователей и нажмем здесь на настройки
00:03:32мы увидим вкладку “API rules” — это правила, ограничивающие доступ к этой
00:03:37коллекции. Для пользователей: request.auth.id не может быть пустой строкой, а при
00:03:43обновлении или удалении ID должен совпадать с ID аутентифицированного пользователя. Мы можем обратиться к нему
00:03:50с помощью специальной строки: @ и request.auth.id. Если вы использовали Supabase,
00:03:56то этот паттерн вам покажется очень знакомым. А что, если бэкенд не
00:04:02делает всего, что нужно? К счастью, его можно расширить хуками на Go, а также JavaScript
00:04:08и TypeScript. Мы можем подписаться на события, например, onBootstrap при запуске приложения или onRecordCreate,
00:04:15когда создается запись. На момент съемки доступно 82 уникальных хука, так что практически
00:04:21всё, что вам нужно, будет покрыто. Давайте расширим наш сервис PocketBase, чтобы увидеть, как это работает.
00:04:27В папке pb лежит наш бинарный файл PocketBase, и этот файл — это буквально
00:04:32всё, что нужно для стандартной версии. В моем случае я написал все хуки
00:04:38на TypeScript, поэтому настроил компиляцию в папку pb_hooks как JavaScript, поскольку
00:04:44PocketBase поддерживает нативно только JavaScript, так что TypeScript нужно компилировать.
00:04:50В основном файле хуков мы видим onRecordCreate,
00:04:55который срабатывает при создании тикетов. Здесь мы говорим:
00:05:00каждый раз при создании записи отправлять email пользователю. Это делается вызовом
00:05:05e.app.newMailClient().send() с объектом сообщения, который мы здесь сконструировали.
00:05:10Вы можете использовать множество функций PocketBase, так что любая кастомная функциональность
00:05:15будет поддерживаться благодаря 82+ хукам. Поскольку всё работает на SQLite,
00:05:21нам нужно постоянное хранилище. Поэтому платформы вроде Heroku, Render
00:05:28или Railway плохо подходят из-за эфемерной файловой системы: данные будут теряться
00:05:33при каждом деплое. Можно примонтировать диск, но лучший и
00:05:39более дешевый вариант — хостинг на VPS, где данные живут в папке pb_data. Если
00:05:45заглянуть внутрь, там есть папка storage, содержащая все
00:05:50загруженные к тикетам изображения. Они хранятся именно там, так что
00:05:55в этой случайной папке можно увидеть картинку, которую я загрузил ранее.
00:05:59Файлы базы данных также сохраняются в этой папке. data.db
00:06:05содержит всю нашу базу SQLite, поэтому если удалить этот файл, пропадут все данные.
00:06:11Очевидно, нужна хорошая стратегия резервного копирования, а не просто надежда на один
00:06:16файл на диске. В сравнении с Supabase, где базовый тариф стоит от 25$, PocketBase
00:06:22практически бесплатный: вы платите только за VPS, что может стоить всего 4$,
00:06:28и позволяет запускать сколько угодно проектов. Конечно, при росте нагрузки нужно масштабироваться.
00:06:33PocketBase включает всё необходимое для продакшена: миграции, планировщик задач и
00:06:38логирование. Также можно отдавать статические файлы, поместив их в папку pb_public,
00:06:44что удобно для фронтенда на React. Альтернативно можно размещать
00:06:49динамические маршруты с рендерингом шаблонов — идеально для email-писем. Если вам
00:06:54нужно решение “в одной коробке”, то вот как это делается. Главный вопрос: готово ли это к продакшену?
00:06:59Там есть все функции для современного SaaS, включая
00:07:04профессиональные инструменты вроде миграций и логирования. Всё полностью расширяемо,
00:07:09так что вы не ограничены настройками по умолчанию. Но главный подвох в том, что это pre-v1,
00:07:15поэтому они советуют использовать это, только если вы готовы читать списки изменений и делать миграции вручную.
00:07:20Если это про вас — дерзайте, стройте своего единорога на одном файле. Узнать больше о PocketBase
00:07:25можно по ссылкам в описании. А если любите опенсорс-альтернативы,
00:07:29посмотрите видео про OpenCode, опенсорс-альтернативу Claude Code. С вами был Уоррен из
00:07:35Better Stack, спасибо за просмотр, увидимся в следующий раз!