[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-settings":3,"project-6a437bebab9e79d68cae0956":12,"projects-all":28},{"siteName":4,"siteDescription":5,"authorName":6,"copyright":7,"logoSymbol":8,"createdAt":9,"updatedAt":10,"id":11},"DICE","前端工程师的技术日志，记录 AI 探索与独立开发的思考","dice","Copyright © 2026 Dice. All rights reserved.","https:\u002F\u002Fstatic.diceio.com\u002Ff\u002Fb263d41b758729f8a32abdfeed19f620b85b22e9f4e2a126b2bd016f88a4df41",1782794723207,1783653454363,"6a4349e3ab9e79d68cae07a4",{"id":13,"title":14,"summary":15,"content":16,"cover":17,"category":18,"technologies":19,"stars":-1,"updatedAt":24,"status":25,"featured":-1,"repoUrl":-1,"demoUrl":-1,"maintained":26,"startedAt":27},"6a437bebab9e79d68cae0956","个人博客 —— 从零到上线的全栈实践","Dice是一个基于 Monorepo 架构的全栈个人博客系统，包含前台展示、内容管理后台、后端 API 和独立文件存储服务，从开发到部署全程自建。","# DiceIO 个人博客 —— 从零到上线的全栈实践\n\n## 项目简介\n\nDiceIO 是一个基于 Monorepo 架构的全栈个人博客系统，包含前台展示、内容管理后台、后端 API 和独立文件存储服务，从开发到部署全程自建。\n\n这个项目是一次 AI 辅助开发的完整实践：UI 设计参考由 **ChatGPT o3（Codex）** 生成设计思路与视觉方向，具体编码实现由 **Claude Code** 全程辅助完成——从组件拆分、接口设计到部署配置，AI 深度参与了每一个环节。\n\n---\n\n## 技术栈\n\n### Monorepo 架构\n- **pnpm Workspace** — 多包管理，依赖共享\n- **Turborepo** — 构建编排，任务缓存\n\n### 后端（apps\u002Fserver）\n- **Koa2 + TypeScript** — 轻量级 Node.js 框架\n- **MongoDB + Mongoose** — 文档数据库，存储文章\u002F项目\u002F笔记\n- **Redis** — Session 存储、接口缓存、GitHub 贡献图缓存\n- **JWT + Cookie** — 认证方案（UUID Cookie + Redis 存 Token，前端不接触 JWT）\n- **koa-helmet \u002F koa-ratelimit** — 安全与限流\n\n### 文件存储（apps\u002Fserver-storage）\n- **Koa2 + TypeScript** — 独立微服务，端口 3003\n- **MongoDB** — 文件元数据存储\n- **Sharp** — 图片压缩处理\n- **API Key 鉴权** — 与主服务隔离\n\n### 管理后台（apps\u002Fadmin）\n- **React 18 + TypeScript**\n- **Ant Design 5** — UI 组件库\n- **MobX** — 状态管理\n- **Vite** — 构建工具\n\n### 前台（apps\u002Fweb-ssr）\n- **Nuxt 3 + Vue 3 + TypeScript** — SSR 服务端渲染\n- **Tailwind CSS v4** — 原子化样式\n- **Pinia** — 状态管理\n- **marked** — Markdown 渲染\n\n### 部署\n- **GitHub Actions** — CI\u002FCD 自动部署，secrets 注入环境变量\n- **Linux VPS（腾讯云）** — 云服务器\n- **PM2** — 进程守护，零停机重载\n- **Nginx** — 反向代理 + HTTPS\n- **TrustAsia SSL** — HTTPS 证书\n\n---\n\n## 项目结构\n\n```\nblog\u002F\n├── apps\u002F\n│   ├── server\u002F          # Koa2 后端 API\n│   ├── server-storage\u002F  # 独立文件存储服务\n│   ├── admin\u002F           # React 管理后台\n│   └── web-ssr\u002F         # Nuxt 3 前台\n├── packages\u002F\n│   └── shared\u002F          # 共享静态资源\n├── .github\u002Fworkflows\u002F   # CI\u002FCD 配置\n└── ecosystem.config.cjs # PM2 进程配置\n```\n\n---\n\n## 核心功能\n\n- 文章、笔记、项目的增删改查\n- Markdown 编辑与渲染\n- 标签与分类管理\n- 图片上传与存储\n- GitHub 贡献热力图（GraphQL API + Redis 缓存至次日凌晨）\n- 站点统计数据（文章数、项目数、笔记数、标签数）\n- SSR 服务端渲染，SEO 友好\n- 移动端响应式适配\n\n---\n\n## 部署流程\n\n1. 推送代码到 `main` 分支触发 GitHub Actions\n2. SSH 连接服务器，自动生成 `.env` 文件（从 GitHub Secrets 注入）\n3. `pnpm install` 安装依赖\n4. 构建四个子包（`tsc` \u002F `nuxi build` \u002F `vite build`）\n5. PM2 零停机重载服务\n6. Nginx 反向代理分发流量：\n   - `diceio.com` → 前台 SSR\n   - `xxx.diceio.com` → 管理后台\n   - `static.diceio.com` → 文件存储\n\n---\n\n## CI\u002FCD 设计\n\n项目采用 **GitHub Actions + appleboy\u002Fssh-action** 实现全自动部署，核心设计原则是**敏感信息零提交**。\n\n### 流程图\n\n```\npush to main\n     │\n     ▼\nGitHub Actions 触发\n     │\n     ▼\nSSH 连接服务器\n     │\n     ├─ git pull 拉取最新代码\n     │\n     ├─ 从 GitHub Secrets 生成 .env 文件\n     │   ├─ apps\u002Fserver\u002F.env\n     │   └─ apps\u002Fserver-storage\u002F.env\n     │\n     ├─ pnpm install 安装依赖\n     │\n     ├─ 构建四个子包\n     │   ├─ @blog\u002Fserver（tsc）\n     │   ├─ @blog\u002Fserver-storage（tsc）\n     │   ├─ @blog\u002Fweb-ssr（nuxi build）\n     │   └─ @blog\u002Fadmin（vite build）\n     │\n     └─ PM2 零停机重载\n```\n\n### 关键设计点\n\n**1. 敏感信息管理**\n\n`.env` 文件永远不进 Git，所有密钥（数据库连接串、JWT 密钥、GitHub Token 等）统一存储在 GitHub Secrets，CI\u002FCD 运行时动态生成到服务器，本地开发手动维护 `.env`，`.env.example` 作为变量模板提交。\n\n**2. 环境变量安全传递**\n\n使用 `appleboy\u002Fssh-action` 的 `envs` 参数将 Secrets 以环境变量形式注入 SSH 会话，避免直接在脚本中拼接明文密钥，防止日志泄露。\n\n**3. PM2 零停机重载**\n\n使用 `pm2 reload` 而非 `pm2 restart`，新进程启动完成后才关闭旧进程，部署期间服务不中断。`ecosystem.config.cjs` 使用 `__dirname` 动态计算路径，不依赖硬编码的服务器目录。\n\n**4. Monorepo 按需构建**\n\n通过 `pnpm --filter` 精确指定构建目标，只构建需要的子包，避免不必要的编译开销。\n\n---\n\n## AI 协作方式\n\n这个项目完整践行了\"AI 辅助开发\"的工作流：\n\n- **ChatGPT 5.5（Codex）** 负责设计阶段：参考 优秀网站 的视觉风格，生成整体布局思路、组件拆分方案和设计语言定义（配色、间距、字体规范）\n- **Claude Code** 负责实现阶段：根据设计方向逐步实现每个模块，包括组件编写、接口联调、移动端适配、CI\u002FCD 配置、服务器部署全流程\n\n两个 AI 各司其职，Codex 擅长创意与设计决策，Claude Code 擅长工程落地与代码实现，配合下来整体效率远超纯人工开发。\n\n---\n\n## 开发心得\n\n整个项目从架构设计到上线历经多次迭代。Monorepo 让多个服务共享类型定义和配置，大幅减少重复代码。SSR 方案选择 Nuxt 3 而非传统 SPA，主要考虑 SEO 和首屏加载性能。后端认证采用 UUID + Redis 的方案，JWT 始终不暴露给前端，安全性更高。CI\u002FCD 通过 GitHub Secrets 管理敏感信息，`.env` 文件永远不进版本库。\n\n最大的收获是验证了 AI 协作开发的可行性——不是让 AI 替代开发者，而是让开发者借助 AI 以更快的速度、更低的心智负担完成复杂的全栈项目。\n","\u002Fcovers\u002Fproj-0.webp","personal",[20,21,22,23],"Nux.js","Koa2","React","Mongodb",1783588275822,"active",true,1778342400000,[29],{"id":13,"title":14,"summary":15,"content":-1,"cover":17,"category":18,"technologies":30,"stars":-1,"updatedAt":31,"status":25,"featured":-1,"repoUrl":-1,"demoUrl":-1,"maintained":26,"startedAt":27},[20,21,22,23],""]