用 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

部署架构

Text

1 2 3 4 5 6 7

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

这样部署的好处是：

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

主要部署步骤

1. 检查项目结构

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

Text

1 2

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

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

Text

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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=允许跨域的前端地址

前端需要：

Text

1 2 3 4 5

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；
运行项目自带初始化脚本，创建数据表和默认数据。

本次数据库采用：

Text

1 2 3 4

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

3. 创建 Cloudflare R2 媒体存储

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

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

Text

https://pub-xxxxx.r2.dev

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

4. 初始化后端数据库

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

Text

1 2

npm install
npm run db:init

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

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

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

Text

pyq-blog-backend

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

Text

{"status":"ok"}

公开健康检查地址：

Text

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

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

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

Text

pyq-blog-frontend

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

Text

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

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

7. 验证部署

最后分别验证：

Text

1 2 3

后端健康检查：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 拆成前端、后端、数据库、对象存储四部分分别托管：

Text

1 2 3 4

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

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

用 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

部署架构

Text

1 2 3 4 5 6 7

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

这样部署的好处是：

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

主要部署步骤

1. 检查项目结构

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

Text

1 2

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

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

Text

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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=允许跨域的前端地址

前端需要：

Text

1 2 3 4 5

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；
运行项目自带初始化脚本，创建数据表和默认数据。

本次数据库采用：

Text

1 2 3 4

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

3. 创建 Cloudflare R2 媒体存储

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

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

Text

https://pub-xxxxx.r2.dev

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

4. 初始化后端数据库

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

Text

1 2

npm install
npm run db:init

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

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

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

Text

pyq-blog-backend

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

Text

{"status":"ok"}

公开健康检查地址：

Text

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

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

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

Text

pyq-blog-frontend

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

Text

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

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

7. 验证部署

最后分别验证：

Text

1 2 3

后端健康检查：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 拆成前端、后端、数据库、对象存储四部分分别托管：

Text

1 2 3 4

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

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

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

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

项目简介

部署架构

主要部署步骤

1. 检查项目结构

2. 创建 TiDB Cloud 数据库

3. 创建 Cloudflare R2 媒体存储

4. 初始化后端数据库

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

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

7. 验证部署

本次部署结果

后续可优化项

小结

留言

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

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

项目简介

部署架构

主要部署步骤

1. 检查项目结构

2. 创建 TiDB Cloud 数据库

3. 创建 Cloudflare R2 媒体存储

4. 初始化后端数据库

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

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

7. 验证部署

本次部署结果

后续可优化项

小结

留言