项目列表
+管理和部署您的前端项目
+暂无项目
+点击上方按钮创建您的第一个项目
++ {{ project.name }} +
+{{ project.description || '暂无描述' }}
+From 3c562fae2a45d2b1094fa0028b99df2f221451fb Mon Sep 17 00:00:00 2001 From: MaeLucia <597445175@qq.com> Date: Mon, 23 Feb 2026 14:31:59 +0800 Subject: [PATCH] =?UTF-8?q?Initial=20commit:=20=E5=BF=AB=E9=80=9FDemo?= =?UTF-8?q?=E6=BC=94=E7=A4=BA=E7=B3=BB=E7=BB=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.example | 10 + .gitignore | 31 + .trae/documents/plan_20260223_022522.md | 64 + .trae/documents/域名配置功能实现方案.md | 55 + DEPLOYMENT.md | 132 ++ PORT_CONFIG.md | 111 + README.md | 249 +++ client/index.html | 16 + client/package-lock.json | 2449 +++++++++++++++++++++++ client/package.json | 24 + client/postcss.config.js | 6 + client/public/favicon.svg | 3 + client/src/App.vue | 6 + client/src/api/index.js | 75 + client/src/components/SettingsModal.vue | 138 ++ client/src/components/UploadModal.vue | 221 ++ client/src/main.js | 12 + client/src/router/index.js | 42 + client/src/stores/auth.js | 47 + client/src/stores/project.js | 113 ++ client/src/style.css | 48 + client/src/views/Dashboard.vue | 171 ++ client/src/views/Login.vue | 257 +++ client/src/views/ProjectDetail.vue | 288 +++ client/tailwind.config.js | 44 + client/vite.config.js | 18 + data/logs/1771822691510.json | 52 + data/logs/1771823016002.json | 62 + data/projects.json | 63 + deploy/DEPLOY_GUIDE.md | 198 ++ deploy/deploy.bat | 74 + deploy/deploy.ps1 | 113 ++ deploy/deploy.sh | 92 + package-lock.json | 1711 ++++++++++++++++ package.json | 34 + server/config/index.js | 28 + server/index.js | 36 + server/middleware/auth.js | 25 + server/routes/auth.js | 129 ++ server/routes/deploy.js | 89 + server/routes/projects.js | 100 + server/services/processManager.js | 271 +++ server/services/projectService.js | 256 +++ server/utils/loginLimiter.js | 122 ++ 44 files changed, 8085 insertions(+) create mode 100644 .env.example create mode 100644 .gitignore create mode 100644 .trae/documents/plan_20260223_022522.md create mode 100644 .trae/documents/域名配置功能实现方案.md create mode 100644 DEPLOYMENT.md create mode 100644 PORT_CONFIG.md create mode 100644 README.md create mode 100644 client/index.html create mode 100644 client/package-lock.json create mode 100644 client/package.json create mode 100644 client/postcss.config.js create mode 100644 client/public/favicon.svg create mode 100644 client/src/App.vue create mode 100644 client/src/api/index.js create mode 100644 client/src/components/SettingsModal.vue create mode 100644 client/src/components/UploadModal.vue create mode 100644 client/src/main.js create mode 100644 client/src/router/index.js create mode 100644 client/src/stores/auth.js create mode 100644 client/src/stores/project.js create mode 100644 client/src/style.css create mode 100644 client/src/views/Dashboard.vue create mode 100644 client/src/views/Login.vue create mode 100644 client/src/views/ProjectDetail.vue create mode 100644 client/tailwind.config.js create mode 100644 client/vite.config.js create mode 100644 data/logs/1771822691510.json create mode 100644 data/logs/1771823016002.json create mode 100644 data/projects.json create mode 100644 deploy/DEPLOY_GUIDE.md create mode 100644 deploy/deploy.bat create mode 100644 deploy/deploy.ps1 create mode 100644 deploy/deploy.sh create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 server/config/index.js create mode 100644 server/index.js create mode 100644 server/middleware/auth.js create mode 100644 server/routes/auth.js create mode 100644 server/routes/deploy.js create mode 100644 server/routes/projects.js create mode 100644 server/services/processManager.js create mode 100644 server/services/projectService.js create mode 100644 server/utils/loginLimiter.js diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..c723f61 --- /dev/null +++ b/.env.example @@ -0,0 +1,10 @@ +# 服务端口 +PORT=8888 + +# 基础域名(部署到服务器时配置,本地开发留空使用localhost) +# 示例:BASE_DOMAIN=demo.example.com +BASE_DOMAIN= + +# 项目端口范围 +PROJECT_PORT_START=9000 +PROJECT_PORT_END=9100 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e00e7fd --- /dev/null +++ b/.gitignore @@ -0,0 +1,31 @@ +# Dependencies +node_modules/ + +# Build output +client/dist/ + +# Environment files +.env + +# Data files +server/data/ + +# Project uploads +projects/ + +# IDE +.idea/ +.vscode/ +*.swp +*.swo + +# OS +.DS_Store +Thumbs.db + +# Logs +*.log +npm-debug.log* + +# Lock files (optional, uncomment if needed) +# package-lock.json diff --git a/.trae/documents/plan_20260223_022522.md b/.trae/documents/plan_20260223_022522.md new file mode 100644 index 0000000..0ac4b29 --- /dev/null +++ b/.trae/documents/plan_20260223_022522.md @@ -0,0 +1,64 @@ +## 自动部署Web系统实现计划 + +### 技术栈 +- **后端**: Node.js + Express +- **前端**: Vue.js 3 + Vite + Tailwind CSS +- **认证**: JWT Token +- **设计风格**: 简约现代,无衬线字体,流畅动画 + +### 目录结构 +``` +auto-deploy-demo/ +├── server/ # 后端代码 +│ ├── index.js # 主入口 +│ ├── routes/ # API路由 +│ ├── middleware/ # JWT认证中间件 +│ └── services/ # 业务逻辑 +├── client/ # Vue.js前端 +│ ├── src/ +│ │ ├── views/ # 页面组件 +│ │ ├── components/ # 通用组件 +│ │ ├── api/ # API封装 +│ │ ├── stores/ # Pinia状态管理 +│ │ └── router/ # 路由配置 +│ └── tailwind.config.js +├── projects/ # 部署项目存储 +├── data/ # 数据存储 +└── package.json +``` + +### 设计规范 +- **配色**: 白色/浅灰背景 + 蓝色主色调 + 绿色成功状态 +- **字体**: Inter / SF Pro (现代无衬线) +- **动画**: 平滑过渡 (transition-all duration-200) +- **布局**: 简洁卡片式,充足留白 + +### 实现步骤 + +**第一阶段: 后端核心 (步骤1-6)** +1. 初始化项目,创建package.json +2. Express服务器主入口 +3. JWT认证中间件 +4. 用户认证API +5. 项目管理API (CRUD) +6. 文件上传模块 + +**第二阶段: 部署功能 (步骤7-10)** +7. 端口自动分配 (3100-3200) +8. 项目启动/停止 +9. 访问链接生成 +10. 日志记录 + +**第三阶段: Vue前端 (步骤11-18)** +11. 初始化Vue 3 + Vite + Tailwind +12. 路由和状态管理配置 +13. 登录页面 (简约现代风格) +14. 项目列表页面 +15. 文件上传组件 (拖拽支持) +16. 部署进度显示 +17. 响应式布局优化 +18. 动画和交互优化 + +**第四阶段: 文档 (步骤19-20)** +19. 部署文档 +20. 使用说明 \ No newline at end of file diff --git a/.trae/documents/域名配置功能实现方案.md b/.trae/documents/域名配置功能实现方案.md new file mode 100644 index 0000000..cb3c5b9 --- /dev/null +++ b/.trae/documents/域名配置功能实现方案.md @@ -0,0 +1,55 @@ +## 域名配置功能实现方案 + +### 问题分析 +当前系统使用 `localhost` 生成 demo 项目链接,部署到服务器后需要使用指定域名。 + +### 实现步骤 + +#### 1. 创建环境配置文件 +- 创建 `.env.example` 示例配置文件 +- 创建 `.env` 实际配置文件(本地开发用) +- 支持配置项: + - `PORT` - 主服务端口(默认 8888) + - `BASE_DOMAIN` - 基础域名(如 `demo.example.com`) + - `PROJECT_PORT_START` - 项目端口起始值(默认 9000) + - `PROJECT_PORT_END` - 项目端口结束值(默认 9100) + +#### 2. 安装 dotenv 依赖 +- 添加 `dotenv` 包用于读取环境变量 + +#### 3. 创建配置模块 +- 创建 `server/config/index.js` 统一管理配置 +- 提供获取项目 URL 的方法,支持域名模式 + +#### 4. 修改 processManager.js +- 使用配置模块获取域名 +- 生成 URL 时根据配置使用域名或 IP:端口 格式 +- 支持两种模式: + - **子域名模式**:`http://project-id.demo.example.com` + - **端口模式**:`http://demo.example.com:9000` + +#### 5. 修改 server/index.js +- 启动时加载环境变量配置 + +#### 6. 前端适配 +- 前端 API 请求使用相对路径(已支持) +- 无需额外修改 + +### 配置示例 + +```env +# .env 示例 +PORT=8888 +BASE_DOMAIN=demo.example.com +PROJECT_PORT_START=9000 +PROJECT_PORT_END=9100 +``` + +### URL 生成规则 +- 本地开发(无 BASE_DOMAIN):`http://localhost:9000` +- 服务器部署(有 BASE_DOMAIN):`http://demo.example.com:9000` + +### 文件修改清单 +1. 新建:`.env.example`、`.env`、`server/config/index.js` +2. 修改:`server/index.js`、`server/services/processManager.js` +3. 更新:`package.json`(添加 dotenv 依赖) \ No newline at end of file diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md new file mode 100644 index 0000000..659bf3c --- /dev/null +++ b/DEPLOYMENT.md @@ -0,0 +1,132 @@ +# 快速部署系统 - 部署文档 + +## 系统要求 + +- Node.js 18.0 或更高版本 +- npm 9.0 或更高版本 +- 腾讯云服务器 (推荐配置: 2核4G) + +## 一、服务器环境配置 + +### 1. 安装 Node.js + +```bash +# 使用 nvm 安装 Node.js +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash +source ~/.bashrc +nvm install 18 +nvm use 18 +``` + +### 2. 安装 PM2 (进程管理器) + +```bash +npm install -g pm2 +``` + +### 3. 配置防火墙 + +```bash +# 开放系统端口 +firewall-cmd --permanent --add-port=8888/tcp +firewall-cmd --permanent --add-port=9000-9100/tcp +firewall-cmd --reload +``` + +### 4. 腾讯云安全组配置 + +在腾讯云控制台配置安全组规则: +- 开放 8888 端口 (管理界面) +- 开放 9000-9100 端口范围 (部署的项目) + +## 二、项目部署 + +### 1. 上传项目代码 + +```bash +# 将项目上传到服务器 +scp -r auto-deploy-demo root@your-server-ip:/opt/ +``` + +### 2. 安装依赖 + +```bash +cd /opt/auto-deploy-demo + +# 安装后端依赖 +npm install + +# 安装前端依赖并构建 +cd client +npm install +npm run build +cd .. +``` + +### 3. 配置环境变量 + +创建 `.env` 文件: + +```bash +cat > .env << EOF +PORT=8888 +JWT_SECRET=your-secure-secret-key-change-this +HOST=your-server-ip +EOF +``` + +### 4. 启动服务 + +```bash +# 使用 PM2 启动 +pm2 start server/index.js --name "deploy-system" + +# 设置开机自启 +pm2 startup +pm2 save +``` + +### 5. 验证部署 + +访问 `http://your-server-ip:8888` 检查系统是否正常运行。 + +## 三、Nginx 反向代理配置 (可选) + +如需使用域名访问,可配置 Nginx: + +```nginx +server { + listen 80; + server_name your-domain.com; + + location / { + proxy_pass http://127.0.0.1:8888; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection 'upgrade'; + proxy_set_header Host $host; + proxy_cache_bypass $http_upgrade; + } +} +``` + +## 四、常见问题 + +### Q: 端口被占用怎么办? + +检查端口占用: +```bash +lsof -i :8888 +``` + +### Q: 如何查看日志? + +```bash +pm2 logs deploy-system +``` + +### Q: 如何重启服务? + +```bash +pm2 restart deploy-system +``` \ No newline at end of file diff --git a/PORT_CONFIG.md b/PORT_CONFIG.md new file mode 100644 index 0000000..acd1fd0 --- /dev/null +++ b/PORT_CONFIG.md @@ -0,0 +1,111 @@ +# 端口配置说明 + +## 端口分配 + +### 管理系统端口 +- **端口**: 8888 +- **用途**: Web管理界面 +- **访问地址**: http://localhost:8888 (本地) 或 http://your-server-ip:8888 (服务器) + +### 演示项目端口范围 +- **端口范围**: 9000-9100 +- **用途**: 部署的前端演示项目 +- **分配方式**: 系统自动分配可用端口 +- **最大并发**: 最多同时运行100个项目 + +## 端口选择说明 + +### 管理系统端口 (8888) +- 选择8888作为管理端口,避开常见端口 +- 不与常见服务冲突(如80、443、3000、8080、3306等) +- 便于记忆和配置 + +### 演示项目端口 (9000-9100) +- 选择9000-9100范围,远离常用端口段 +- 避免与系统服务端口冲突 +- 提供100个可用端口,满足并发需求 + +## 防火墙配置 + +### Windows防火墙 +```powershell +# 开放管理端口 +New-NetFirewallRule -DisplayName "Deploy System" -Direction Inbound -LocalPort 8888 -Protocol TCP -Action Allow + +# 开放演示项目端口范围 +New-NetFirewallRule -DisplayName "Deploy Projects" -Direction Inbound -LocalPort 9000-9100 -Protocol TCP -Action Allow +``` + +### Linux防火墙 (firewalld) +```bash +# 开放管理端口 +firewall-cmd --permanent --add-port=8888/tcp + +# 开放演示项目端口范围 +firewall-cmd --permanent --add-port=9000-9100/tcp + +# 重载防火墙 +firewall-cmd --reload +``` + +### 腾讯云安全组 +在腾讯云控制台配置以下安全组规则: +- **入站规则**: + - 协议: TCP + - 端口: 8888 + - 策略: 允许 + - 协议: TCP + - 端口: 9000-9100 + - 策略: 允许 + +## 环境变量配置 + +创建 `.env` 文件配置端口: + +```bash +PORT=8888 +JWT_SECRET=your-secure-secret-key-change-this +HOST=your-server-ip +``` + +## 端口冲突排查 + +### 检查端口占用 + +**Windows:** +```powershell +Get-NetTCPConnection -State Listen | Where-Object {$_.LocalPort -eq 8888} +``` + +**Linux:** +```bash +lsof -i :8888 +netstat -tuln | grep 8888 +``` + +### 解决端口冲突 + +如果端口被占用,可以: +1. 停止占用端口的进程 +2. 修改 `.env` 文件中的 `PORT` 值 +3. 重启服务 + +## 端口使用示例 + +### 本地开发 +``` +管理界面: http://localhost:8888 +演示项目: http://localhost:9000-9100 +``` + +### 服务器部署 +``` +管理界面: http://your-server-ip:8888 +演示项目: http://your-server-ip:9000-9100 +``` + +### 域名访问 (Nginx反向代理) +``` +管理界面: http://your-domain.com +演示项目: http://your-domain.com:9000-9100 +``` \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..2fb8da9 --- /dev/null +++ b/README.md @@ -0,0 +1,249 @@ +# 快速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` +- 密码: `admin123` + +## 使用指南 + +### 创建项目 + +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 +│ ├── 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 + +## 联系方式 + +如有问题或建议,请联系系统管理员。 diff --git a/client/index.html b/client/index.html new file mode 100644 index 0000000..02fa2e8 --- /dev/null +++ b/client/index.html @@ -0,0 +1,16 @@ + + +
+ + + +管理和部署您的前端项目
+点击上方按钮创建您的第一个项目
+{{ project.description || '暂无描述' }}
+登录以管理您的项目
++ 剩余时间:{{ formatTime(remainingSeconds) }} +
++ 警告:已失败 {{ attempts }} 次,连续失败 {{ maxAttempts }} 次将被锁定10分钟 +
+{{ project?.description || '暂无描述' }}
+{{ log.message }}
+{{ formatDateTime(log.timestamp) }}
+