【Code With SOLO】用 SOLO 搭建网站自动部署平台，实现客户网站当天交付
技术栈：Python FastAPI + React 19 + TypeScript + MySQL + FTP 自动部署
一、摘要
作为一名承接展示型网站制作的运营人员，我面临的最大挑战是当天交付承诺带来的时间压力。使用 TRAE SOLO，我独立开发了一套网站自动部署平台 (Push Web)，将 Google AI Studio 生成的网站包实现一键自动化部署。
核心效果： 客户网站从制作完成到上线，时间从 20-40 分钟缩短至 3-5 分钟，效率提升 10 倍以上。
二、背景
我的角色
我是一名运营人员，主要承接企业客户的展示型网站制作需求。这类网站通常使用 Google AI Studio 生成（React + TypeScript + Vite），功能相对简单，但客户对交付速度要求很高，我承诺客户当天完成并上线。
面临的挑战
- 交付压力大：每天需要处理多个客户的网站制作需求
- 部署流程繁琐：AI 生成的网站包需要手动解压、安装依赖、构建、上传 FTP、配置域名
- 第三方平台限制：市面上类似工具都是第三方服务，无法结合自己的业务场景
三、实践过程
3.1 任务拆解
我将整个项目拆解为以下核心模块：
| 模块 | 功能 | 技术实现 |
|---|---|---|
| 用户系统 | 邮箱/手机号注册登录、JWT 认证 | FastAPI + PyJWT + bcrypt |
| 文件上传 | 接收 .zip 网站包、大小限制 100MB | React Ant Design Dragger |
| 自动构建 | npm install + vite build | subprocess + 淘宝镜像加速 |
| 路径修复 | 子目录部署的 base path 处理 | 自动注入 <base> 标签、修补 BrowserRouter |
| FTP 部署 | 自动上传到 Web 服务器 | Python ftplib + 被动模式优化 |
| 状态监控 | 实时查看部署进度和日志 | React Steps + 轮询 API |
| 管理后台 | 管理员管理用户和所有部署 | Ant Design Table + 权限控制 |
3.2 使用 SOLO 的核心能力
1. 架构设计与技术选型
项目初期，我用 SOLO 帮我确定了整体技术架构。SOLO 推荐了 FastAPI + React + MySQL 的组合，并给出了完整的项目结构和数据库设计。
2. 核心部署流程开发
部署流程是最复杂的部分，SOLO 帮我实现了完整的 Pipeline：上传 .zip → 解压 → npm install → vite build → 路径修复 → FTP 上传 → 返回访问地址。
3. 子目录部署难题攻克
最大的技术难点是子目录部署——每个客户的网站部署在独立的子目录，但 Vite 默认构建的资源路径是根目录。SOLO 帮我设计了三层解决方案：
1. 使用相对 base 路径构建: npx vite build --base ./
2. 在 index.html 中注入 <base href="/folder_name/"> 标签
3. 修补 JS 文件中的 BrowserRouter basename
3.3 踩过的坑与解决方案
| 问题 | 原因 | 解决方案（SOLO 协助） |
|---|---|---|
| npm install 超时 | 国外镜像慢，经常超时 | 配置淘宝镜像 registry.npmmirror.com |
| FTP 被动模式内网 IP | 服务器返回内网 IP 导致连接失败 | 自定义 FixedPassiveFTP 类，强制使用公网 IP |
| 子目录路由 404 | BrowserRouter 默认 basename=“/” | 自动修补 JS 文件中的 basename |
| 资源路径错误 | Vite 构建的资源引用绝对路径 | 注入 <base> 标签 + 使用 --base ./ 相对路径 |
| 并发部署冲突 | 多用户同时部署资源竞争 | 设计独立的工作目录隔离机制 |
四、成果展示
4.1 登录页面
平台采用简洁专业的设计风格，蓝紫渐变背景搭配白色卡片式登录表单，支持邮箱/手机号注册登录。
4.2 一键部署页面
核心功能页面，用户只需拖拽上传 .zip 网站包，点击"提交部署"即可自动完成解压、构建、上传全流程。
4.3 部署历史记录
完整的部署历史记录，支持状态筛选、关键词搜索、查看全部用户部署（管理员权限）、访问地址一键复制。
4.4 管理后台
管理员后台支持用户管理（启用/禁用/删除）和部署管理，实现了完整的权限隔离体系。
4.5 效率对比
| 环节 | 原来（手动） | 现在（自动化） | 提效 |
|---|---|---|---|
| 解压文件 | 1-2 分钟 | 10 秒 | 9x |
| npm install | 5-10 分钟 | 1-2 分钟 | 5x |
| vite build | 2-5 分钟 | 1-2 分钟 | 2x |
| FTP 上传 | 5-10 分钟 | 1-2 分钟 | 5x |
| 路径配置 | 5-10 分钟 | 自动完成 | ∞ |
| 总计 | 20-40 分钟 | 3-5 分钟 | 6-10x |
4.6 项目代码
技术栈：
| 层级 | 技术 |
|---|---|
| 后端 | Python 3.10 + FastAPI + MySQL |
| 前端 | React 19 + TypeScript + Ant Design 6 |
| 构建 | Vite 8 + npm（淘宝镜像） |
| 认证 | JWT (PyJWT + bcrypt) |
| 部署 | FTP 自动上传 |
五、效果与总结
5.1 实际效果
- 交付速度： 从 20-40 分钟缩短至 3-5 分钟
- 客户满意度： 当天交付承诺 100% 兑现
- 业务承载量： 每天可处理的网站数量从 3-4 个提升到 10+ 个
- 错误率降低： 自动化流程消除了人为操作失误
5.2 SOLO 在我流程中的作用
| 环节 | SOLO 的贡献 |
|---|---|
| 技术选型 | 推荐 FastAPI + React + MySQL 技术栈 |
| 架构设计 | 输出完整的项目结构和模块划分 |
| 代码开发 | 生成 80% 以上的核心代码（API、服务、组件） |
| 难题攻克 | 子目录部署、FTP 被动模式、路径修复等 |
| 优化迭代 | 淘宝镜像、日志过滤、资源清理等 |
5.3 可复用的方法
- 任务拆解法：将复杂流程拆成独立模块（上传→解压→构建→部署），逐个击破
- Prompt 工程：清晰描述业务场景和技术需求，让 SOLO 理解上下文
- 迭代优化：先跑通 MVP，再逐步完善（如先实现单用户，再加权限系统）
- 错误边界：主动询问 SOLO 可能的坑，提前预防（如 FTP 被动模式问题）
5.4 对 AI 工作方式的思考
这次实践让我深刻体会到：AI 不是替代人，而是放大人的能力。作为运营人员，我没有深厚的开发背景，但通过 SOLO，我能够独立完成一个完整的生产级工具平台开发。
关键收获：
- 降低技术门槛：不需要精通所有技术细节，SOLO 可以填补知识盲区
- 加速开发周期：原本需要几周的项目，几天就能完成 MVP
- 提升代码质量：SOLO 提供的代码遵循最佳实践，包含错误处理和安全考虑