背景

今天发现我的留言板莫名出现了一条留言”后端 RAG 服务是否已启动”。本来慌了 0.0,以为是什么龙虾觉醒,因为一般只有我自己和少数几个人知道我的博客,后来去 LeanCloud 面板看了一眼,卧槽好像还真是有陌生人留言。并且还额外发现了好几条我之前博客的评论,都被我忽视了!!看来我的博客在公网上还是有人看的嘛嘿嘿😈

于是我打算设置一个留言自动提醒功能。此外,官网看到 LeanCloud 即将停服( https://docs.leancloud.cn/sdk/announcements/sunset-announcement/ ),因此我还打算将留言系统从 LeanCloud 迁移到 Waline。此篇用于记录迁移过程。


相关概念介绍

LeanCloud

LeanCloud 是一个 BaaS(Backend as a Service,后端即服务)平台,提供数据库、云函数、用户系统、文件存储等功能。简单说就是:你不需要自己搭后端服务器,直接调它的 SDK 就能存取数据

很多静态博客的评论系统(比如 Valine)都把 LeanCloud 当数据库用。但现在 LeanCloud 国内版宣布即将停服,需要迁移。

Valine

Valine 是一款基于 LeanCloud 的评论系统,无后端、部署简单,曾经在静态博客圈非常流行。但由于直接暴露 LeanCloud AppKey 在前端,存在安全隐患,目前已逐渐被 Waline 取代。

Waline

Waline 可以理解为 Valine 的”进化版”,在 Valine 的基础上增加了独立的服务端,解决了安全问题,同时支持更多功能:

  • 评论通知(邮件/微信/Telegram)
  • 评论管理后台
  • 浏览量统计
  • 多数据库支持

Vercel

Vercel 是一个面向前端开发者的云部署平台,支持一键部署、自动 CI/CD、全球 CDN 加速。它是 Next.js 的创造者,免费套餐对个人项目非常友好。

Waline 的服务端可以直接部署在 Vercel 上,完全免费,几分钟搞定。

Neon

Neon 是一个 Serverless PostgreSQL 数据库服务,按用量计费,免费额度对小型博客绰绰有余。Vercel 的 Storage 功能可以直接集成 Neon,搭配 Waline 使用非常方便。

概念对比总览

名称 类型 定位 是否免费
LeanCloud BaaS 提供数据库、云函数、用户系统等后端服务 免费套餐(即将停服)
Valine 评论系统 基于 LeanCloud 的无后端评论工具 免费
Waline 评论系统 Valine 的进化版,有独立服务端,更安全 免费
Vercel 部署平台 托管前端/全栈应用,自动 CI/CD 免费套餐
Neon 数据库服务(DBaaS) Serverless PostgreSQL,按量计费 免费套餐

本次迁移的组合就是:Waline(评论系统)+ Vercel(服务端托管)+ Neon(数据库),三者均有免费套餐,对个人博客来说零成本。


先导出 LeanCloud 数据

在做任何操作之前,先把旧数据导出来,防止停服后数据丢失。

  1. 登录 LeanCloud 控制台
  2. 进入你的应用 → 数据存储 → 结构化数据
  3. 找到 Comment 表,点击右上角导出,选择 JSON 格式
  4. 下载导出文件,保存好

部署 Waline 服务端(Vercel + Neon)

官方推荐的方案是 Vercel + Neon,完全免费。

本教程只做简单记录,更详细的教程参考官方:https://waline.js.org/guide/get-started/

1.1 一键部署到 Vercel

点击下方按钮,跳转到 Vercel 进行部署(需要 GitHub 账号登录):

Deploy with Vercel

输入一个项目名称,点击 Create 即可,Vercel 会自动帮你 fork 仓库并完成部署。

1.2 创建 Neon 数据库

  1. 部署成功后,进入 Vercel 项目控制台,点击顶部 Storage
  2. 选择 Create Database,数据库类型选 Neon,一路 Continue
  3. 数据库创建完成后,点击 Open in Neon 跳转到 Neon 控制台
  4. 在左侧选择 SQL Editor,将 waline.pgsql 中的建表 SQL 全部粘贴进去,点击 Run 执行
  5. 回到 Vercel 项目控制台,点击顶部 Storage 标签,确认刚才创建的 Neon 数据库显示在列表中,且状态为已连接。如果没连接,点击 Connect 完成关联
  6. 回到 Vercel,点击 Deployments,在最新一次部署右侧点击 Redeploy,让数据库配置生效。

1.3 绑定自定义域名(可选)

可以把自己的域名绑定到 Waline 服务端,这样国内访问更稳定,也更好看。以我自己的域名 tianlejin.top 为例:

  1. 进入 Vercel 项目控制台 → 顶部 Settings → 左侧 Domains
  2. 输入你想用的子域名,比如 waline.tianlejin.top,点击 Add
  3. Vercel 会提示你去域名服务商添加一条 DNS 解析记录:
记录类型 主机记录 记录值
CNAME waline cname.vercel-dns.com
  1. 登录你的域名服务商控制台(阿里云、腾讯云等),在 DNS 解析里添加上述记录
  2. 等待几分钟后,回到 Vercel Domains 页面,显示 ✅ Valid Configuration 即表示生效

之后你的 Waline 服务端地址就变成了 https://waline.tianlejin.top,评论管理后台地址为 https://waline.tianlejin.top/ui,记得同步更新 Hexo 配置里的 serverURL

1.4 注册管理员账号

部署完成后,访问 https://waline.tianlejin.top/ui/register 注册账号。(如果没绑定域名就是 https://你的项目名.vercel.app/ui/register第一个注册的账号会自动成为管理员,之后就可以在 /ui 管理评论了。


迁移历史评论数据

Waline 官方提供了数据迁移助手( https://waline.js.org/migration/tool.html ),可以将 LeanCloud/Valine 的数据转换成 Waline 支持的格式。

  1. 打开迁移助手页面
  2. 来源选择 Valine(LeanCloud 导出的数据和 Valine 格式一致)
  3. 目标选择 Waline MySQL/PostgreSQL/SQLite
  4. 上传之前导出的 JSON 文件,点击转换,下载转换后的文件
  5. 登录 Neon 控制台,在 SQL Editor 中执行导入操作

注:官方数据迁移助手点击转换按钮后好像用不了,因此我是用AI自己写了一个转换脚本实现的转换,详见 https://tianlejin.top/blog/Valine2Waline_script/


Hexo Butterfly 主题接入 Waline

Butterfly 主题原生支持 Waline,不需要额外安装插件,直接修改主题配置文件即可。

打开 _config.butterfly.yml(或者 themes/butterfly/_config.yml),修改以下配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
comments:
use: Waline # 将原来的 Valine 改为 Waline(过渡期可用: Valine,Waline)
text: true # 在按钮旁显示评论系统名称
lazyload: false # 懒加载(开启后评论数统计会失效)
count: true # 在文章头图显示评论数
card_post_count: true # 在首页显示评论数

waline:
serverURL: https://waline.tianlejin.top # 你的 Waline 服务端地址(必填)
bg: # 评论框背景图片地址(可选)
pageview: false # 是否用 Waline 的浏览量统计(不要和 busuanzi 同时开启)
option: # Waline 客户端参数(可选)
lang: zh-CN
pageSize: 10
locale:
placeholder: 欢迎留言~ 填写邮箱可接收回复通知 # 这个字段与 Valien 不一样

更多 Waline 配置参数参考官方文档:https://waline.js.org/reference/client/props.html

保存后重新生成并部署:

1
hexo clean && hexo generate && hexo deploy

配置邮件通知

在 Vercel 项目的 Settings → Environment Variables 中添加以下环境变量:

必填环境变量:

变量名 说明 示例
SMTP_SERVICE SMTP 邮件发送服务提供商(支持列表 QQGmail
SMTP_HOST SMTP 服务器地址(如果 SMTP_SERVICE 不支持则必填) smtp.qq.com
SMTP_PORT SMTP 服务器端口(如果 SMTP_SERVICE 不支持则必填) 465
SMTP_USER SMTP 邮件发送服务的用户名,一般为登录邮箱 [email protected]
SMTP_PASS SMTP 邮件发送服务的密码,一般为邮箱授权码 xxxxxx
SMTP_SECURE 是否使用 SSL 连接 SMTP true
SITE_NAME 网站名称,用于在邮件中显示 我的小博客
SITE_URL 网站地址,用于在邮件中显示 https://yourblog.com
AUTHOR_EMAIL 博主邮箱,用来接收新评论通知 [email protected]

选填环境变量:

变量名 说明
SENDER_NAME 自定义发送邮件的发件人
SENDER_EMAIL 自定义发送邮件的发件地址
MAIL_SUBJECT 自定义评论回复邮件标题
MAIL_TEMPLATE 自定义评论回复邮件内容
MAIL_SUBJECT_ADMIN 自定义新评论通知邮件标题
MAIL_TEMPLATE_ADMIN 自定义新评论通知邮件内容

QQ 邮箱授权码获取方法:

  1. 登录网页版 QQ 邮箱(mail.qq.com)
  2. 点击右上角「设置」→「账户」
  3. 找到「POP3/IMAP/SMTP/Exchange 服务」,点击开启,发送短信后即可获得授权码

注意:更改 QQ 密码或独立密码会触发授权码过期,届时需要重新获取新的授权码。

添加完毕后,记得在 Deployments 页面重新部署一次让配置生效。之后有人留言就会收到邮件提醒了 ✉️

此外,还可以设置微信、QQ、飞书等提醒,详见 https://waline.js.org/guide/features/notification.html


迁移前后架构对比

角色 迁移前 迁移后
前端评论组件 Valine Waline 客户端
评论服务逻辑 LeanCloud(内置) Waline 服务端(运行在 Vercel)
数据存储 LeanCloud(内置) Neon(PostgreSQL)
评论通知 ❌ 无 ✅ 邮件通知
评论管理后台 LeanCloud 控制台 Waline 自带管理界面(/ui

可以看出,原来 LeanCloud 一个平台承包了”服务逻辑”和”数据存储”两件事,迁移后由 Vercel 和 Neon 分别接手,职责更清晰,也更灵活。


拓展阅读