面经策

如何将 AI 超级智能体项目的前端部署上线？有哪些可行的部署方式？ ​

  • 标签：前端、编程导航

🏛 业务架构师 ​

前端部署的可选路径按成本与场景分三档：

1. 静态托管 + CDN（我的默认选择）

构建产物（dist）上传对象存储 + CDN 加速（Vercel/Netlify/云厂商 OSS+CDN）——静态资源天然适合边缘分发：

  • 成本极低（流量费相比服务器九牛一毛）、全球加速白送、无运维；
  • AI 应用的前端是纯静态 SPA（API 都在后端），完全匹配；

2. 容器化部署（有统一运维体系时）

Nginx 托管静态文件打成镜像，与后端同套 K8s/发布体系——前后端发布流程统一（一个平台看全部变更），适合已有容器基建的团队；

3. Serverless 静态托管

Vercel/云函数静态托管：按量计费 + 自动 CI/CD——与后端 Serverless 策略对齐，验证期产品的最轻方案。

我的部署动作清单（体现工程完整度）：

  • 缓存策略分级：带 hash 的静态资源长缓存（一年）、index.html 不缓存（保证发版即生效）——这条配错就是"发了版用户看不到更新"的经典事故；
  • gzip/brotli 压缩 + HTTP/2：首屏体积减 70%；
  • 发布策略：CI 自动构建（commit 触发）→ 测试环境自动部署 → 生产手动确认——生产的每次变更可追溯到 commit；
  • 回滚预案：CDN 版本化目录，回滚=切目录指针，分钟级。

一句话：前端部署的核心是**"静态资源 + CDN 缓存策略 + 可回滚的发布纪律"**——技术简单，纪律值钱。

🏗 系统架构师 ​

前端部署的可选方案按"成本从低到高 / 控制力从弱到强"排：

1. 静态托管（首选，AI 聊天前端就是纯 SPA）：

  • Vercel / Netlify：全球 CDN + 自动 HTTPS + Git 推送即部署，免费额度对小项目够用—— overseas 用户体验好；国内访问不稳；
  • 国内对象存储 + CDN：OSS/COS 开静态托管，绑域名 + 云 CDN + 免费证书，自定义域名要备案——国内合规正解；
  • Cloudflare Pages：免费 CDN 无备案要求，国内外折中。

2. 容器化部署（与后端体系统一）：

  • 前端构建产物打进 Nginx 镜像（或 Caddy），部署 K8s/SAE/轻量服务器——与后端同域（反代 /api 到后端），免跨域与 cookie 域问题，运维统一；
  • 适合：企业内网、需要与后端同环境发布的场景。

3. 服务器直接部署（最朴素）：Nginx 托管 dist 目录 + 反向代理后端 API——轻量服务器一台全搞定，小项目最经济。

我项目的选择：静态托管（OSS+CDN 或 Vercel）+ 后端独立 Serverless 部署，前端走独立域名 CORS 调用——前后端解耦独立演进。

部署细节（踩坑清单）：

  • SPA 路由 404：Nginx/托管配置 rewrite 到 index.html（history 路由）；
  • SSE 场景：CDN/代理要关闭响应缓冲（proxy_buffering off），否则流式失效；
  • 缓存策略：index.html 不缓存、带 hash 的静态资源长缓存；
  • 构建注入环境变量（API 地址）与源码一起进 CI/CD，杜绝手工改产物。

💻 全栈开发专家 ​

按可控性/成本排三种方式：

1. 静态托管（我的首选）：构建产物是一堆静态文件，托管方式按便利性选：

  • 对象存储 + CDN（最正规）：npm run build → 产物传 OSS/S3 → 开静态网站托管 → 挂 CDN → 绑域名 HTTPS。全球加速 + 带宽便宜；
  • Vercel / Netlify / 云托管：连 Git 仓库自动构建部署，preview 环境随 PR 生成——迭代期效率最高；
  • 自有服务器 Nginx：root /var/www/dist，自己管证书。

2. Nginx 配置要点（SPA + API 同域）：

nginx
server {
    listen 443 ssl;
    root /var/www/dist;
    location / { try_files $uri $uri/ /index.html; }   # history 路由回退！
    location /api/ {
        proxy_pass http://backend:8080/;
        proxy_buffering off;                            # SSE 流式必须关
        proxy_read_timeout 300s;
    }
}

必踩的坑：try_files ... /index.html 漏配时刷新非首页直接 404（React Router history 模式）；SSE 接口不关 buffering 会"憋到结束一次吐"。

3. 容器化：多阶段构建（node 构建 → nginx 运行），随后端一起编排（docker compose / K8s），适合整体交付。

缓存策略：index.html 不缓存（no-cache），带 hash 的 js/css 永久缓存——发版后用户拿新入口文件，静态资源命中 CDN。