Firebase 与 Supabase：为您的项目选择合适的工具
这篇文章于 2022 年 9 月 13 日更新，包括有关 Firebase 和 Supabase 中的安装、可扩展性和安全性以及身份验证的信息，以及进行其他一般内容更新。
后端即服务 (BaaS) 是一种服务模型，其中开发人员将 Web 或移动开发的所有幕后工作外包。 这样他们就可以专注于在即插即用的基础上编写和维护前端，并避免编写服务器端代码的压力。
BaaS 平台为服务器端活动提供软件，例如身份验证、数据库管理、实时更新、存储、托管和推送通知（用于移动应用程序）。 在过去十年中，我们见证了提供这些服务的公司的崛起，包括 Firebase 、 Supabase 、 Parse 、 Back4app 和 AWS Amplify 等等。
尽管这些后端服务本质上提供相同的解决方案，但它们使用不同的后端技术。 对于许多开发人员来说，这是为给定项目选择最佳服务时的决定性因素。
例如，Back4App 提供开箱即用的 REST 和 GraphQL API，而 Firebase 使用 NoSQL 语法并且不提供开箱即用的 GraphQL。
在本教程中，我们将重点介绍 Firebase 和开源替代品 Supabase。 我们将从分别探索每个平台开始，然后我们将比较 Firebase 与 Supabase，并提供一些关于如何为您的项目选择最佳工具的提示。
我们将详细介绍以下内容：
-
什么是火力基地？
-
Firebase 的构建阶段
-
Firebase 的发布和监控阶段
-
Firebase 的参与阶段
-
-
安装 Firebase
-
使用 Firebase 进行身份验证
-
Firebase Firestore
-
Firebase 中的存储
-
使用 Firebase 网络 SDK
-
什么是 Supabase？
-
Installing Supabase
-
Firebase vs. Supabase: Which is right for your project?
-
导入预先存在的数据
-
价钱
-
关系数据库与 NoSQL 数据库
-
Firebase 扩展
-
数据迁移
-
可扩展性和安全性
-
什么是火力基地？
Firebase 最初由 James Tamplin 和 Andrew Lee 于 2011 年创立。 谷歌于 2014 年收购了该平台，现在它是该公司用于应用程序开发的旗舰产品。
Firebase 的第一个产品是 Firebase 实时数据库，这是一个 API，可在 iOS、Android 和 Web 之间同步应用程序数据，同时将其存储在 Firebase 的云中。 Firebase 已经发展成为一个成熟的 BaaS 服务，其中包含用于开发和后期开发阶段的产品。
Firebase 分三个阶段提供产品：
超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →
-
建造
-
Release and monitor
-
从事
每个阶段代表不同的发展阶段。 Firebase 为每个阶段创建了特定产品。
Firebase 的构建阶段
构建阶段涵盖为主动开发提供后端基础架构的产品。 其中包括构建应用程序时使用的核心服务，例如身份验证、存储、实时数据库、Firestore、托管、云功能、云消息传递、远程配置和 Firebase ML。
让我们更详细地探索这些功能：
-
身份验证：Firebase 提供身份验证服务，允许用户在您的应用程序上注册和创建帐户，包括第三方登录服务
-
存储：Firebase 为用户生成的媒体（图像、视频、音频等）提供存储作为 firebase 平台的一部分
-
托管：Firebase 允许托管，从而可以在同一个云服务中构建和托管您的应用程序
-
云功能：云功能使您能够直接在 Google Cloud 上运行服务器端代码，所有这些都在受控且安全的环境中
-
Firestore：Firestore 是一个 NoSQL 数据库，它允许您根据自己的喜好构建数据库并以闪电般的速度查询它
-
云消息传递：这使您能够在即插即用的基础上轻松地向用户发送推送通知
-
远程配置：您可以使用功能标志来确定打开或关闭哪些功能，以及最终将其投入生产的原因
-
实时数据库：这也是一个 NoSQL 数据库，使您能够实时同步数据并在项目中进行无缝更改
-
Firebase ML：您可以访问可以帮助您训练和部署自定义模型的机器学习 API
Firebase 的发布和监控阶段
发布和监控类别中的 Firebase 工具用于在应用程序开发和发布后对其进行监控。 这些工具包括：
-
Firebase Crashlytics：监控崩溃，实时报告它们，并提供洞察力以帮助您查明原因并解决问题
-
Google Analytics：此实用程序提供详细的分析，可以轻松研究用户行为并对其采取行动
-
Firebase 性能监控：此数据可帮助您从用户的角度了解性能问题，包括网络行为和延迟
-
远程配置：您可以即时自定义和更改您的应用程序。 此功能最常用于移动应用程序
-
测试实验室：此功能使您能够在真实和虚拟设备上创建模拟，以便在发布前测试您的应用
-
应用分发：您可以轻松地将应用的独家版本分发给受信任的测试人员
Firebase 的参与阶段
此类别中的产品主要用于移动应用程序。 它们可以帮助您吸引用户、优化用户体验并让用户满意。
在付费计划中，Firebase 提供了很酷的扩展来帮助您构建应用、添加功能和更快地部署。 这里列出的内容太多，但最重要的功能包括以下内容。
-
调整图片大小：此扩展程序可让您设置指定大小，可用于调整上传到 Firebase 存储的图片大小。 它将原始图像和调整大小的图像存储在同一个存储桶中
-
将集合导出到 BigQuery：您可以将指定的 Firestore 集合导出到存储在 BigQuery 中，BigQuery 是一个云仓库，可让您真正快速地查询数据库。 导出过程是增量的，因此您的 Firestore 和 BigQuery 始终保持同步
-
触发电子邮件：您可以根据写入指定 Firestore 集合的文档内容触发将电子邮件发送到给定邮件
-
翻译文本：您可以将 Firestore 中的字符串翻译成多种语言，因为字符串的源语言是通过 Cloud Translation API 自动检测的
-
删除用户数据：一旦用户从经过身份验证的用户中删除，此扩展程序会自动删除用户的数据。 您可以配置此扩展程序以从以下任何或所有对象中删除用户数据：Cloud Firestore、实时数据库或云存储。 触发扩展删除数据的关键是用户的 UUID，该 UUID 对每个经过身份验证的用户都是唯一的
安装 Firebase
要开始使用 Firebase，我们必须创建一个 Firebase 帐户并启动一个新项目：
创建项目后，我们现在可以访问可用的 Firebase 功能以在我们的应用中使用。
接下来，我们可以继续为 Web 注册应用程序。 为此，请单击 Web 图标并将 Firebase 添加到应用程序。
来自 LogRocket 的更多精彩文章：
-
不要错过 The Replay 来自 LogRocket 的精选时事通讯
-
了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题
-
使用 React 的 useEffect 优化应用程序的性能
-
之间切换 在多个 Node 版本
-
了解如何 使用 AnimXYZ 为您的 React 应用程序制作动画
-
探索 Tauri ，一个用于构建二进制文件的新框架
-
比较 NestJS 与 Express.js
添加应用名称后，它将向我们展示如何在客户端安装 Firebase SDK。 另外，我们现在可以访问应用程序的唯一凭据。
然后，我们可以继续为这个应用程序设置我们的功能。 大多数应用程序所需的主要功能包括：
-
验证
-
火库
-
贮存
使用 Firebase 进行身份验证
如前所述，Firebase 提供了一个身份验证服务，让我们可以直接通过 Firebase 管理用户的身份验证数据。 它们还提供了不同的登录方法，我们可以使用这些方法对用户进行身份验证。
这些方法包括传统媒体，如电子邮件/密码、电话号码/短信，甚至是客人的匿名方法。 此外，Firebase 允许我们使用 Google、Twitter、Github 等第三方提供商对用户进行身份验证。
Firebase Firestore
Firebase Firestore 是 Firebase 作为其产品的一部分提供的 NoSQL 数据库。 一个好处是它允许您从客户端 SDK 直接在数据库上执行 CRUD 操作。
Firebase 中的存储
Firebase 还提供了一个云存储功能，允许我们存储媒体文件。 一个简单的用例是将图像上传到云并立即获取图像的 URL 的能力。
构建应用程序的常见场景是当我们需要上传图像并将其附加到其相关数据时。 我们可以继续上传图像，取回图像 URL，并将其作为文本保存在 Firestore 数据库中的文档中。
Using the Firebase Web SDK
一旦在我们的 Firebase 仪表板上设置了所有这些，我们需要将其直接集成到我们的前端。 我们首先将 Firebase SDK 安装到我们的项目中。 我们可以使用之前获得的凭据来执行此操作。
我们进入我们的应用程序并从 npm 安装 firebase 包。
npm install firebase
接下来，我们导入 firebase并初始化我们的 firebase 配置代码。
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
const firebaseConfig = {
apiKey: "API-KEY",
authDomain: "AUTH-DOMAIN",
databaseURL: "DATABASE-URL",
projectId: "PROJECT-ID",
storageBucket: "STORAGE-BUCKET",
messagingSenderId: "MESSAGING-SENDER-ID",
appId: "APP-ID"
};
// Initialize Firebase
initializeApp(firebaseConfig);
在将 Firebase 初始化到我们的客户端之后，让我们来看看如何使用它来添加身份验证。 在同一个文件中，我们将安装我们的 getAuth从 firebase/auth并初始化它。
import firebase from "firebase/app";
import { getAuth } from 'firebase/auth'
const firebaseConfig = {
apiKey: "API-KEY",
authDomain: "AUTH-DOMAIN",
databaseURL: "DATABASE-URL",
projectId: "PROJECT-ID",
storageBucket: "STORAGE-BUCKET",
messagingSenderId: "MESSAGING-SENDER-ID",
appId: "APP-ID"
};
// Initialize Firebase
initializeApp(firebaseConfig)
// Initialize Firebase auth
const auth = getAuth()
我们可以使用他们的电子邮件和密码在应用程序上注册新用户。 我们必须通过用户的 email和 password作为论据 auth.createUserWithEmailAndPassword()方法。
auth.createUserWithEmailAndPassword(auth, email, password)
.then((res) => {
let user = res.user;
})
.catch((error) => {
console.log(error.code);
console.log(error.message);
});
现在让我们使用 Firestore 将数据添加到我们的数据库中。 我们将创建一个名为的数据库集合 names并添加用户名。
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { doc, setDoc } from "firebase/firestore";
// Config and initialize Firebase as shown above
const firebaseConfig = {
// ...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
async function addDocs () {
try {
const addedDocs = await setDoc(doc(db, "names", "Doe"), {
fullName: "John Doe",
city: "London",
country: "UK"
});
console.log("Document's ID: ", addedDocs.id);
} catch (error) {
console.error("Error adding document to DB: ", error);
}
}
最后，要存储媒体文件，我们可以获取元数据并将其存储在我们的云存储中。
import { initializeApp } from "firebase/app";
import { getStorage, ref, uploadBytes } } from "firebase/storage";
// Initialize Firebase
const firebaseConfig = {
// ...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize cloud storage and get a reference to the service
const storage = getStorage(app);
const storageRef = ref(storage, 'images/logo.png');
const metadataFile = {
contentType: 'image/png',
};
const uploadImage = uploadBytes(storageRef, file, metadataFile);
什么是 Supabase？
Supabase 将自己描述为 Firebase 的开源替代品。 它旨在帮助开发人员在几分钟内启动他们的后端。 Supabase 的口号是“在一个周末构建，扩展到数百万”。
在撰写本文时，可供使用的 Supabase 产品包括 Postgres 数据库和身份验证服务、存储和边缘功能（用于后端逻辑的无服务器功能）。 Supbase 及其所有工具主要是开源的。
Postgres 数据库带有与数据库相关的工具 ，包括实时监听数据库变化和管理它们的界面。 另外，Supabase 提供了一些类似于 Firebase 的即时 API 和语法。 这有助于我们 以简单的模式处理 CRUD 操作，因此我们可以专注于构建而不是重写重复的 CRUD 代码。
Postgres 数据库采用表格形式，允许我们像在任何电子表格上一样存储结构化和相关数据。 有趣的是，在设置项目时，我们可以将现有的电子表格导入为我们的 Postgres 数据库。
安装 Supabase
要在我们的应用程序中使用 Supabase，我们必须在仪表板上进行设置。 首先，我们需要创建一个新项目。
项目准备就绪后，单击 SQL 编辑器 按钮。
Under the Quick start section, there are sample scripts for projects we can run. The aim is to get started quickly and create a database for the project.
让我们选择一个简单的项目：待办事项列表。 它将我们引导至 SQL 编辑器 页面。 进入此页面后，我们只需单击“ 运行” 按钮。
这将创建一个简单的待办事项列表，然后我们可以用我们的数据填充该列表。
现在我们已经设置了待办事项列表，最后一步是从客户端提取这些数据。 为此，我们需要从仪表板 项目 URL 和 API 密钥 中获取两个变量。 我们可以通过点击 Settings > API 来获得它。
然后我们可以将它作为环境变量的一部分保存在我们的 .env文件。
现在，让我们使用它的 npm包裹。
npm install @supabase/supabase-js
接下来，我们将其导入到我们的项目中并从 todos桌子。
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = process.env.APP_SUPABASE_URL
const supabaseAnonKey = process.env.APP_SUPABASE_ANON_KEY
const supabase = createClient(supabaseUrl, supabaseAnonKey)
const getTodo = async () => {
try {
let { data, error } = await supabase.from('todos').select('*')
if(data) {
return data
}
if(error) {
throw error
}
}
catch (error) {
console.log(error)
}
}
这 getTodo函数从我们的返回数据 todos表，还返回一个 error如果是这样的话。
Firebase 与 Supabase：哪个适合您的项目？
现在我们已经解释了 Firebase 和 Supabase 如何单独工作，让我们剖析和比较这两种技术，并检查何时应该使用 Supabase 而不是 Firebase。
导入预先存在的数据
使用 Supabase，我们可以轻松导入 CSV 或复制并粘贴电子表格来启动项目。 如果我们将数据从另一个平台迁移到 Supabase，那就太好了。
Firebase 不提供使我们能够直接上传批量数据的内置服务。 我们能做的最好的事情是使用第三方节点脚本或类似的东西，这看起来很骇人听闻。 另外，在做任何事情之前，我们必须将 CSV（或任何格式）转换为 JSON。
价钱
Supabase 是一个开源产品，这意味着它目前是免费的。 Supbase 团队计划在发布时收取托管费用。 个人和企业也有捐款计划来帮助赞助该产品。
另一方面，Firebase 不是免费的。 免费的 Spark 计划很慷慨，非常适合不会产生任何严重流量的副项目。 企业应用程序需要加入 Blaze 计划（即用即付）才能访问完整的产品，包括 Firebase 扩展和更多的数据库和存储空间。
关系数据库与 NoSQL 数据库
Supabase 是一个关系数据库，而 Firebase 是一个 NoSQL 数据库。 最适合您的项目的数据库取决于您正在构建的应用程序类型。
当数据是相关的、僵化的并且每次都需要保持一致时，关系数据库很有用。 另一方面，如果我们有不同数据类型的灵活数据并且我们需要快速移动，那么使用 NoSQL 可能会更好。
两种数据库类型各有利弊。 例如，NoSQL 数据库可能是重复的，但查询数据库很快。 这就是为什么它被用于搜索引擎和社交媒体提要。 一致性和性能是两个重要因素。
Firebase 扩展
Firebase 提供 官方扩展 ，可以帮助我们直接与其他相关服务集成，如 Stripe、Google play、Algolia、Twilio、Mailchimp 等。
图图影视App，内置所有影视资源，秒点秒加载追剧必备神器！
如果我们使用 Supabase，像这样的直接集成可以帮助我们最大限度地减少工作并抽象出我们自己实现所需的某些功能。
数据迁移
在处理企业应用程序时，数据迁移通常是优先事项，尤其是随着公司规模的扩大。
与使用 Supbase 提供的关系数据库相比，在没有架构或 ORM（如 Firebase）的 NoSQL 数据库上进行数据迁移可能会很困难。 当我们已经投入生产时，这就更难了。
您可以将我们所有的数据和架构下载为 .sql从仪表板上的备份部分中的 Supbase 文件。 或者，您可以使用命令行转储最新数据 pg_dump.
选择正确的 BaaS 在很大程度上取决于项目的功能需求和增长潜力。 如果您正在构建一个大型项目，您应该进行研究以了解与每个 BaaS 平台相关的限制。 这将帮助您避免未来的技术债务。
可扩展性和安全性
考虑到我们上面强调的几点，我们可以说这两种服务都具有相对可扩展性。 这种情况下的可扩展性现在将在很大程度上取决于应用程序数据架构的设计。 虽然，在这种情况下，Supabase 的优势主要在于它使用 Postgres 数据库及其数据迁移步骤。
结论
在这篇文章中，我们介绍了 Firebase 与 Supabase 的基础知识。 我们讨论了它们的一般架构、如何安装它们，并概述了这两个选项的主要功能和特性。 我们还根据各种标准对两者进行了并排比较。
谢谢阅读！
LogRocket ：全面了解您的网络和移动应用程序
LogRocket 是一个前端应用程序监控解决方案，可让您重现问题，就好像它们发生在您自己的浏览器中一样。 无需猜测错误发生的原因，或要求用户提供屏幕截图和日志转储，LogRocket 可让您重播会话以快速了解问题所在。 无论框架如何，它都可以完美地与任何应用程序配合使用，并且具有用于记录来自 Redux、Vuex 和 @ngrx/store 的附加上下文的插件。
除了记录 Redux 操作和状态之外，LogRocket 还记录控制台日志、JavaScript 错误、堆栈跟踪、带有标头 + 正文的网络请求/响应、浏览器元数据和自定义日志。 它还检测 DOM 以记录页面上的 HTML 和 CSS，即使是最复杂的单页和移动应用程序也能重新创建像素完美的视频。