04 - 一个现代项目的全景架构
前面三章讲清了”为什么用现代方式”。这一章我们画一张全景图，把前端、后端、数据库、AI、CI/CD 各部分放到一起，看清它们怎么协作、数据怎么流动。这张图是整个系列的主线，后面每一章都是在讲图里的某一块。
先看这张全景图
┌─────────────────────────────────────┐
│ CI/CD 流水线 │
│ (你 push 代码 → 自动构建 → 自动部署) │
└───────┬─────────────────────┬────────┘
│ 部署前端 │ 部署后端
▼ ▼
用户 ┌─────────┐ ┌──────────────┐
浏览器 ──访问网站──▶│ OSS+CDN │ │ Serverless │
│ │ (前端) │ │ (后端 Docker)│
│ └─────────┘ └──────┬───────┘
│ │ 调用
└────────调 API───────────────────────▶ │
┌────────┴────────┐
▼ ▼
┌────────────┐ ┌────────────┐
│ 云数据库 │ │ AI 云 API │
│ (存数据) │ │ (通义/豆包) │
└────────────┘ └────────────┘[配图：把上面这张 ASCII 图画成漂亮的架构图，用户在最左，CI/CD 在最上方作为”驱动引擎”，前端 CDN、后端 Serverless 在中间，数据库和 AI API 在右侧]
一块一块看它们的角色
1. CI/CD 流水线（最上方，驱动引擎）
你在本地写完代码，git push 一下。CI/CD 就自动帮你：build 前端并推到 OSS/CDN、把后端打成 Docker 镜像并部署到 Serverless。它是把整套东西自动串起来的引擎。（第二部分详讲）
2. 前端：OSS + CDN
前端 build 出来的就是一堆静态文件（HTML/JS/CSS），放在 OSS（对象存储） 里，再套一层 CDN 做全国加速。用户访问网站，实际是从离他最近的 CDN 节点拿到这些文件。（第三部分详讲）
3. 后端：Serverless（跑 Docker 镜像）
后端打成 Docker 镜像，交给 Serverless 平台运行。用户或前端发来的 API 请求由它处理，它会按请求量自动伸缩，没人用时缩容省钱。（第四部分详讲）
4. 数据库：云托管
后端要存的数据（用户、订单、对话记录……）放在云数据库里。因为 Serverless 后端是”无状态”的，数据必须存在外部。（第五部分详讲）
5. AI 能力：云端 API
需要 AI 能力时，后端直接调用云端大模型 API（通义、豆包等），而不是自己部署模型。（第五部分详讲）
一次完整请求的旅程
以”用户在你的 AI 应用里发了一句话”为例，走一遍数据流：
- 用户打开网站 → 从 CDN 就近加载前端页面
- 用户输入问题、点发送 → 前端向后端 API 发请求
- 请求到达 Serverless 后端，后端开始处理
- 后端把用户的问题发给 AI 云 API，拿到大模型的回答
- 后端把这次对话记录存进云数据库
- 后端把回答返回给前端 → 用户看到 AI 的回复
整个过程里，你没有管过任何一台服务器——每一块都是托管服务，你只写了”把问题发给 AI、把记录存进库”这段业务代码。
小结
- 现代项目全景 = CI/CD（引擎）+ 前端(OSS+CDN) + 后端(Serverless/Docker) + 云数据库 + AI 云 API。
- 每一块都是托管服务，你只负责写业务代码和 push。
- 记住这张图和”一次请求的旅程”，后面每一章都是在把图里的某一块讲透。
图有了，接下来我们把图里反复出现的三个核心词——静态托管、Serverless、云服务——一次性讲清楚。
下一章 → 05 - 三个关键词：静态托管、Serverless、云服务