快速Demo演示系统

一个简易的前端项目部署管理平台，支持快速上传、部署和运行前端演示项目。

功能特性

• 快速部署 - 拖拽上传文件，一键启动项目
• 多项目支持 - 同时运行多个演示项目
• 自动端口分配 - 自动分配可用端口（9000-9100）
• SPA路由支持 - 自动处理前端路由刷新问题
• 安全登录 - 支持登录失败锁定机制
• 密码修改 - 用户可自行修改密码
• 域名配置 - 支持自定义域名生成项目链接
• Nginx动态路由 - 支持Nginx反向代理，统一端口访问

技术栈

• 后端: Node.js + Express
• 前端: Vue 3 + Vite + Tailwind CSS
• 状态管理: Pinia
• 进程管理: PM2
• 反向代理: Nginx（可选）

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0
• 操作系统: Windows / Linux / macOS
• Nginx（可选，用于动态路由模式）

运行模式

系统支持两种运行模式：

模式	说明	URL格式	适用场景
多端口模式	每个项目独立端口	http://domain:9000/	本地开发、无Nginx环境
Nginx动态路由模式	所有项目共用80端口	http://domain/project/{id}/	服务器部署、生产环境

快速开始

安装依赖

# 安装后端依赖
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

# Nginx配置（动态路由模式）
USE_NGINX=auto
NGINX_CONFIG_DIR=./nginx/sites-enabled
NGINX_TEMPLATE_PATH=./server/templates/nginx
NGINX_RELOAD_CMD=nginx -s reload
NGINX_TEST_CMD=nginx -t

启动服务

npm start

访问 http://localhost:8888 进入系统。

默认账号

• 用户名: admin
• 密码: admin123

---

Windows 本地开发环境

方式一：多端口模式（无需Nginx）

默认配置 USE_NGINX=auto，系统会自动检测Nginx。本地未安装Nginx时，自动使用多端口模式。

# .env
USE_NGINX=false

启动后访问：

• 管理后台: http://localhost:8888
• 项目地址: http://localhost:9000、http://localhost:9001 等

方式二：Nginx动态路由模式

1. 安装Nginx（Windows）

方法A - 使用Chocolatey（推荐）:

# 安装Chocolatey（如未安装）
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

# 安装Nginx
choco install nginx

方法B - 手动安装:

1. 下载Nginx: http://nginx.org/en/download.html (选择 Stable version → nginx/Windows)
2. 解压到 C:\nginx
3. 将 C:\nginx 添加到系统环境变量 PATH

2. 配置Nginx

创建Nginx配置目录：

# 在项目目录下创建
mkdir nginx\sites-enabled

编辑 C:\nginx\conf\nginx.conf，在 http 块末尾添加：

