334 lines
12 KiB
Markdown
334 lines
12 KiB
Markdown
# 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 登录页重新登录。
|
||
|