8008ec8b35
更新默认密码为更安全的版本，并完善项目创建流程说明 添加项目路径配置说明，解释其格式和用途 |
||
|---|---|---|
| .trae/documents | ||
| client | ||
| data | ||
| deploy | ||
| server | ||
| .env.example | ||
| .gitignore | ||
| DEPLOYMENT.md | ||
| PORT_CONFIG.md | ||
| README.md | ||
| package-lock.json | ||
| package.json | ||
README.md
快速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
快速开始
安装依赖
# 安装后端依赖
npm install
# 安装前端依赖并构建
cd client
npm install
npm run build
cd ..
配置环境变量
复制配置文件并修改：
cp .env.example .env
编辑 .env 文件：
# 服务端口
PORT=8888
# 基础域名（部署到服务器时配置）
BASE_DOMAIN=your-domain.com
# 项目端口范围
PROJECT_PORT_START=9000
PROJECT_PORT_END=9100
启动服务
npm start
访问 http://localhost:8888 进入系统。
默认账号
- 用户名:
admin - 密码:
1221xian
使用指南
创建项目
- 点击右上角「新建项目」按钮
- 填写项目名称和描述
- （可选）填写项目路径，例如
/demo/lot-demo - 拖拽或点击上传项目文件
- 点击「创建项目」完成
项目路径说明
项目路径用于自定义项目的访问URL：
- 格式：以
/开头的相对路径，如/demo/lot-demo - 访问URL格式：
http://域名:端口/项目路径 - 示例：项目路径
/demo/lot-demo，端口9000，则访问地址为http://localhost:9000/demo/lot-demo - 用途：支持同一域名下部署多个项目，通过不同路径区分
部署项目
- 在项目列表点击「启动项目」
- 系统自动分配端口并启动
- 点击生成的链接访问项目
修改密码
- 点击右上角「设置」按钮
- 输入当前密码和新密码
- 点击「确认修改」
安全特性
- 连续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 | 获取运行日志 |
服务器部署
使用部署脚本
# Windows PowerShell
cd deploy
.\deploy.ps1
手动部署
- 安装Node.js
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs
sudo npm install -g pm2
- 上传文件
scp -r server projects client/dist package.json .env user@server:/path/to/app/
- 启动服务
npm install --production
pm2 start server/index.js --name auto-deploy-demo
pm2 save
pm2 startup
- 配置防火墙
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
支持的项目类型
| 类型 | 说明 |
|---|---|
| 静态HTML | 直接部署，无需构建 |
| Vue/React构建产物 | 上传dist目录内容 |
| Vite项目 | 自动识别并启动 |
注意事项
- 文件大小: 单个文件最大100MB
- 端口范围:
- 管理系统: 8888
- 演示项目: 9000-9100
- 并发限制: 最多同时运行100个项目
- 数据备份: 请定期备份
server/data和projects目录
常见问题
Q: 上传后项目无法访问？
检查项目是否包含 index.html 入口文件。
Q: 启动失败怎么办？
查看项目详情页的操作日志，了解错误原因。
Q: 刷新页面显示404？
系统已支持SPA路由回退，如仍有问题请检查项目路由配置。
Q: 如何修改登录密码？
点击右上角「设置」按钮，在弹窗中修改密码。
Q: 密码错误多次被锁定？
连续3次密码错误将锁定10分钟，请等待倒计时结束后重试。
许可证
MIT License
联系方式
如有问题或建议，请联系系统管理员。