预计阅读时间:21 分钟
🚀 科技感个人博客 — Python 全栈架构(轻量云优化版)
基于 2核2G 轻量云服务器 + Vercel 前端托管 设计
一、部署架构策略
1.1 资源分配全景
服务器 47.116.6.95(2核 / 1.8G内存 / 40G磁盘)
│
├─ 系统 + 基础服务 ~460M ← 阿里云 Linux 自身
├─ blog 后端服务 ~250M ← PG + FastAPI + Redis + Nginx
├─ 其他服务(如有) ~200M
├─ 剩余可用 ~900M
└─ Swap(备用的 1G 磁盘交换空间)
1.2 什么放服务器 / 什么不放
| 组件 | 部署位置 | 理由 |
|---|---|---|
| FastAPI 后端 | 服务器 ✅ | API 必须近数据库 |
| PostgreSQL | 服务器 ✅ | 数据库必须本地 |
| Redis | 服务器 ✅ | 轻量,必须低延迟 |
| Nginx | 服务器 ✅ | 反向代理 + SSL |
| 前端 SPA | Vercel 🆓 | 静态文件,白嫖全球 CDN |
| 管理后台 | Vercel 🆓 | 同上,不占服务器资源 |
| 图片/文件 | 阿里云 OSS | 你本身有阿里云账号 |
| Celery 异步任务 | ❌ 去掉 | 2核跑 Python 进程组不划算 |
1.3 为什么这么分
传统方案(全放一台 2C2G 服务器):
前端 Node 构建缓存 + 后端 Python × N + 数据库 + 图片存储
→ 内存吃紧,启动后剩不到 200M
→ CPU 争抢,多人访问时 PG 查询和 Python 渲染互相抢核
优化方案(Vercel + 服务器 + OSS):
Vercel: 前端静态文件 + 路由 → 全球 CDN,加载快
服务器: 只跑后端 API + DB + 缓存 → 专供计算
OSS: 图片/附件 → 不占服务器磁盘和带宽
结果:
服务器压力降 60% 以上
前端加载速度反而更快(Vercel 节点离用户更近)
图片不占服务器带宽
二、技术栈
| 层级 | 选型 | 选型理由 |
|---|---|---|
| 前端框架 | React 19 + Vite 6 + TypeScript | SPA 轻量,Vite 构建快 |
| 前端路由 | React Router v7 | 成熟路由方案 |
| 状态管理 | Zustand | 轻量(1KB),不比 Redux 重 |
| 样式方案 | Tailwind CSS v4 | 原子化,构建后零冗余 CSS |
| UI 组件 | shadcn/ui 风格 + 自研组件 | 可定制,支持 light/dark 双主题 |
| 动画 | Framer Motion | 声明式动画,按需加载 |
| 3D 特效 | Three.js + R3F | 首页粒子效果(懒加载 + 移动端降级) |
| 后端框架 | FastAPI + Uvicorn | Python 异步框架,自动 Swagger |
| ORM | SQLAlchemy 2.0 async | 成熟异步 ORM |
| 数据库迁移 | Alembic | 版本管理,可回滚 |
| 数据库 | PostgreSQL 16 | 稳定,功能齐全 |
| 缓存 | Redis 7 | 缓存 + Session + 限流 |
| 存储 | 阿里云 OSS | 图片/文件托管 |
| 反向代理 | Nginx | SSL + 路由 + 限流 |
| 前端托管 | Vercel(Free Tier) | 全球 CDN + 自动 HTTPS |
| 域名 | daway.icu | 已有,接入方便 |
三、项目结构
blog/
├── apps/
│ ├── client/ # 前端 SPA(部署到 Vercel)
│ │ ├── public/
│ │ │ ├── fonts/ # JetBrains Mono, Inter 等
│ │ │ └── images/ # Logo / 默认头像等(少量)
│ │ │
│ │ ├── src/
│ │ │ ├── main.tsx
│ │ │ ├── App.tsx
│ │ │ │
│ │ │ ├── routes/ # 路由定义(React Router)
│ │ │ │ └── index.tsx
│ │ │ │
│ │ │ ├── pages/ # 页面组件
│ │ │ │ ├── Home/ # 首页(终端交互 + 精选内容)
│ │ │ │ ├── Posts/ # 文章列表 + 详情
│ │ │ │ ├── Projects/ # 项目展示
│ │ │ │ ├── About/ # 关于我(技能可视化)
│ │ │ │ ├── Guestbook/ # 留言板
│ │ │ │ ├── Snippets/ # 代码片段
│ │ │ │ └── NotFound/ # 404
│ │ │ │
│ │ │ ├── components/ # 组件
│ │ │ │ ├── ui/ # 基础 UI 组件
│ │ │ │ ├── layout/ # 布局(Navbar / Footer / Sidebar)
│ │ │ │ ├── effects/ # 特效(粒子/打字机/故障文字)
│ │ │ │ ├── blog/ # 博客专用组件
│ │ │ │ └── home/ # 首页组件
│ │ │ │
│ │ │ ├── hooks/ # 自定义 Hook
│ │ │ ├── services/ # API 调用层
│ │ │ ├── stores/ # Zustand 状态
│ │ │ ├── styles/ # 样式
│ │ │ └── utils/ # 工具函数
│ │ │
│ │ ├── vite.config.ts
│ │ ├── tailwind.config.ts
│ │ └── package.json
│ │
│ ├── server/ # 后端 API(部署到服务器)
│ │ ├── app/
│ │ │ ├── main.py # FastAPI 入口
│ │ │ ├── config.py # 配置
│ │ │ ├── database.py # 数据库引擎
│ │ │ │
│ │ │ ├── routers/ # API 路由
│ │ │ │ ├── __init__.py
│ │ │ │ ├── posts.py
│ │ │ │ ├── projects.py
│ │ │ │ ├── comments.py
│ │ │ │ ├── guestbook.py
│ │ │ │ ├── auth.py
│ │ │ │ ├── tags.py
│ │ │ │ ├── search.py
│ │ │ │ ├── analytics.py
│ │ │ │ └── upload.py
│ │ │ │
│ │ │ ├── models/ # SQLAlchemy 模型
│ │ │ │ ├── user.py
│ │ │ │ ├── post.py
│ │ │ │ ├── comment.py
│ │ │ │ ├── tag.py
│ │ │ │ ├── project.py
│ │ │ │ └── guestbook.py
│ │ │ │
│ │ │ ├── schemas/ # Pydantic 校验
│ │ │ ├── services/ # 业务逻辑
│ │ │ └── core/ # 基础设施
│ │ │ ├── security.py # JWT + 密码
│ │ │ ├── cache.py # Redis 缓存
│ │ │ └── oss.py # 阿里云 OSS
│ │ │
│ │ ├── alembic/ # 数据库迁移
│ │ ├── tests/ # 测试
│ │ ├── requirements.txt
│ │ ├── pyproject.toml
│ │ └── .env
│ │
│ └── admin/ # 管理后台(部署到 Vercel)
│ ├── src/
│ │ ├── pages/
│ │ ├── components/
│ │ └── services/
│ └── package.json
│
├── scripts/
│ └── deploy.sh # 一键部署脚本
│
├── docker/
│ ├── docker-compose.yml # 服务器端一键启动
│ ├── Dockerfile.server
│ └── nginx/
│ └── nginx.conf
│
├── vercel.json # Vercel 部署配置(前端 + 后台)
├── .env.example
└── README.md
四、双主题 UI 设计(日间 + 夜间)
4.1 设计核心理念
不堆暗色,让科技感在双主题下都成立
日间模式: 干净、通透、微光效
背景: 冷白到淡灰渐变
强调色: 青色 + 淡紫
科技感体现: 玻璃态卡片 / 细边框 / 微阴影
夜间模式: 深邃、发光、沉浸
背景: 深空蓝黑
强调色: 青色发光 + 霓虹紫
科技感体现: 粒子背景 / 辉光边框 / CRT 可选
切换方式:
- 手动: 导航栏右侧切换按钮
- 自动: 跟随系统 prefers-color-scheme
- 记忆: localStorage 持久化选择
4.2 CSS 变量体系
/* === 日间模式(默认)=== */
:root {
/* 背景层级 */
--bg-primary: #f8f9fc; /* 主背景 - 冷白 */
--bg-secondary: #f0f1f5; /* 卡片 / 区域背景 */
--bg-tertiary: #e8eaf0; /* 更深的区域 */
--bg-glass: rgba(255,255,255,0.5); /* 毛玻璃 */
--bg-code: #f4f5f7; /* 代码块背景 */
/* 强调色(日间收敛光泽) */
--accent-primary: #0891b2; /* 青色 - 主链接/按钮 */
--accent-secondary:#7c3aed; /* 紫色 - 标签/高亮 */
--accent-glow: #06b6d4; /* 悬停发光色 */
/* 文字 */
--text-primary: #1e293b; /* 主文字 - 深灰 */
--text-secondary: #64748b; /* 辅助文字 */
--text-dim: #94a3b8; /* 弱文字 */
/* 边框 */
--border-light: rgba(0,0,0,0.06);
--border-accent: rgba(8,145,178,0.2);
/* 阴影 */
--shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
--shadow-elevated: 0 4px 6px rgba(0,0,0,0.05), 0 10px 15px rgba(0,0,0,0.08);
}
/* === 夜间模式 === */
[data-theme="dark"] {
--bg-primary: #0b0d14; /* 深空黑 */
--bg-secondary: #13161f; /* 卡片背景 */
--bg-tertiary: #1a1e2b; /* 更深区域 */
--bg-glass: rgba(255,255,255,0.03);
--bg-code: #181b26; /* 代码块 */
--accent-primary: #22d3ee; /* 青色发光 */
--accent-secondary:#a78bfa; /* 紫色发光 */
--accent-glow: #22d3ee; /* 辉光色 */
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--text-dim: #475569;
--border-light: rgba(255,255,255,0.06);
--border-accent: rgba(34,211,238,0.3);
--shadow-card: 0 1px 3px rgba(0,0,0,0.3);
--shadow-elevated: 0 4px 6px rgba(0,0,0,0.4);
}
4.3 双主题下的 UI 元素表现
| UI 元素 | 日间模式 | 夜间模式 |
|---|---|---|
| 导航栏 | 白色半透明毛玻璃 | 深色半透明毛玻璃 |
| 文章卡片 | 白底 + 细灰边 + 微阴影 | 深色底 + 发光边框 |
| 代码块 | 浅灰底 + 深色代码 | 深色底 + 霓虹高亮 |
| 按钮 | 青色填充 + hover 加深 | 青色边框 + hover 发光 |
| 输入框 | 白底 + 灰边框 | 深色底 + 发光边框 |
| 标签 | 淡紫底 + 紫色字 | 透明底 + 发光紫字 |
| 粒子背景 | 浅色半透明粒子(减弱) | 亮色发光粒子(全效) |
| 故障文字 | 仅保留文字错位,无彩色偏移 | 完整故障效果 |
| 分割线 | 浅灰色实线 | 发光渐变线 |
| 链接 | 青色 + underline | 青色 + glow |
| 引用块 | 左侧青色竖线 + 浅灰底 | 左侧发光竖线 + 深色底 |
| 图片 | 无叠加效果 | 底角微发光边框 |
| 滚动条 | 细灰条 | 细发光条 |
4.4 首页双主题预览
日间模式:
┌─────────────────────────────────────────────────┐
│ [Logo] 文章 项目 关于 留言 ☀️ ← 切换按钮 │ ← 毛玻璃导航
├─────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ █ 终端模拟器(淡色背景,黑色字体) │ │ ← 首页 Hero
│ │ $ ./about │ │
│ │ > 你好,我是 XXX │ │
│ │ $ ▍ │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ 精选文章 ────────────────────────────────────── │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 📄 卡片1 │ │ 📄 卡片2 │ │ 📄 卡片3 │ │ ← 白底灰边卡片
│ │ 标题... │ │ 标题... │ │ 标题... │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ 统计: 📝 12 篇 👁 3.4k 次 💬 86 条 │
└─────────────────────────────────────────────────┘
夜间模式:
┌─────────────────────────────────────────────────┐
│ [Logo] 文章 项目 关于 留言 🌙 ← 切换按钮 │ ← 深色毛玻璃
├─────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ █ 终端模拟器(深色背景,青色发光字体) │ │ ← Hero 带粒子
│ │ $ ./about │ │
│ │ > 你好,我是 XXX ✦ ✦ ✦ │ │ ← 粒子飘动
│ │ $ ▍ │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ 精选文章 ────── ── ─ ─ ✦ ✦ │ │ ← 发光分割线
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 📄 卡片1 │ │ 📄 卡片2 │ │ 📄 卡片3 │ │ ← 深色发光卡片
│ │ 标题... │ │ 标题... │ │ 标题... │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ 统计: 📝 12 篇 👁 3.4k 次 💬 86 条 ✦ │
└─────────────────────────────────────────────────┘
五、数据库表设计(轻量版)
针对 2G 内存优化,减少不必要的大字段和索引:
| 表名 | 字段数 | 关键字段 | 预计行数 | 年增长 |
|---|---|---|---|---|
| users | 10 | username, email, password_hash, role | 10-50 | \~20 |
| posts | 13 | title, slug, content(text), published, views | 50-200 | \~50 |
| tags | 3 | name, color | 20-50 | \~10 |
| post_tags | 2 | post_id, tag_id(多对多) | 100-600 | \~150 |
| comments | 8 | content(text), post_id, author_id, parent_id | 200-1000 | \~200 |
| guestbooks | 5 | content, author_id | 50-300 | \~50 |
| projects | 11 | title, description, tech_stack(array) | 10-30 | \~5 |
| likes | 4 | user_id, post_id/comment_id | 500-2000 | \~500 |
| sessions | 5 | user_id, token, expires_at | 10-100 | 自动过期 |
个人博客的数据量级根本喂不饱 PostgreSQL,2G 内存的 PG 跑得很轻松。
唯一的注意点是posts.content(文章正文)存 TEXT 大字段——单篇 10 万字也才 200KB,50 篇总共 10MB,完全无压力。
六、API 路由设计
所有接口统一前缀 /api/v1/,按模块划分:
| 模块 | 方法 | 路径 | 功能 | 缓存 |
|---|---|---|---|---|
| 文章 | GET | /posts |
分页列表 + 标签筛选 | Redis 30min |
| GET | /posts/{slug} |
详情 + Markdown 渲染 | Redis 1h | |
| POST | /posts/{id}/views |
阅读量+1 | 直接写 DB | |
| POST | /posts/{id}/like |
点赞 toggle | — | |
| 项目 | GET | /projects |
项目列表 | Redis 1h |
| 评论 | GET | /comments?post_id= |
评论树 | — |
| POST | /comments |
发表评论 | — | |
| 留言板 | GET | /guestbook |
留言列表 | — |
| POST | /guestbook |
发表留言 | — | |
| 认证 | POST | /auth/register |
注册 | — |
| POST | /auth/login |
登录 → JWT | — | |
| POST | /auth/github |
GitHub OAuth | — | |
| GET | /auth/me |
当前用户 | — | |
| 搜索 | GET | /search?q= |
全站搜索(标题+摘要) | — |
| 统计 | GET | /analytics |
站点概览数据 | Redis 10min |
| 上传 | POST | /upload |
图片上传 → OSS | — |
七、资源消耗预算(按你的服务器)
7.1 部署结构图
用户浏览器
│
┌──────▼──────┐
│ daway.icu │
│ CDN 解析 │
└──────┬──────┘
│
┌────────────┼────────────┐
│ │ │
┌────▼───┐ ┌───▼────┐ ┌───▼────┐
│ Vercel │ │ 服务器 │ │ 阿里云 │
│ 前端 SPA │ │ 后端 API│ │ OSS │
│ 管理后台 │ │:8000 │ │ 图片 │
└─────────┘ └───┬────┘ └────────┘
│
┌─────┴─────┐
│ Nginx:443 │ ← SSL 终止
│ 反向代理 │
└───────────┘
7.2 各服务内存占用(优化后)
| 服务 | 优化配置 | 预估内存 |
|---|---|---|
| Nginx | 默认配置,只反向代理 | \~15-20 MB |
| PostgreSQL | shared_buffers=256MB, max_connections=10 | \~100-150 MB |
| Redis | 默认,缓存量极小 | \~10-15 MB |
| FastAPI | 单 worker,Uvicorn 启动 | \~70-90 MB |
| 系统 | Alibaba Cloud Linux 自身 | \~450-500 MB |
| 合计服务 | — | \~200-280 MB |
| 总计(含系统) | — | \~650-780 MB |
| 剩余可用 | — | \~1.0-1.1 GB |
7.3 磁盘占用
| 项目 | 占用 |
|---|---|
| 系统 + 软件包 | \~7G(已有) |
| PostgreSQL 数据 | 初始 200MB,年增长 <500MB |
| 项目代码 | \~50MB |
| Python venv | \~300MB |
| 剩余 | \~30G(磁盘绰绰有余) |
7.4 带宽与并发
单篇文章接口响应: ~50-80ms(有缓存) / ~150ms(无缓存)
同时处理请求数: FastAPI 单 worker 约 50-100 req/s
PG 10 连接够支撑 30+ 人同时访问
带宽瓶颈: OSS 图片不占服务器带宽
纯 API 请求 ≈ 2-5KB/次
1000 次请求 ≈ 5MB 流量
结论: 日均 1000 UV 以内完全无感,5000 UV 需要看一眼
八、功能扩展预留
8.1 目录结构预留了扩展位
routers/ → 加一个模块 = 加一个 .py 文件
models/ → 加一张表 = 加一个 model 类
services/ → 加业务 = 加一个 service 文件
schemas/ → 加 DTO = 加一个 schema 文件
新增「读书笔记」模块的步骤:
models/booknote.py— 30 行(表结构)routers/booknotes.py— 40 行(5 个 CRUD 接口)services/booknote_service.py— 50 行(业务逻辑)models/__init__.py注册 +routers/__init__.py注册
不改已有的任何一行代码。
8.2 可后续接入的功能
| 功能 | 需要新增 | 预估代码量 | 接入难度 |
|---|---|---|---|
| 文章 RSS 订阅 | 1 个 router | \~20 行 | ⭐ |
| 友情链接管理 | 1 model + 1 router | \~50 行 | ⭐ |
| 文章自动标签 | 1 个 service 方法(jieba) | \~30 行 | ⭐ |
| 阅读排行榜 | 1 个 API 查询 | \~10 行 | ⭐ |
| Markdown 外部导入 | 1 个 service | \~60 行 | ⭐⭐ |
| 相似文章推荐 | 1 个 service(TF-IDF + cosine) | \~40 行 | ⭐⭐ |
| 邮件通知(评论回复) | 1 个 service + SMTP | \~50 行 | ⭐⭐ |
| 文章热度预测 | 1 个 service(简单线性回归) | \~50 行 | ⭐⭐⭐ |
| 第三方登录(GitHub) | auth router 追加 | \~40 行 | ⭐⭐ |
| 相册/图床模块 | 1 model + 1 router | \~80 行 | ⭐⭐ |
8.3 缓存升级预留
现在: Redis Cache-Aside(手动 @cache 装饰器)
升级: 可无缝接入 RedisJSON / RedisSearch
或替换为 KeyDB(兼容 Redis 协议,多线程)
8.4 服务降级预留(服务器撑不住时的方案)
第一步: 文章列表加 static JSON 缓存 → nginx 直接 serve,不经过 Python
第二步: Redis 缓存时间从 30min 拉到 2h
第三步: 加 Cloudflare 缓存 API 响应
第四步: 升配到 4G 内存 / 加一台从库
九、运维要点
9.1 日常维护
# 一键部署后端
./scripts/deploy.sh # rsync 到服务器 + systemctl restart
# 前端自动部署
git push → Vercel 自动检测构建 # 不需要手动操作
# 备份数据库
pg_dump -U blog blog > backup.sql # crontab 每周自动备份到 OSS
# 查看服务状态
systemctl status blog-api
systemctl status postgresql
systemctl status redis
9.2 安全
Nginx:
- 只暴露 443 (HTTPS) 和 80 (重定向)
- 屏蔽 /admin 路径之外的访问
- 限流:单 IP 60 req/min
FastAPI:
- JWT 鉴权(7 天过期)
- 写操作验证 ADMIN 角色
- 文件上传校验类型 + 大小限制
PostgreSQL:
- 仅监听 127.0.0.1
- 专用用户 blog,仅操作 blog 数据库
十、前端部署方案(Vercel Free Tier)
10.1 为什么选 Vercel
自建服务器 Nginx 部署前端
──────────────────────
占用服务器内存: ~20 MB(Nginx 进程)
占用 CPU: 静态文件 ≈ 0
全球加载速度: 靠服务器单点,海外慢
HTTPS 证书: 自己续(Let's Encrypt 3个月)
Vercel Free Tier 部署前端
──────────────────────
占用服务器资源: 0
全球加载速度: 全球 100+ CDN 节点
HTTPS 证书: 自动 + 自动续
构建部署: GitHub push 自动触发
回滚: 一键回滚上个版本
10.2 配置方式(极简)
// vercel.json
{
"buildCommand": "pnpm build",
"outputDirectory": "dist",
"rewrites": [
{ "source": "/api/(.*)", "destination": "https://你的服务器/api/v1/$1" }
]
}
10.3 这样部署后
服务器只操心:
- 数据库查询
- API 计算
- 缓存读写
- JWT 签发
服务器不用操心:
- 前端构建
- 静态文件 Serve
- HTTPS 证书
- CDN 加速
- 前端路由
效果: 服务器专注做计算,前端全球加速
2C2G 的服务器跑仅后端 ≈ 4C8G 全栈的体验
十一、开发 & 部署工作流
11.1 日常开发
# 终端 1:后端热重载
cd apps/server && source .venv/bin/activate
uvicorn app.main:app --reload --port 8000
# 终端 2:前端开发
cd apps/client && pnpm dev # → http://localhost:5173
# 终端 3:数据库(Docker)
docker compose up -d postgres redis
11.2 发布流程
# 改完代码 → 提交 → 推送
# 后端部署
git push origin main
# → 手动或自动: rsync 到服务器 → systemctl restart blog-api
# 前端部署
# → Vercel 自动检测 GitHub push → 自动构建 → 自动发布
# → 整个过程约 1-2 分钟,全程无感
11.3 敏捷并行
你写后端代码 → 前端用 Vite 代理 API 到 localhost:8000
你写前端代码 → FastAPI 自动生成 Swagger,前端直接对着 /docs 调接口
前后端解耦: 各自独立开发,只用 API 契约(Pydantic Schema)对齐
十二、文件清单(只需创建这些文件)
| 路径 | 说明 | 预估行数 |
|---|---|---|
apps/server/requirements.txt |
Python 依赖 | 15 |
apps/server/app/main.py |
FastAPI 入口 + 生命周期 | 40 |
apps/server/app/config.py |
配置管理(Pydantic Settings) | 30 |
apps/server/app/database.py |
异步数据库引擎 | 20 |
apps/server/app/core/cache.py |
Redis 缓存 + 装饰器 | 35 |
apps/server/app/core/security.py |
JWT + 密码哈希 | 40 |
apps/server/app/core/oss.py |
阿里云 OSS 上传 | 30 |
apps/server/app/models/*.py |
数据模型(约 8 个文件) | 各 20-40 |
apps/server/app/schemas/*.py |
Pydantic DTO(约 8 个文件) | 各 15-30 |
apps/server/app/services/*.py |
业务逻辑(约 6 个文件) | 各 30-60 |
apps/server/app/routers/*.py |
API 路由(约 9 个文件) | 各 20-40 |
apps/server/app/routers/__init__.py |
路由聚合 | 15 |
apps/server/app/api/deps.py |
依赖注入(DB Session / 当前用户) | 35 |
apps/server/app/middleware/*.py |
日志 / 限流中间件 | 各 20 |
apps/server/alembic/ |
数据库迁移配置 | — |
docker/docker-compose.yml |
服务编排 | 40 |
docker/nginx/nginx.conf |
反向代理配置 | 30 |
scripts/deploy.sh |
部署脚本 | 30 |
后端核心文件约 20-25 个,总计约 1500-2000 行 Python。
前端 + 后台 + 样式文件另算,按组件粒度分约 40-60 个文件。
十三、关键决策记录
| 决策 | 方案 | 替代方案 | 理由 |
|---|---|---|---|
| 前端托管 | Vercel | 同服务器 Nginx | 省服务器资源 + 全球 CDN |
| 图片存储 | 阿里云 OSS | 本地存储 / MinIO | 你有账号 + 不占服务器带宽 |
| 异步任务 | ❌ 去掉 Celery | APScheduler 或直接同步 | 2核 CPU 跑不动那么多 Python 进程 |
| 前端框架 | React + Vite | Next.js | SPA 省服务器资源,Vercel 纯静态 |
| 3D 特效 | 首页仅粒子 + 懒加载 | 全页面 3D | 移动端性能和开发成本 |
| 后台 | 独立 SPA 部署 Vercel | 集成到前端路由 | 权限隔离 + 不污染前端包体积 |
| 主题 | CSS 变量双主题 | CSS-in-JS / 多主题文件 | 运行时切换性能最好 |
| 爬虫采集 | Scrapling (已有技能) | Scrapy / 自写 | 你已掌握,直接复用 |
| PG 配置 | shared_buffers=256M | 默认 128M | 2G 内存足够拔高一点 |
| API 版本 | 前缀 /api/v1/ | Header 版本 | URL 最直观,前端好配 |
本文由 admin 原创,转载请注明出处。
评论
0