19 KiB

Raw Blame History

快速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 - 手动安装:

下载Nginx: http://nginx.org/en/download.html (选择 Stable version → nginx/Windows)
解压到 C:\nginx
将 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 - 压缩包

服务器部署

上传部署包

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

解压并启动

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

配置宿主机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

访问管理后台

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. 简化方案：直接使用端口访问

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

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

使用指南

创建项目

点击右上角「新建项目」按钮
填写项目名称和描述
拖拽或点击上传项目文件
点击「创建项目」完成

部署项目

在项目列表点击「启动项目」
系统自动分配端口并启动
点击生成的链接访问项目

修改密码

点击右上角「设置」按钮
输入当前密码和新密码
点击「确认修改」

安全特性

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

注意事项

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

常见问题

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

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

Q: 启动失败怎么办？

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

Q: 刷新页面显示404？

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

Q: 如何修改登录密码？

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

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

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

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

检查Nginx是否正常运行: nginx -t
检查配置文件是否生成: cat nginx/sites-enabled/auto-deploy.conf
检查Nginx错误日志: tail -f /var/log/nginx/error.log
确认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

联系方式

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

19 KiB Raw Blame History Unescape Escape

快速Demo演示系统

功能特性

技术栈

环境要求

运行模式

快速开始

安装依赖

配置环境变量

启动服务

默认账号

Windows 本地开发环境

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

方式二：Nginx动态路由模式

1. 安装Nginx（Windows）

2. 配置Nginx

3. 配置环境变量

4. 启动服务

Linux 服务器部署

方式一：多端口模式

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

1. 安装Nginx

2. 创建配置目录

3. 配置Nginx主配置

4. 配置环境变量

5. 配置sudo权限（重要）

6. 防火墙配置

7. 启动服务

一键打包部署（推荐）

部署模式

单端口模式架构（推荐）

本地打包

服务器部署

部署包结构

Docker 部署（推荐）

架构说明

1. 构建前端

2. 构建Docker镜像

3. 启动容器

4. 配置宿主机Nginx

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

Docker常用命令

使用指南

创建项目

部署项目

修改密码

安全特性

项目结构

API 接口

认证相关

项目管理

部署相关

支持的项目类型

注意事项

常见问题

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

Q: 启动失败怎么办？

Q: 刷新页面显示404？

Q: 如何修改登录密码？

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

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

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

许可证

联系方式

19 KiB

Raw Blame History