用 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，用于图片、音频等对象存储。
最终访问地址：
部署架构
用户浏览器
↓
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: enabled3. 创建 Cloudflare R2 媒体存储
创建了一个新的 R2 Bucket 用于保存博客媒体文件，并启用了公开访问域名。
部署中用到的公开媒体域名形态类似：
https://pub-xxxxx.r2.devR2 负责保存上传图片、音频等文件；数据库只保存文件 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/health6. 创建并部署 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 数据库连接正常。
本次部署结果
公开访问地址：
使用到的云资源：
- 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这种方案成本低、维护简单，适合个人博客、小型朋友圈站点和轻量内容系统。
