Site cover image

🗣️Echoes of ‘70s

漂泊半生,懵懂无知,岁月如流,心火不灭。

😎Appflowy+Supabase云端同步方法

appflowy是什么

一句话解释:开源、免费、本地化的Notion替代品

appflowy的优势

相比Notion:离线存储(可自建云同步),端到端加密,开放AI接口(支持OpenAI和StabilityAI)

appflowy如何跨平台同步

这是今天重点要讲的内容。

云同步的方式

  1. 官方AppFlowy Cloud
  2. 自建AppFlowy Cloud
  3. 自建Supabase服务

三种方式的差异

第一种方式目前在内测,需要申请。话说如果我用这个跟Notion比就没啥优势了。

第二种方式最简单,有一台云服务器,通过Docker安装即可。这个需要点成本。安装可以参考笨猪的博客https://www.benzhu.xyz/自托管笔记应用appflowy安装与部署/

第三种方式最便宜,但步骤相对复杂,目前我在网上没看到有案例,也算抛砖引玉。今天我们重点来讲第三种方法。

用Supabaese+GoogleCloud来实现Appflowy托管+登录

声明:本文的主要内容来自官方文档https://docs.appflowy.io/docs/guides/appflowy/self-hosting-appflowy-using-supabase

部署架构图

Image in a image block

Supabase提供了身份验证和数据存储的能力。

设置Supabase

什么是Supabase?

简单说Supabase就是一种BaaS服务,一种开源的Firebase替代。提供了Postgres数据库、Authenticaion、存储和边缘函数等功能的后端服务,可以快速的搭建应用。

Step1:建立一个项目
Image in a image block
Image in a image block

选一个速度较快的区域,大陆的话可以选新加坡首尔日本。生成一个数据库强密码,保存下来以备忘记。

等待一会儿项目就建好了。

Step2:配置Postgres数据库

这个步骤参考:https://github.com/AppFlowy-IO/AppFlowy-Supabase/tree/main/postgres

首先:git clone https://github.com/AppFlowy-IO/AppFlowy-Supabase

然后:在本地的AppFlowy-Supabase目录中,创建一个.env文件

Image in a image block

文件内容:

SUPABASE_DB=db.xxxxxxx.supabase.co
SUPABASE_DB_USER=postgres
SUPABASE_DB_PORT=6543
SUPABASE_DB_PASSWORD=xxxxxxx

这些参数在Supabase的Setting中可以看到

Image in a image block

.env文件准备好后,执行:

cargo run migration run ".env"

但是注意,如果你电脑上有cargo,那么下面不用看。如果没有,那务必注意下面的说明:

cargo需要安装Rust,而Rust如果不用国内源,会慢到怀疑人生。所以一定要换源

先从https://www.rust-lang.org/tools/install下载Rust安装包,然后通过cmd命令,进入rustup-init.exe所在目录,敲入下面的指令设置环境变量:

set RUSTUP_DIST_SERVER=https://mirrors.ustc.edu.cn/rust-static
set RUSTUP_UPDATE_ROOT=https://mirrors.ustc.edu.cn/rust-static/rustup

安装完成后,在安装目录下的cargo目录中,新建一个config文件,内容如下

[source.crates-io]
registry ="https://github.com/rust-lang/crates.io-index"
replace-with = 'ustc'

[source.ustc]
registry = "http://mirrors.ustc.edu.cn/crates.io-index"

等这些都完成了,执行上面的cargo指令来创建数据库。

数据库建完后,在Supabase的Table页面中可以看到刚才我们创建的表。

Step3:配置Appflowy来进行登录

Appflowy暂时还不支持独立的账户,所以目前可以用Google、Discord和Github账号登录。

Image in a image block

首先我们要理解,appflowy登录认证目前也是靠Supabase来实现的,因此在appflowy客户端中不会单独配置账户的内容,只需要配置Supabase的URL和公钥即可:

Image in a image block

这个信息在Supabase的DashBoard,查看Setting,然后选择API Settings即可查看:

Image in a image block

既然在appflowy里面只需要配置Supabase,那么我们的登录信息肯定也在Supabase里,没毛病吧。

Step4:以Google为例,展示如何登录
  1. 找到Supabase负责身份认证的模块
Image in a image block
  1. 查看Google登录需要的项目

从中可以看出,如果要用Google登录,需要clientID和密钥,以及回调的URL。记住这个回调的URL,下面第5步要用。

Image in a image block
  1. 登录GoogleCloud控制台,选择新建项目
Image in a image block
Image in a image block
Image in a image block
Image in a image block
  1. 创建成功后进入项目,选择“API和服务”,选择OAuth,外部,创建。

在应用注册中,输入名称和邮件地址。

Image in a image block
Image in a image block

然后一路点“保存并继续”,到4步都走完。点击页面最下方“返回信息中心”。

Image in a image block
  1. 创建凭据
Image in a image block

这里我们选第二项OAuth客户端ID。然后重点来了

Image in a image block

这里第一个URL就是我们刚才在Supabase中创新的的项目的URL。

而第二个重定向的URL,则是我们在第2步中看到的那个回调的URL。这俩URL的域名是一样的。

点击创建,我们就生成了一个OAuth2.0的客户端凭据。

Image in a image block

是不是看起来似曾相识,对了,把这个客户端ID和密钥贴到第2步中的ClientID和Client Secret即可。

基本上到这一步没出错的话,就看到终点的标记了。

Step6:配置Supabase认证通过后的重定向URL
Image in a image block

结束

现在我们回到Step3,选择Google账号登录,然后没有意外的话,会看到Appflowy的User中出现了你的Gmail邮箱地址,文件存储的位置也变成了类似“C:\Users\你的用户名\AppData\Roaming\io.appflowy\AppFlowy\data_xxxxxxxxxxxxxx/1这样的位置。

至此,通过google登录并同步就完成了。

我在手机上没有试验,有兴趣的童鞋可以看看是不是可行,但我怀疑没有Google框架的话,手机大概率是过不去的。