# 快速Demo演示系统 一个简易的前端项目部署管理平台,支持快速上传、部署和运行前端演示项目。 ## 功能特性 - **快速部署** - 拖拽上传文件,一键启动项目 - **多项目支持** - 同时运行多个演示项目 - **自动端口分配** - 自动分配可用端口(9000-9100) - **SPA路由支持** - 自动处理前端路由刷新问题 - **安全登录** - 支持登录失败锁定机制 - **密码修改** - 用户可自行修改密码 - **域名配置** - 支持自定义域名生成项目链接 ## 技术栈 - **后端**: Node.js + Express - **前端**: Vue 3 + Vite + Tailwind CSS - **状态管理**: Pinia - **进程管理**: PM2 ## 环境要求 - Node.js >= 16.0.0 - npm >= 8.0.0 - 操作系统: Windows / Linux / macOS ## 快速开始 ### 安装依赖 ```bash # 安装后端依赖 npm install # 安装前端依赖并构建 cd client npm install npm run build cd .. ``` ### 配置环境变量 复制配置文件并修改: ```bash cp .env.example .env ``` 编辑 `.env` 文件: ```env # 服务端口 PORT=8888 # 基础域名(部署到服务器时配置) BASE_DOMAIN=your-domain.com # 项目端口范围 PROJECT_PORT_START=9000 PROJECT_PORT_END=9100 ``` ### 启动服务 ```bash npm start ``` 访问 http://localhost:8888 进入系统。 ### 默认账号 - 用户名: `admin` - 密码: `admin123` ## 使用指南 ### 创建项目 1. 点击右上角「新建项目」按钮 2. 填写项目名称和描述 3. 拖拽或点击上传项目文件 4. 点击「创建项目」完成 ### 部署项目 1. 在项目列表点击「启动项目」 2. 系统自动分配端口并启动 3. 点击生成的链接访问项目 ### 修改密码 1. 点击右上角「设置」按钮 2. 输入当前密码和新密码 3. 点击「确认修改」 ### 安全特性 - 连续3次密码错误将锁定账户10分钟 - 锁定期间显示实时倒计时 - 提供「忘记密码」入口 ## 项目结构 ``` auto-deploy-demo/ ├── server/ # 后端代码 │ ├── index.js # 入口文件 │ ├── config/ # 配置模块 │ ├── routes/ # API路由 │ │ ├── auth.js # 认证相关 │ │ ├── projects.js # 项目管理 │ │ └── deploy.js # 部署相关 │ ├── services/ # 业务服务 │ │ ├── projectService.js │ │ └── processManager.js │ ├── middleware/ # 中间件 │ ├── utils/ # 工具函数 │ │ └── loginLimiter.js │ └── data/ # 数据存储目录 ├── client/ # 前端代码 │ ├── src/ │ │ ├── views/ # 页面组件 │ │ ├── components/ # 通用组件 │ │ └── stores/ # 状态管理 │ └── dist/ # 构建产物 ├── projects/ # 上传的项目存储 ├── deploy/ # 部署脚本 └── .env # 环境配置 ``` ## API 接口 ### 认证相关 | 方法 | 路径 | 说明 | |------|------|------| | POST | /api/auth/login | 用户登录 | | GET | /api/auth/verify | 验证Token | | POST | /api/auth/change-password | 修改密码 | | GET | /api/auth/lock-status/:username | 获取锁定状态 | ### 项目管理 | 方法 | 路径 | 说明 | |------|------|------| | GET | /api/projects | 获取项目列表 | | POST | /api/projects | 创建项目 | | GET | /api/projects/:id | 获取项目详情 | | DELETE | /api/projects/:id | 删除项目 | ### 部署相关 | 方法 | 路径 | 说明 | |------|------|------| | POST | /api/deploy/:id/start | 启动项目 | | POST | /api/deploy/:id/stop | 停止项目 | | GET | /api/deploy/:id/status | 获取运行状态 | | GET | /api/deploy/:id/logs | 获取运行日志 | ## 服务器部署 ### 使用部署脚本 ```powershell # Windows PowerShell cd deploy .\deploy.ps1 ``` ### 手动部署 1. **安装Node.js** ```bash curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash - sudo yum install -y nodejs sudo npm install -g pm2 ``` 2. **上传文件** ```bash scp -r server projects client/dist package.json .env user@server:/path/to/app/ ``` 3. **启动服务** ```bash npm install --production pm2 start server/index.js --name auto-deploy-demo pm2 save pm2 startup ``` 4. **配置防火墙** ```bash sudo firewall-cmd --permanent --add-port=8888/tcp sudo firewall-cmd --permanent --add-port=9000-9100/tcp sudo firewall-cmd --reload ``` 详细部署指南请参考 [deploy/DEPLOY_GUIDE.md](deploy/DEPLOY_GUIDE.md) ## 支持的项目类型 | 类型 | 说明 | |------|------| | 静态HTML | 直接部署,无需构建 | | Vue/React构建产物 | 上传dist目录内容 | | Vite项目 | 自动识别并启动 | ## 注意事项 1. **文件大小**: 单个文件最大100MB 2. **端口范围**: - 管理系统: 8888 - 演示项目: 9000-9100 3. **并发限制**: 最多同时运行100个项目 4. **数据备份**: 请定期备份 `server/data` 和 `projects` 目录 ## 常见问题 ### Q: 上传后项目无法访问? 检查项目是否包含 `index.html` 入口文件。 ### Q: 启动失败怎么办? 查看项目详情页的操作日志,了解错误原因。 ### Q: 刷新页面显示404? 系统已支持SPA路由回退,如仍有问题请检查项目路由配置。 ### Q: 如何修改登录密码? 点击右上角「设置」按钮,在弹窗中修改密码。 ### Q: 密码错误多次被锁定? 连续3次密码错误将锁定10分钟,请等待倒计时结束后重试。 ## 许可证 MIT License ## 联系方式 如有问题或建议,请联系系统管理员。