纯前端转AI实战项目零代码- 从 0 到1上线:一个 Vue + Express 全栈 AI 对话Agent项目的搭建与阿里云部署实录

6 阅读4分钟

先说心得: 项目所有代码 , 都是我说要求, cursor帮我写的。 从昨天晚上七八点儿开始写, 到刚才成功部署到线上,搞了一天一夜终于出来了, 特此记录, 这个智能体助手的项目, 每一步都有详细commit记录, 也借助这个项目学习到了很多, 特别是刚开始用哪个后台框架和用那个服务商部署打包后的前后端代码, 我跟他说我现在的情况让他给我推荐, 其实只是生成代码会很快, 主要我还是爱着看一下他生成代码, 为什么这样生成, 不明白的我都问问他,

github项目地址 github.com/DavisGYF/fi…

我这个新生小智能体的官网地址 http://8.146.205.75:3000

一、项目是什么

基于 Vue 3 + Express 的最小可运行 AI 对话 Demo,覆盖常见全栈与 AI 接入场景:

  • 前端:Vite + Vue 3 + TypeScript + Element Plus,流式展示对话,会话列表侧栏。
  • 后端:Node.js + Express,提供 SSE 流式 的 /api/chat/stream(兼容 OpenAI Chat Completions 协议)。
  • 数据:浏览器 localStorage 与会话草稿;服务端 SQLite(better-sqlite3)做会话同步与 RAG 文本块 持久化。
  • RAG:段落分块 + BM25(可选向量);上传 .txt/.md 经后端入库与检索。
  • 可观测:进程内请求日志与汇总,便于演示耗时、token、RAG 命中等。

技术选型上,前端生产环境 getApiBase() 同域空字符串,即 页面与 API 同端口、同域名,避免生产环境再写死 localhost:3000


二、开发阶段我做了什么

  1. 工程结构:web/(Vue)与 server/(Express)分目录;根目录脚本统一 npm run build(先构建前端再安装后端依赖)、npm startnode server/index.js)。
  2. 交互与布局:把「知识库上传」从侧栏挪到主区,与「启用 RAG」同一行布局;补全样式与说明文案(含右对齐、提示位置)。
  3. 生产静态资源:在 server/index.js 中,若存在 web/dist,用 express.static 托管前端,并对非 /api 路由回退 index.html,与「同域 API」策略一致。
  4. 部署文档:先后补充 Railway(境外控制台不便国内使用)、国内部署总览、阿里云轻量 / ECS、Dockerfile + docker-compose、命令说明备忘、踩坑实录 等 Markdown。

三、部署阶段:从 PaaS 设想到国内云

  • 最初考虑过 Railway 等境外 PaaS(package.json + railway.toml),但 控制台访问在国内不稳定,最终改为 阿里云 ECS(内地)。
  • 容器化:根目录 Dockerfile(多阶段:构建 web、安装 server 依赖、复制 dist)、docker-compose.yml(端口映射、命名卷挂 server/data 做 SQLite 持久化)、根目录 .env(不入库)注入 OPENAI_API_KEY 等。
  • 国内构建加速(后补):在 Dockerfile 内将 Debian apt 换 阿里云源、npm 默认 npmmirror;文档中补充 Docker 守护进程镜像加速器(拉 node 基础镜像用),减轻首次全量构建在境外源上的长时间等待。

四、上线过程中印象最深的坑

1. 第一次 Docker 构建极慢(约数十分钟)

原因:构建跑在 云服务器上,拉 Docker Hub、Debian 官方源、npm 官方源 时,国内直连常很慢;本机 VPN 无法加速云端构建。

认识:区分「本机开发代理」与「构建机出网」;镜像加速器 + Dockerfile 内换源 针对的是后者。

2. 安全组与端口

  • 必须放行 SSH(22) 与业务端口(本项目 3000)。
  • 换实例或换安全组后,规则可能需 重新配置;浏览器访问必须是 http://公网IP:3000,不能默认 80。

3. 页面能开、对话失败:模型与网关配置

前端请求已是 同域 /api/chat/stream,若仍失败,需排查服务端环境变量。
使用 DeepSeek 时,除 OPENAI_API_KEY 外,还需配置:

OPENAI_BASE_URL=api.deepseek.com/v1

(服务端拼接为 BASE_URL + /chat/completions,故需带 /v1。)
改 .env 后需 重建/重载容器(如 docker compose up -d --force-recreate),使进程读到新环境变量。

原则:API Key 与 Base URL 放在服务端,不要写进前端,避免泄露。


五、可对外说的「技术收获」

维度要点
全栈前后端分离开发、生产合一进程托管静态站 + API。
流式浏览器 fetch + ReadableStream 消费 SSE;后端转发上游流式响应。
容器多阶段构建、卷持久化、环境变量注入。
ECS 安全组、公网/私网、同域访问与端口意识。
国内实践镜像与包管理源、构建耗时与缓存、境内部署路径选择。

六、一句话收尾

这条路径本质是:本地把功能跑通 → 用 Docker 固化运行环境 → 在云主机上暴露端口与安全组 → 用环境变量管住模型网关与密钥。中间最耗时的往往不是业务代码,而是 第一次全量构建的网络与镜像,以及 多模型网关(Base URL)与 Key 的匹配——写进文档与 .env.example,下次能少踩一半坑。


如需缩短成「朋友圈/短帖」版,可把第二节缩成一句,第四节只保留三个小标题各一行。若你贴出想用的平台(掘金/知乎等),我也可以帮你压成对应字数。