用 Vercel、TiDB Cloud 和 Cloudflare R2 部署朋友圈博客 pyq

这是一篇部署记录，整理了本次把开源项目 zhjurz/pyq 部署为在线博客的主要过程。文中只保留架构、步骤和公开访问地址，已去除 API Key、数据库密码、Token、私钥、数据库账号等敏感信息。

项目简介

pyq 是一个类似朋友圈形态的个人博客项目，前后端分离：

前端：Next.js，部署到 Vercel；
后端：Node.js / Express / Sequelize，部署到 Vercel Serverless；
数据库：MySQL 协议兼容数据库，本次使用 TiDB Cloud 免费/开发规格；
媒体存储：Cloudflare R2，用于图片、音频等对象存储。

最终访问地址：

博客前端：https://pyq-blog-frontend.vercel.app
后端健康检查：https://pyq-blog-backend.vercel.app/api/health

部署架构

用户浏览器
  ↓
Vercel Frontend / Next.js
  ↓ /api rewrite
Vercel Backend / Express API
  ├─ TiDB Cloud：保存文章、用户、评论、点赞等数据
  └─ Cloudflare R2：保存上传媒体文件

这样部署的好处是：

前端和后端都可以用 Vercel 托管，更新方便；
TiDB Cloud 兼容 MySQL 协议，适合 Sequelize / mysql2 这类项目；
R2 适合保存博客媒体文件，避免把上传文件放在 Serverless 本地磁盘；
后续绑定自定义域名时，只需要分别给前端、后端、媒体域名做映射即可。

主要部署步骤

1. 检查项目结构

先拉取项目源码，确认它不是单体应用，而是包含：

frontend/  # Next.js 前端
backend/   # Express 后端

后端需要以下关键环境变量：

DB_HOST=数据库地址
DB_PORT=数据库端口
DB_USER=数据库用户
DB_PASSWORD=数据库密码
DB_NAME=数据库名
DB_SSL=true

JWT_SECRET=随机长字符串
REVALIDATE_SECRET=随机长字符串

R2_ACCOUNT_ID=Cloudflare Account ID
R2_ACCESS_KEY_ID=R2 Access Key
R2_SECRET_ACCESS_KEY=R2 Secret Key
R2_BUCKET=Bucket 名称
R2_PUBLIC_URL=公开媒体访问域名

CLIENT_URL=前端访问地址
CORS_ALLOWED_ORIGINS=允许跨域的前端地址

前端需要：

BACKEND_URL=后端地址
NEXT_PUBLIC_API_URL=/api
NEXT_PUBLIC_MEDIA_ORIGIN=媒体公开域名
NEXT_PUBLIC_SITE_URL=前端站点地址
REVALIDATE_SECRET=与后端一致的重建密钥

实际部署时，这些值已通过 Vercel 环境变量配置；敏感值没有写入本文。

2. 创建 TiDB Cloud 数据库

由于项目使用 MySQL 协议，本次选择 TiDB Cloud 的免费/开发规格集群。

过程概括：

创建 TiDB Cloud API Key；
使用 TiDB Cloud API 创建 DEVELOPER 规格集群；
等待集群状态变为 AVAILABLE；
创建项目数据库 moment_blog；
运行项目自带初始化脚本，创建数据表和默认数据。

本次数据库采用：

Cloud Provider: AWS
Region: ap-southeast-1
Database: moment_blog
SSL: enabled

3. 创建 Cloudflare R2 媒体存储

创建了一个新的 R2 Bucket 用于保存博客媒体文件，并启用了公开访问域名。

部署中用到的公开媒体域名形态类似：

https://pub-xxxxx.r2.dev

R2 负责保存上传图片、音频等文件；数据库只保存文件 URL 和元数据。

4. 初始化后端数据库

在后端目录安装依赖后，先创建数据库，再执行项目自带初始化脚本：

npm install
npm run db:init

初始化完成后，数据库中会生成用户、文章、评论、站点配置等基础表结构。

5. 创建并部署 Vercel 后端项目

后端作为独立 Vercel 项目部署，项目名为：

pyq-blog-backend

部署时配置了数据库、JWT、R2、前端 CORS 等环境变量。部署完成后，健康检查接口返回：

{"status":"ok"}

公开健康检查地址：

https://pyq-blog-backend.vercel.app/api/health

6. 创建并部署 Vercel 前端项目

前端作为独立 Vercel 项目部署，项目名为：

pyq-blog-frontend

前端通过 /api rewrite 访问后端，部署完成后访问：

https://pyq-blog-frontend.vercel.app

返回正常 HTML 页面，说明前端部署成功。

7. 验证部署

最后分别验证：

后端健康检查：200 OK
前端首页：200 OK
前端 /api/health 代理：200 OK

说明：

Vercel 前端可访问；
Vercel 后端可访问；
前端到后端的 API rewrite 正常；
后端到 TiDB Cloud 数据库连接正常。

本次部署结果

公开访问地址：

博客首页：https://pyq-blog-frontend.vercel.app
后端健康检查：https://pyq-blog-backend.vercel.app/api/health

使用到的云资源：

Vercel：前端项目、后端项目；
TiDB Cloud：MySQL 兼容数据库；
Cloudflare R2：媒体对象存储。

后续可优化项

绑定自定义域名，例如：

- blog.example.com 指向前端；

- api-blog.example.com 指向后端；

- media-blog.example.com 指向 R2。

修改默认管理员密码，避免继续使用初始化默认密码。
给数据库和 R2 做周期性备份或导出。
将部署脚本整理为可重复执行的脚本，方便以后更新项目。
配置更严格的 CORS 和访问控制，只允许正式域名访问。

小结

这次部署的关键点是把 pyq 拆成前端、后端、数据库、对象存储四部分分别托管：

Next.js 前端 → Vercel
Express 后端 → Vercel
MySQL 兼容数据库 → TiDB Cloud
媒体文件 → Cloudflare R2

这种方案成本低、维护简单，适合个人博客、小型朋友圈站点和轻量内容系统。