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

按上一章定的顺序，我们把这个 AI 问答应用真正搭起来。这一章是串联性的操作指引，每一步都指向前面对应的详细章节，重点是让你看清”整条链路怎么接上”。

Step 1 · 开通云资源

先把”外部依赖”准备好，拿到连接信息：

• 云数据库：开通云数据库（如阿里云 RDS PostgreSQL），建好库，拿到 DATABASE_URL（第 16 章）
• AI API：开通大模型服务（如通义千问），拿到 AI_API_KEY（第 17 章）
• 镜像仓库：开通 ACR/TCR，用于存后端镜像（第 15 章）

把 DATABASE_URL、AI_API_KEY 先记在安全的地方，等会儿要作为环境变量填进 Serverless。

Step 2 · 写后端并本地验证

后端要做三件事：连数据库、调 AI、提供 API。核心结构：

import os
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()
app.add_middleware(CORSMiddleware, allow_origins=["https://www.yourapp.com"],
                   allow_methods=["*"], allow_headers=["*"])

DATABASE_URL = os.environ["DATABASE_URL"]   # 无状态：连接串从环境变量来
AI_API_KEY = os.environ["AI_API_KEY"]

@app.post("/api/chat")
def chat(question: str):
    answer = ask_ai(question)      # 调 AI 云 API（第17章）
    save_to_db(question, answer)   # 存云数据库（第16章）
    return {"answer": answer}

写好 Dockerfile（第 15 章），本地 docker build + docker run，配上环境变量验证 /api/chat 能通。本地能跑，线上才能跑。

Step 3 · 部署后端到 Serverless

1. docker push 把镜像推到 ACR（第 15 章）
2. 在 Serverless 平台用该镜像新建服务
3. 配置环境变量：DATABASE_URL、AI_API_KEY（这是无状态思维的落地——密钥和连接都注入进来，不写死）
4. 部署，拿到临时访问地址，测 /api/chat 能返回回答、数据库有记录

Step 4 · 搭前端并部署到 OSS+CDN

1. 写好前端页面，API 基地址先用后端临时地址，之后换成 https://api.yourapp.com
2. npm run build 出 dist/
3. 传到 OSS、配 CDN、开启静态网站托管、404 回退 index.html（第 11 章）
4. 用 CDN 临时地址打开，确认页面能加载、能调通后端

Step 5 · 配域名与 HTTPS

1. 买域名、完成备案（第 19 章，尽早！）
2. 解析：www → CNAME → CDN；api → CNAME → Serverless
3. 前端 CDN、后端 Serverless 各自开启 HTTPS + 免费证书（第 20 章）
4. 后端 CORS 的 allow_origins 改成 https://www.yourapp.com（第 21 章）
5. 前端把 API 基地址改成 https://api.yourapp.com，重新 build 部署
6. 访问 https://www.yourapp.com，全链路验证

Step 6 · 接上 CI/CD 自动化

把手动步骤写成 GitHub Actions（完整示例见 example/）：

• 前端支线：push → npm build → 传 OSS → 刷 CDN（第 11 章）
• 后端支线：push → docker build → 推 ACR → 通知 Serverless 部署（第 15 章）
• 所有密钥（OSS、ACR、平台凭证）放仓库 Secrets

配好后，你以后改代码只需 git push，前后端自动更新上线。

Step 7 · 完整验收

走一遍真实用户流程：

• 打开 https://www.yourapp.com，地址栏有小锁（HTTPS 正常）
• 输入问题，能收到 AI 回答（前端→后端→AI 链路通）
• 刷新页面能看到历史记录（数据库存取正常）
• 改一行前端文案，push，几分钟后线上更新（CI/CD 正常）
• 一段时间没访问后再打开，首次略慢（Serverless 冷启动，正常现象）

回头看：你没碰过一台服务器

整个项目上线，你做的只是：开通云服务、写代码、push。没有买服务器、没有 SSH 登录、没有装环境、没有守护进程、没有手动续证书。

这就是现代部署 —— 对比第 01、02 章那套满头大汗的传统流程，感受一下差别。

小结

• 搭建顺序：开云资源 → 后端本地验证 → 后端上 Serverless → 前端上 OSS+CDN → 域名/HTTPS → CI/CD → 验收。
• 关键落地点：连接串/密钥全走环境变量/Secrets（无状态 + 安全），CORS 配好，备案尽早。
• 全程不碰服务器，push 即上线。

最后一章，我们总结这套体系、盘点常见坑，并算一笔账——这样部署一个月大概花多少钱。

下一章 → 24 - 总结与避坑 + 成本估算