http {
    # ... 其他配置 ...
    
    # 引入自动生成的配置
    include Q:/agentProject/auto-deploy-demo/nginx/sites-enabled/*.conf;
}

3. 配置环境变量

# .env
USE_NGINX=true
NGINX_CONFIG_DIR=./nginx/sites-enabled
NGINX_RELOAD_CMD=nginx -s reload
NGINX_TEST_CMD=nginx -t

4. 启动服务

# 启动Nginx
start nginx

# 启动应用
npm start

启动后访问：

• 管理后台: http://localhost:8888
• 项目地址: http://localhost/project/{id}/

---

Linux 服务器部署

方式一：多端口模式

适用于无需Nginx或已有其他反向代理的场景。

# .env
USE_NGINX=false
PORT=8888
BASE_DOMAIN=your-domain.com

防火墙配置：

sudo firewall-cmd --permanent --add-port=8888/tcp
sudo firewall-cmd --permanent --add-port=9000-9100/tcp
sudo firewall-cmd --reload

方式二：Nginx动态路由模式（推荐）

1. 安装Nginx

# CentOS/RHEL
sudo yum install -y nginx
sudo systemctl enable nginx
sudo systemctl start nginx

# Ubuntu/Debian
sudo apt update
sudo apt install -y nginx
sudo systemctl enable nginx
sudo systemctl start nginx

2. 创建配置目录

# 在项目目录下创建
mkdir -p /path/to/app/nginx/sites-enabled

3. 配置Nginx主配置

编辑 /etc/nginx/nginx.conf，在 http 块内添加：

http {
    # ... 其他配置 ...
    
    # 引入自动生成的配置
    include /path/to/app/nginx/sites-enabled/*.conf;
}

4. 配置环境变量

# .env
PORT=8888
BASE_DOMAIN=demo.your-domain.com
USE_NGINX=true
NGINX_CONFIG_DIR=/path/to/app/nginx/sites-enabled
NGINX_TEMPLATE_PATH=/path/to/app/server/templates/nginx
NGINX_RELOAD_CMD=sudo nginx -s reload
NGINX_TEST_CMD=sudo nginx -t

5. 配置sudo权限（重要）

为了让Node.js应用能够执行nginx命令，需要配置sudo免密：

sudo visudo

添加以下内容（替换 www-user 为实际运行用户）：

www-user ALL=(ALL) NOPASSWD: /usr/sbin/nginx -s reload, /usr/sbin/nginx -t

6. 防火墙配置

# 只需开放80和443端口
sudo firewall-cmd --permanent --add-port=80/tcp
sudo firewall-cmd --permanent --add-port=443/tcp
sudo firewall-cmd --reload

7. 启动服务

npm install --production

方式A：使用systemd服务（推荐）

创建服务文件：

sudo nano /etc/systemd/system/auto-deploy.service

内容如下（修改路径和用户）：

[Unit]
Description=Auto Deploy Demo
After=network.target

[Service]
Type=simple
User=www-data
WorkingDirectory=/path/to/app
ExecStart=/usr/bin/node server/index.js
Restart=on-failure
RestartSec=10

[Install]
WantedBy=multi-user.target

启动服务：

sudo systemctl daemon-reload
sudo systemctl enable auto-deploy
sudo systemctl start auto-deploy

方式B：使用PM2（可选）

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

启动后访问：

• 管理后台: http://demo.your-domain.com/
• 项目地址: http://demo.your-domain.com/project/{id}/

---

一键打包部署（推荐）

本地构建，服务器直接运行，无需在服务器上安装Node.js。

部署模式

模式	命令	端口	适用场景
单端口模式	.\build-dist.ps1 -SinglePort	8080→80	宿主机有Nginx，只需一个端口
多端口模式	.\build-dist.ps1	8888+9000-9100	宿主机无Nginx，直接暴露多端口

单端口模式架构（推荐）

用户请求
    │
    ▼
┌─────────────────────────────────────┐
│        宿主机 Nginx (80)            │
│  demo.example.com → localhost:8080  │
└──────────────┬──────────────────────┘
               │
               ▼
┌─────────────────────────────────────┐
│      Docker 容器 (8080→80)          │
│  ┌───────────────────────────────┐  │
│  │    容器内 Nginx (80)          │  │
│  │  / → 管理后台 (127.0.0.1:8888)│  │
│  │  /project/123/ → :9000       │  │
│  │  /project/456/ → :9001       │  │
│  └───────────────────────────────┘  │
│  ┌───────────────────────────────┐  │
│  │  Node.js 服务 (127.0.0.1:8888)│  │
│  │  项目服务 (127.0.0.1:9000+)   │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

本地打包

Windows PowerShell:

# 单端口模式（推荐）
.\build-dist.ps1 -SinglePort

# 多端口模式
.\build-dist.ps1

Linux/Mac:

chmod +x build-dist.sh

# 单端口模式（推荐）
./build-dist.sh --single-port

# 多端口模式
./build-dist.sh

打包完成后会生成：

• deploy-dist/ - 部署目录
• auto-deploy-dist-single-YYYYMMDD_HHMMSS.zip - 压缩包

服务器部署

1. 上传部署包

scp auto-deploy-dist-*.zip user@server:/opt/auto-deploy/

2. 解压并启动

cd /opt/auto-deploy
unzip auto-deploy-dist-*.zip
docker-compose up -d

3. 配置宿主机Nginx

创建 /etc/nginx/conf.d/demo.conf:

server {
    listen 80;
    server_name demo.example.com;

    location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

重载Nginx:

sudo nginx -t && sudo nginx -s reload

4. 访问管理后台

http://demo.example.com/

部署包结构

deploy-dist/
├── Dockerfile           # Docker构建文件
├── docker-compose.yml   # Docker编排文件
├── package.json         # 依赖配置
├── server/              # 后端代码
├── client/dist/         # 前端构建产物
├── data/                # 数据目录（持久化）
├── projects/            # 项目文件（持久化）
├── .env                 # 环境变量
└── README.md            # 部署说明

---

Docker 部署（推荐）

适用于宿主机已有Nginx的场景。

架构说明

┌─────────────────────────────────────────────────────────────┐
│                        宿主机                                │
│  ┌─────────────────────────────────────────────────────┐   │
│  │              Nginx (80/443)                         │   │
│  │   location / { proxy_pass http://127.0.0.1:8888; }  │   │
│  │   location /project/ { proxy_pass http://127.0.0.1:9000-9100; } │
│  └──────────────────────┬──────────────────────────────┘   │
│                         │                                   │
│  ┌──────────────────────▼──────────────────────────────┐   │
│  │           Docker Container                           │   │
│  │   ┌─────────────────────────────────────────────┐   │   │
│  │   │  Node.js App (8888) - 管理后台/API          │   │   │
│  │   └─────────────────────────────────────────────┘   │   │
│  │   ┌─────────────────────────────────────────────┐   │   │
│  │   │  项目服务 (9000-9100) - 演示项目            │   │   │
│  │   └─────────────────────────────────────────────┘   │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

1. 构建前端

cd client
npm install
npm run build
cd ..

2. 构建Docker镜像

docker build -t auto-deploy-demo .

3. 启动容器

方式A：使用docker-compose（推荐）

docker-compose up -d

方式B：使用docker run

docker run -d \
  --name auto-deploy-demo \
  -p 8888:8888 \
  -p 9000:9000 \
  -p 9001:9001 \
  -p 9002:9002 \
  -p 9003:9003 \
  -p 9004:9004 \
  -p 9005:9005 \
  -v $(pwd)/data:/app/data \
  -v $(pwd)/projects:/app/projects \
  -e BASE_DOMAIN=your-domain.com \
  -e USE_NGINX=false \
  -e PROJECT_BIND_ADDRESS=0.0.0.0 \
  auto-deploy-demo

注意: Docker模式下必须设置 PROJECT_BIND_ADDRESS=0.0.0.0，否则宿主机无法访问项目服务。

4. 配置宿主机Nginx

在宿主机的Nginx配置中添加：

# /etc/nginx/conf.d/auto-deploy.conf

server {
    listen 80;
    server_name demo.your-domain.com;

    # 管理后台和API
    location / {
        proxy_pass http://127.0.0.1:8888;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

# 每个项目使用独立子域名（推荐方案）
# 项目1: http://project1.demo.your-domain.com
server {
    listen 80;
    server_name project1.demo.your-domain.com;
    location / {
        proxy_pass http://127.0.0.1:9000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

# 项目2: http://project2.demo.your-domain.com
server {
    listen 80;
    server_name project2.demo.your-domain.com;
    location / {
        proxy_pass http://127.0.0.1:9001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

5. 简化方案：直接使用端口访问

如果不需要域名，可以直接通过端口访问：

• 管理后台: http://your-server-ip:8888
• 项目1: http://your-server-ip:9000
• 项目2: http://your-server-ip:9001

Docker常用命令

# 查看日志
docker logs -f auto-deploy-demo

# 重启容器
docker restart auto-deploy-demo

# 停止容器
docker-compose down

# 更新部署
docker-compose down
docker-compose build
docker-compose up -d

---

使用指南

创建项目

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
│   │   └── nginxManager.js    # Nginx配置管理
│   ├── templates/         # 配置模板
│   │   └── nginx/
│   │       ├── main.conf.tpl
│   │       └── location.conf.tpl
│   ├── middleware/        # 中间件
│   ├── utils/             # 工具函数
│   │   └── loginLimiter.js
│   └── data/              # 数据存储目录
├── client/                 # 前端代码
│   ├── src/
│   │   ├── views/         # 页面组件
│   │   ├── components/    # 通用组件
│   │   └── stores/        # 状态管理
│   └── dist/              # 构建产物
├── nginx/                  # Nginx配置目录
│   └── sites-enabled/     # 自动生成的配置
├── 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	获取运行日志
GET	/api/deploy/nginx/status	获取Nginx配置状态

---

支持的项目类型

类型	说明
静态HTML	直接部署，无需构建
Vue/React构建产物	上传dist目录内容
Vite项目	自动识别并启动

---

注意事项

1. 文件大小: 单个文件最大100MB
2. 端口范围:
   • 管理系统: 8888
   • 演示项目: 9000-9100（内部端口，Nginx模式下外部不可见）
3. 并发限制: 最多同时运行100个项目
4. 数据备份: 请定期备份 server/data 和 projects 目录
5. Nginx模式: 需要确保Node.js进程有权限执行nginx命令

---

常见问题

Q: 上传后项目无法访问？

检查项目是否包含 index.html 入口文件。

Q: 启动失败怎么办？

查看项目详情页的操作日志，了解错误原因。

Q: 刷新页面显示404？

系统已支持SPA路由回退，如仍有问题请检查项目路由配置。

Q: 如何修改登录密码？

点击右上角「设置」按钮，在弹窗中修改密码。

Q: 密码错误多次被锁定？

连续3次密码错误将锁定10分钟，请等待倒计时结束后重试。

Q: Nginx模式下项目无法访问？

1. 检查Nginx是否正常运行: nginx -t
2. 检查配置文件是否生成: cat nginx/sites-enabled/auto-deploy.conf
3. 检查Nginx错误日志: tail -f /var/log/nginx/error.log
4. 确认Node.js有权限执行nginx命令

Q: Windows下Nginx命令执行失败？

确保Nginx安装目录已添加到系统PATH环境变量，或使用完整路径：

NGINX_RELOAD_CMD=C:\nginx\nginx.exe -s reload
NGINX_TEST_CMD=C:\nginx\nginx.exe -t

---

许可证

MIT License

联系方式

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