22 - 综合实战：目标与最终架构图

前面把所有零件都讲过了。第七部分我们做一次综合实战：把前端、后端、数据库、AI 全部串起来，用现代方案上线一个完整项目。这一章先定目标、画架构图、理清顺序。

我们要做的项目

做一个AI 问答应用（麻雀虽小五脏俱全，正好覆盖全部零件）：

用户打开网页，能输入问题、看到 AI 回答
AI 回答由大模型 API 提供
每次对话被记录进数据库，用户能看历史
全程通过好记的域名、HTTPS 访问

这个项目同时用到了：前端 + 后端 + 云数据库 + AI 云 API + CI/CD + 域名 + HTTPS——本系列的每一块都用上了。

最终架构图

   开发者
     │ git push
     ▼
┌──────────────── CI/CD（GitHub Actions）────────────────┐
│  前端支线：build → 传 OSS → 刷 CDN                      │
│  后端支线：docker build → 推 ACR → 部署 Serverless      │
└───────┬───────────────────────────────────┬────────────┘
        ▼                                   ▼
   ┌─────────┐  www.yourapp.com    api.yourapp.com  ┌──────────────┐
   │ OSS+CDN │◀──────用户访问──────┐   ┌──调API──────▶│  Serverless   │
   │ (前端)   │                   │   │              │  (后端 Docker)│
   └─────────┘                   │   │              └──────┬───────┘
                            ┌─────┴───┴─────┐                │
                            │   用户浏览器   │        ┌───────┴───────┐
                            └───────────────┘        ▼               ▼
                                              ┌────────────┐  ┌────────────┐
                                              │  云数据库   │  │  AI 云 API  │
                                              │ (对话记录)  │  │ (通义/豆包) │
                                              └────────────┘  └────────────┘

[配图：把上面的 ASCII 架构图画成清晰的彩色架构图，标注每条线的含义：git push 触发 CI/CD、用户访问前端、前端调后端、后端调数据库和 AI]

每个零件对应哪一章

上线时会用到前面这些知识，先在脑子里过一遍：

零件	用到的章节
前端 build 后上 OSS+CDN	09、10、11
后端打 Docker 上 Serverless	12、13、14、15
数据库用云托管	16、18
AI 调云端 API	17
CI/CD 自动化	06、07、08
域名 + HTTPS + 跨域	19、20、21

上线前的心理准备

第一次会比较慢、会踩坑（备案、端口、CORS、缓存是四大高频坑），这很正常
备案要尽早办（第 19 章），它可能是整个流程里最耗时间的一环
建议先用云平台给的临时地址把功能跑通，再套域名和 HTTPS

小结

实战项目：一个AI 问答应用，覆盖前端 + 后端 + 云数据库 + AI API + CI/CD + 域名 + HTTPS。
记住最终架构图：CI/CD 驱动，前端在 CDN、后端在 Serverless、数据在云库、AI 靠云 API。
搭建顺序：开云资源 → 后端 → 前端 → 域名/HTTPS → CI/CD → 验收，先各自能跑再连起来。

下一章我们按这个顺序，一步步把它真正搭起来。

下一章 → 23 - 一步步把完整项目搭起来

22 - 综合实战：目标与最终架构图

我们要做的项目

最终架构图

每个零件对应哪一章

推荐的搭建顺序

上线前的心理准备

小结