快速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

使用指南

创建项目

1. 点击右上角「新建项目」按钮
2. 填写项目名称和描述
3. （可选）填写项目路径，例如 /demo/lot-demo
4. 拖拽或点击上传项目文件
5. 点击「创建项目」完成

项目路径说明

项目路径用于自定义项目的访问URL：

• 格式：以 / 开头的相对路径，如 /demo/lot-demo
• 访问URL格式：http://域名:端口/项目路径
• 示例：项目路径 /demo/lot-demo，端口 9000，则访问地址为 http://localhost:9000/demo/lot-demo
• 用途：支持同一域名下部署多个项目，通过不同路径区分

部署项目

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	获取运行日志

服务器部署

使用部署脚本

# Windows PowerShell
cd deploy
.\deploy.ps1

手动部署

1. 安装Node.js

curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs
sudo npm install -g pm2

2. 上传文件

scp -r server projects client/dist package.json .env user@server:/path/to/app/

3. 启动服务

npm install --production
pm2 start server/index.js --name auto-deploy-demo
pm2 save
pm2 startup

4. 配置防火墙

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项目	自动识别并启动

注意事项

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

联系方式

如有问题或建议，请联系系统管理员。