# DesignerCEP 部署架构说明 ## 📐 整体架构 ``` ┌─────────────────────────────────────────────────────────────┐ │ 用户设备 │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ Adobe Photoshop + CEP 扩展 │ │ │ │ ┌──────────────────────────────────────────────────┐ │ │ │ │ │ 1. Shell (本地 CEP) │ │ │ │ │ │ - 首次从服务器下载 shell.zip │ │ │ │ │ │ - 离线登录页 (file://) │ │ │ │ │ │ - 版本管理和更新 │ │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ ▼ │ │ │ │ ┌──────────────────────────────────────────────────┐ │ │ │ │ │ 2. Core (在线应用) │ │ │ │ │ │ - 从服务器加载 (https://) │ │ │ │ │ │ - 核心功能和业务逻辑 │ │ │ │ │ │ - 与 Photoshop 交互 │ │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ │ ▼ HTTP/HTTPS ┌─────────────────────────────────────────────────────────────┐ │ 服务器 (Linux) │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ Nginx (反向代理) │ │ │ │ ┌──────────────┬──────────────┬──────────────────┐ │ │ │ │ │ /shell/ │ /core/ │ /api/ │ │ │ │ │ │ Shell 在线页 │ Core 应用 │ API 接口 │ │ │ │ │ └──────┬───────┴──────┬───────┴────────┬─────────┘ │ │ │ └─────────┼──────────────┼────────────────┼─────────────┘ │ │ │ │ │ │ │ ┌─────────▼──────────────▼────────────────▼─────────────┐ │ │ │ 静态文件服务 + FastAPI │ │ │ │ ┌────────────┐ ┌────────────┐ ┌─────────────┐ │ │ │ │ │ Shell │ │ Core │ │ API Routes │ │ │ │ │ │ (在线登录) │ │ (核心应用) │ │ (业务逻辑) │ │ │ │ │ └────────────┘ └────────────┘ └─────────────┘ │ │ │ └────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` ## 🔄 用户流程 ### 场景 1: 首次使用（CEP 扩展） ``` 1. 用户安装 CEP 扩展 └─> 扩展启动，检查本地是否有 Shell 2. 如果没有 Shell，从服务器下载 └─> 下载 /downloads/shell-1.0.0.zip └─> 解压到本地缓存目录 3. 加载本地 Shell 登录页 (file://) └─> 用户输入用户名密码 4. 登录成功后 └─> 检查版本更新 └─> 下载 Core 应用到本地缓存 └─> 加载 Core 应用 (http://localhost:8000/core/1.0.0/) 或直接从服务器加载 (https://your-domain.com/core/1.0.0/) ``` ### 场景 2: 在线使用（浏览器访问） ``` 1. 用户访问在线登录页 └─> https://your-domain.com/shell/ 2. 输入用户名密码登录 3. 登录成功后跳转到 Core └─> https://your-domain.com/core/1.0.0/ 4. 使用核心功能 └─> API 调用 → /api/v1/* 5. 退出登录 └─> 清除本地 token └─> 跳转回 Shell 登录页 https://your-domain.com/shell/#/login ``` ## 📁 服务器目录结构详解 ``` /var/www/DesignerCEP/Server/ │ ├── app/ # 后端应用代码 │ ├── api/ # API 路由 │ │ └── v1/ │ │ ├── auth.py # 认证相关 │ │ ├── client.py # 客户端相关 │ │ └── ... │ ├── core/ # 核心配置 │ ├── services/ # 业务逻辑 │ └── main.py # 应用入口 │ ├── static/ # 静态文件（重要！） │ │ │ ├── shell/ # Shell 在线登录页 │ │ ├── index.html # 登录页入口 │ │ ├── assets/ # JS/CSS/图片等 │ │ │ ├── index-abc123.js │ │ │ ├── index-xyz456.css │ │ │ └── logo.png │ │ └── ... │ │ │ ├── downloads/ # 下载文件（供 CEP 扩展） │ │ ├── shell-1.0.0.zip # Shell 安装包 │ │ ├── shell-1.0.1.zip │ │ └── ... │ │ │ └── core/ # Core 核心应用 │ ├── 1.0.0/ # 版本 1.0.0 │ │ ├── index.html │ │ ├── assets/ │ │ └── ... │ ├── 1.0.1/ # 版本 1.0.1 │ │ ├── index.html │ │ ├── assets/ │ │ └── ... │ └── ... │ ├── logs/ # 日志文件 │ ├── access.log │ └── error.log │ ├── .env # 环境变量配置 ├── requirements.txt # Python 依赖 └── venv/ # Python 虚拟环境 ``` ## 🌐 URL 路由映射 | URL 路径 | 本地文件路径 | 说明 | 访问方式 | |---------|------------|------|---------| | `/shell/` | `static/shell/index.html` | Shell 在线登录页 | 浏览器/CEP | | `/shell/assets/xxx.js` | `static/shell/assets/xxx.js` | Shell 静态资源 | 自动加载 | | `/downloads/shell-1.0.0.zip` | `static/downloads/shell-1.0.0.zip` | Shell 安装包 | CEP 下载 | | `/core/1.0.0/` | `static/core/1.0.0/index.html` | Core 应用（版本 1.0.0） | 浏览器/CEP | | `/core/1.0.0/assets/xxx.js` | `static/core/1.0.0/assets/xxx.js` | Core 静态资源 | 自动加载 | | `/api/v1/client/login` | FastAPI 路由 | 登录接口 | API 调用 | | `/api/v1/client/check_update` | FastAPI 路由 | 检查更新 | API 调用 | ## 🔐 认证流程详解 ### 1. 用户登录 ``` 用户 → Shell 登录页 ↓ 输入用户名/密码 ↓ POST /api/v1/client/login ↓ ┌─────────────────────┐ │ 后端验证 │ │ - 检查用户名密码 │ │ - 检查设备限制 │ │ - 生成 JWT Token │ └─────────────────────┘ ↓ 返回 token + 用户信息 ↓ 保存到 localStorage: - token - username - device_id - auto_login ↓ 跳转到 Core 应用 (/core/1.0.0/#/home?token=xxx&username=xxx&device_id=xxx) ``` ### 2. Core 应用初始化 ``` Core 启动 ↓ 检查 URL 参数或 localStorage 中的 token ↓ 如果有 token: ├─> 保存到 localStorage ├─> 启动心跳检测 (每 60 秒验证一次) └─> 加载用户数据 如果没有 token: └─> 跳转到 Shell 登录页 ``` ### 3. 退出登录 ``` 用户点击退出 ↓ POST /api/v1/auth/logout ↓ 清除 localStorage: - token - username - device_id - auto_login ↓ 判断环境: - CEP 环境 → 跳转到本地 Shell (file://) - 浏览器环境 → 跳转到在线 Shell (https://) ``` ## 🔄 版本更新流程 ### 方案 1: 服务器端更新（推荐） ``` 1. 构建新版本 cd Designer npm run build 2. 上传到服务器 scp -r dist/Designer/* \ user@server:/var/www/DesignerCEP/Server/static/core/1.0.1/ 3. 更新后端配置 修改 current_version = "1.0.1" 4. 用户下次登录时自动获取新版本 ``` ### 方案 2: CEP 扩展自动更新 ``` 1. 用户启动 CEP 扩展 2. Shell 调用 /api/v1/client/check_update 返回: { version: "1.0.1", download_url: "/core/1.0.1.zip" } 3. 如果版本号不同，自动下载新版本 4. 下载并解压到本地缓存 5. 启动新版本 Core ``` ## 🔒 安全考虑 ### 1. 数据传输 - ✅ 必须使用 HTTPS（SSL 证书） - ✅ API 请求必须携带 JWT Token - ✅ Token 过期时间设置合理（默认 30 天） ### 2. 跨域处理 ```python # 后端配置 CORS ALLOWED_ORIGINS = [ "https://your-domain.com", "https://www.your-domain.com", "file://", # 允许 CEP 扩展访问 ] ``` ### 3. 文件访问权限 ```bash # 静态文件目录权限 chmod 755 static/ chmod 644 static/shell/* chmod 644 static/core/* # 配置文件权限 chmod 600 .env ``` ## 📊 性能优化 ### 1. 静态资源缓存 ```nginx # Nginx 配置 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 1y; add_header Cache-Control "public, immutable"; } location ~* \.html$ { expires -1; add_header Cache-Control "no-cache"; } ``` ### 2. 资源压缩 ```nginx # 启用 Gzip 压缩 gzip on; gzip_types text/plain text/css application/json application/javascript; ``` ### 3. CDN 加速（可选） 将静态资源部署到 CDN，加快全球访问速度。 ## 🔍 监控和日志 ### 1. 应用日志 - 后端日志: `/var/www/DesignerCEP/Server/logs/` - Nginx 日志: `/var/log/nginx/` - Systemd 日志: `journalctl -u designer-cep` ### 2. 监控指标 - 服务器 CPU/内存使用率 - API 响应时间 - 在线用户数 - 错误率和异常追踪 --- **总结**: 这个架构支持两种使用方式： 1. **CEP 扩展模式**：Shell 在本地，Core 可在本地或服务器 2. **纯在线模式**：Shell 和 Core 都在服务器，通过浏览器访问 无论哪种方式，用户退出登录后都能回到 Shell 登录页重新登录。