2026-02-23 06:31:59 +00:00
|
|
|
|
# 快速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`
|
2026-02-27 04:44:59 +00:00
|
|
|
|
- 密码: `1221xian`
|
2026-02-23 06:31:59 +00:00
|
|
|
|
|
|
|
|
|
|
## 使用指南
|
|
|
|
|
|
|
|
|
|
|
|
### 创建项目
|
|
|
|
|
|
|
|
|
|
|
|
1. 点击右上角「新建项目」按钮
|
|
|
|
|
|
2. 填写项目名称和描述
|
2026-02-27 04:44:59 +00:00
|
|
|
|
3. (可选)填写项目路径,例如 `/demo/lot-demo`
|
|
|
|
|
|
4. 拖拽或点击上传项目文件
|
|
|
|
|
|
5. 点击「创建项目」完成
|
|
|
|
|
|
|
|
|
|
|
|
### 项目路径说明
|
|
|
|
|
|
|
|
|
|
|
|
项目路径用于自定义项目的访问URL:
|
|
|
|
|
|
|
|
|
|
|
|
- 格式:以 `/` 开头的相对路径,如 `/demo/lot-demo`
|
|
|
|
|
|
- 访问URL格式:`http://域名:端口/项目路径`
|
|
|
|
|
|
- 示例:项目路径 `/demo/lot-demo`,端口 `9000`,则访问地址为 `http://localhost:9000/demo/lot-demo`
|
|
|
|
|
|
- 用途:支持同一域名下部署多个项目,通过不同路径区分
|
2026-02-23 06:31:59 +00:00
|
|
|
|
|
|
|
|
|
|
### 部署项目
|
|
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
|
|
|
## 联系方式
|
|
|
|
|
|
|
|
|
|
|
|
如有问题或建议,请联系系统管理员。
|