12 KiB
12 KiB
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. 跨域处理
# 后端配置 CORS
ALLOWED_ORIGINS = [
"https://your-domain.com",
"https://www.your-domain.com",
"file://", # 允许 CEP 扩展访问
]
3. 文件访问权限
# 静态文件目录权限
chmod 755 static/
chmod 644 static/shell/*
chmod 644 static/core/*
# 配置文件权限
chmod 600 .env
📊 性能优化
1. 静态资源缓存
# 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. 资源压缩
# 启用 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 响应时间
- 在线用户数
- 错误率和异常追踪
总结:
这个架构支持两种使用方式:
- CEP 扩展模式:Shell 在本地,Core 可在本地或服务器
- 纯在线模式:Shell 和 Core 都在服务器,通过浏览器访问
无论哪种方式,用户退出登录后都能回到 Shell 登录页重新登录。