←返回项目列表个人博客 —— 从零到上线的全栈实践

2026

维护中

个人博客 —— 从零到上线的全栈实践

Dice是一个基于 Monorepo 架构的全栈个人博客系统，包含前台展示、内容管理后台、后端 API 和独立文件存储服务，从开发到部署全程自建。

#Nux.js #Koa2 #React #Mongodb

DiceIO 个人博客 —— 从零到上线的全栈实践

项目简介

DiceIO 是一个基于 Monorepo 架构的全栈个人博客系统，包含前台展示、内容管理后台、后端 API 和独立文件存储服务，从开发到部署全程自建。

这个项目是一次 AI 辅助开发的完整实践：UI 设计参考由 ChatGPT o3（Codex） 生成设计思路与视觉方向，具体编码实现由 Claude Code 全程辅助完成——从组件拆分、接口设计到部署配置，AI 深度参与了每一个环节。

技术栈

Monorepo 架构

  • pnpm Workspace — 多包管理，依赖共享
  • Turborepo — 构建编排，任务缓存

后端（apps/server）

  • Koa2 + TypeScript — 轻量级 Node.js 框架
  • MongoDB + Mongoose — 文档数据库，存储文章/项目/笔记
  • Redis — Session 存储、接口缓存、GitHub 贡献图缓存
  • JWT + Cookie — 认证方案（UUID Cookie + Redis 存 Token，前端不接触 JWT）
  • koa-helmet / koa-ratelimit — 安全与限流

文件存储（apps/server-storage）

  • Koa2 + TypeScript — 独立微服务，端口 3003
  • MongoDB — 文件元数据存储
  • Sharp — 图片压缩处理
  • API Key 鉴权 — 与主服务隔离

管理后台（apps/admin）

  • React 18 + TypeScript
  • Ant Design 5 — UI 组件库
  • MobX — 状态管理
  • Vite — 构建工具

前台（apps/web-ssr）

  • Nuxt 3 + Vue 3 + TypeScript — SSR 服务端渲染
  • Tailwind CSS v4 — 原子化样式
  • Pinia — 状态管理
  • marked — Markdown 渲染

部署

  • GitHub Actions — CI/CD 自动部署，secrets 注入环境变量
  • Linux VPS（腾讯云） — 云服务器
  • PM2 — 进程守护，零停机重载
  • Nginx — 反向代理 + HTTPS
  • TrustAsia SSL — HTTPS 证书

项目结构

blog/
├── apps/
│   ├── server/          # Koa2 后端 API
│   ├── server-storage/  # 独立文件存储服务
│   ├── admin/           # React 管理后台
│   └── web-ssr/         # Nuxt 3 前台
├── packages/
│   └── shared/          # 共享静态资源
├── .github/workflows/   # CI/CD 配置
└── ecosystem.config.cjs # PM2 进程配置

核心功能

  • 文章、笔记、项目的增删改查
  • Markdown 编辑与渲染
  • 标签与分类管理
  • 图片上传与存储
  • GitHub 贡献热力图（GraphQL API + Redis 缓存至次日凌晨）
  • 站点统计数据（文章数、项目数、笔记数、标签数）
  • SSR 服务端渲染，SEO 友好
  • 移动端响应式适配

部署流程

  1. 推送代码到 main 分支触发 GitHub Actions
  2. SSH 连接服务器，自动生成 .env 文件（从 GitHub Secrets 注入）
  3. pnpm install 安装依赖
  4. 构建四个子包（tsc / nuxi build / vite build）
  5. PM2 零停机重载服务
  6. Nginx 反向代理分发流量：
    • diceio.com → 前台 SSR
    • xxx.diceio.com → 管理后台
    • static.diceio.com → 文件存储

CI/CD 设计

项目采用 GitHub Actions + appleboy/ssh-action 实现全自动部署，核心设计原则是敏感信息零提交。

流程图

push to main
     │
     ▼
GitHub Actions 触发
     │
     ▼
SSH 连接服务器
     │
     ├─ git pull 拉取最新代码
     │
     ├─ 从 GitHub Secrets 生成 .env 文件
     │   ├─ apps/server/.env
     │   └─ apps/server-storage/.env
     │
     ├─ pnpm install 安装依赖
     │
     ├─ 构建四个子包
     │   ├─ @blog/server（tsc）
     │   ├─ @blog/server-storage（tsc）
     │   ├─ @blog/web-ssr（nuxi build）
     │   └─ @blog/admin（vite build）
     │
     └─ PM2 零停机重载

关键设计点

1. 敏感信息管理

.env 文件永远不进 Git，所有密钥（数据库连接串、JWT 密钥、GitHub Token 等）统一存储在 GitHub Secrets，CI/CD 运行时动态生成到服务器，本地开发手动维护 .env，.env.example 作为变量模板提交。

2. 环境变量安全传递

使用 appleboy/ssh-action 的 envs 参数将 Secrets 以环境变量形式注入 SSH 会话，避免直接在脚本中拼接明文密钥，防止日志泄露。

3. PM2 零停机重载

使用 pm2 reload 而非 pm2 restart，新进程启动完成后才关闭旧进程，部署期间服务不中断。ecosystem.config.cjs 使用 __dirname 动态计算路径，不依赖硬编码的服务器目录。

4. Monorepo 按需构建

通过 pnpm --filter 精确指定构建目标，只构建需要的子包，避免不必要的编译开销。

AI 协作方式

这个项目完整践行了"AI 辅助开发"的工作流：

  • ChatGPT 5.5（Codex） 负责设计阶段：参考 优秀网站 的视觉风格，生成整体布局思路、组件拆分方案和设计语言定义（配色、间距、字体规范）
  • Claude Code 负责实现阶段：根据设计方向逐步实现每个模块，包括组件编写、接口联调、移动端适配、CI/CD 配置、服务器部署全流程

两个 AI 各司其职，Codex 擅长创意与设计决策，Claude Code 擅长工程落地与代码实现，配合下来整体效率远超纯人工开发。

开发心得

整个项目从架构设计到上线历经多次迭代。Monorepo 让多个服务共享类型定义和配置，大幅减少重复代码。SSR 方案选择 Nuxt 3 而非传统 SPA，主要考虑 SEO 和首屏加载性能。后端认证采用 UUID + Redis 的方案，JWT 始终不暴露给前端，安全性更高。CI/CD 通过 GitHub Secrets 管理敏感信息，.env 文件永远不进版本库。

最大的收获是验证了 AI 协作开发的可行性——不是让 AI 替代开发者，而是让开发者借助 AI 以更快的速度、更低的心智负担完成复杂的全栈项目。