388 lines
7.9 KiB
Markdown
388 lines
7.9 KiB
Markdown
# 后端部署 Shell 完整指南
|
||
|
||
## 🎯 目标
|
||
|
||
让服务器提供 Shell 登录页面，解决退出时无法跳转回登录页的问题。
|
||
|
||
---
|
||
|
||
## 📋 需要做的事情
|
||
|
||
### ✅ 后端代码已修改完成
|
||
|
||
`Server/app/main.py` 已经修改好了，包含：
|
||
1. 挂载 Shell 目录到 `/shell/` 路径
|
||
2. 根路径重定向到 Shell 登录页
|
||
|
||
---
|
||
|
||
## 📦 需要上传的文件
|
||
|
||
### 1. 构建 Shell（在前端项目中执行）
|
||
|
||
```bash
|
||
cd Designer
|
||
npm run build:shell
|
||
```
|
||
|
||
**生成位置：** `Designer/dist/`
|
||
|
||
**生成内容：**
|
||
```
|
||
Designer/dist/
|
||
├── index.html ← Shell 入口文件
|
||
├── assets/
|
||
│ ├── index-xxx.js ← Shell 的 JS
|
||
│ ├── index-xxx.css ← Shell 的 CSS
|
||
│ └── ...
|
||
├── node_modules/ ← CEP 需要的依赖
|
||
└── ...
|
||
```
|
||
|
||
---
|
||
|
||
### 2. 上传 Shell 到服务器
|
||
|
||
有两种方式：
|
||
|
||
#### 方式 1：直接复制到服务器项目（推荐）⭐
|
||
|
||
```bash
|
||
# 在项目根目录执行
|
||
# 把 Designer/dist/ 整个目录复制到服务器项目下
|
||
|
||
# Windows PowerShell
|
||
Copy-Item -Path "Designer\dist" -Destination "Server\Designer\dist" -Recurse -Force
|
||
|
||
# Linux/Mac
|
||
cp -r Designer/dist Server/Designer/dist
|
||
```
|
||
|
||
最终服务器目录结构：
|
||
```
|
||
Server/
|
||
├── app/
|
||
│ ├── main.py ← 已修改
|
||
│ └── ...
|
||
├── Designer/ ← 新增！
|
||
│ └── dist/ ← Shell 文件
|
||
│ ├── index.html
|
||
│ └── ...
|
||
└── ...
|
||
```
|
||
|
||
#### 方式 2：使用软链接（开发环境）
|
||
|
||
```bash
|
||
# Windows（管理员权限）
|
||
cd Server
|
||
mklink /D Designer ..\Designer
|
||
|
||
# Linux/Mac
|
||
cd Server
|
||
ln -s ../Designer Designer
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 后端代码说明
|
||
|
||
### main.py 的修改（已完成）
|
||
|
||
```python
|
||
# 1. 导入 Path
|
||
from pathlib import Path
|
||
|
||
# 2. 挂载 Shell 目录
|
||
shell_dir = Path(__file__).parent.parent / "Designer"
|
||
if shell_dir.exists():
|
||
app.mount("/shell", StaticFiles(directory=str(shell_dir), html=True), name="shell")
|
||
print(f"✓ Shell 已挂载: {shell_dir}")
|
||
else:
|
||
print(f"⚠️ Shell 目录不存在: {shell_dir}")
|
||
print(" 请先运行: cd Designer && npm run build:shell")
|
||
|
||
# 3. 根路径重定向到 Shell
|
||
@app.get("/")
|
||
def read_root():
|
||
from fastapi.responses import RedirectResponse
|
||
return RedirectResponse(url="/shell/index.html")
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 部署步骤
|
||
|
||
### Step 1: 构建 Shell
|
||
|
||
```bash
|
||
# 在前端项目目录
|
||
cd D:\main\DesignerCEP\Designer
|
||
npm run build:shell
|
||
```
|
||
|
||
**检查输出：**
|
||
- ✅ `dist/index.html` 文件存在
|
||
- ✅ `dist/assets/` 目录存在
|
||
|
||
---
|
||
|
||
### Step 2: 复制 Shell 到服务器
|
||
|
||
**方法 A：在本地复制（推荐）**
|
||
|
||
```bash
|
||
# 在项目根目录
|
||
cd D:\main\DesignerCEP
|
||
|
||
# 创建目标目录
|
||
mkdir Server\Designer -Force
|
||
|
||
# 复制文件
|
||
Copy-Item -Path "Designer\dist" -Destination "Server\Designer\dist" -Recurse -Force
|
||
```
|
||
|
||
**方法 B：在服务器上从 Git 拉取（如果用了 Git）**
|
||
|
||
```bash
|
||
# 在服务器上
|
||
cd /path/to/DesignerCEP
|
||
git pull
|
||
cd Designer
|
||
npm run build:shell
|
||
```
|
||
|
||
---
|
||
|
||
### Step 3: 验证文件结构
|
||
|
||
```bash
|
||
cd Server
|
||
dir Designer\dist\index.html # Windows
|
||
# 或
|
||
ls Designer/dist/index.html # Linux
|
||
```
|
||
|
||
**应该看到：**
|
||
```
|
||
D:\main\DesignerCEP\Server\Designer\dist\index.html
|
||
```
|
||
|
||
---
|
||
|
||
### Step 4: 重启后端服务器
|
||
|
||
```bash
|
||
cd Server
|
||
python -m uvicorn app.main:app --reload
|
||
```
|
||
|
||
**启动日志应该显示：**
|
||
```
|
||
✓ Shell 已挂载: D:\main\DesignerCEP\Server\Designer\dist
|
||
INFO: Uvicorn running on http://127.0.0.1:8000
|
||
```
|
||
|
||
如果显示：
|
||
```
|
||
⚠️ Shell 目录不存在: ...
|
||
请先运行: cd Designer && npm run build:shell
|
||
```
|
||
|
||
说明文件没有正确复制，回到 Step 2。
|
||
|
||
---
|
||
|
||
### Step 5: 测试访问
|
||
|
||
#### 测试 1：根路径重定向
|
||
|
||
```bash
|
||
# 在浏览器访问
|
||
http://127.0.0.1:8000/
|
||
```
|
||
|
||
**预期：** 自动跳转到 `http://127.0.0.1:8000/shell/index.html` 并显示登录页
|
||
|
||
#### 测试 2：直接访问 Shell
|
||
|
||
```bash
|
||
http://127.0.0.1:8000/shell/
|
||
```
|
||
|
||
**预期：** 显示登录页面
|
||
|
||
#### 测试 3：登录并退出
|
||
|
||
1. 在 Shell 登录页输入账号密码
|
||
2. 登录成功 → 跳转到 Core
|
||
3. 在 Core 点击退出
|
||
4. **预期：** 跳转回 Shell 登录页 ✅
|
||
|
||
---
|
||
|
||
## 📁 完整目录结构
|
||
|
||
```
|
||
D:\main\DesignerCEP\
|
||
├── Designer/
|
||
│ ├── src/
|
||
│ │ ├── launcher/ ← Shell 源代码
|
||
│ │ │ ├── view/
|
||
│ │ │ │ └── Login.vue ← 登录页面源码
|
||
│ │ │ └── utils/
|
||
│ │ │ └── updater.ts
|
||
│ │ └── view/
|
||
│ │ └── Home.vue ← Core 页面
|
||
│ │
|
||
│ └── dist/ ← 构建后的 Shell
|
||
│ ├── index.html ← 需要复制到服务器
|
||
│ └── assets/
|
||
│
|
||
└── Server/
|
||
├── app/
|
||
│ └── main.py ← 已修改
|
||
│
|
||
├── Designer/ ← 新增目录
|
||
│ └── dist/ ← 从 Designer/dist/ 复制过来
|
||
│ ├── index.html ← Shell 登录页
|
||
│ └── assets/
|
||
│
|
||
└── archives/ ← Core 下载包
|
||
└── core-v1.2.4.zip
|
||
```
|
||
|
||
---
|
||
|
||
## 🔍 访问路径说明
|
||
|
||
| URL | 作用 | 文件位置 |
|
||
|-----|------|---------|
|
||
| `http://127.0.0.1:8000/` | 根路径，重定向到 Shell | - |
|
||
| `http://127.0.0.1:8000/shell/` | Shell 登录页 | `Server/Designer/dist/index.html` |
|
||
| `http://127.0.0.1:8000/core/v1.2.4/` | Core 业务页 | `C:/Users/.../DesignerCache/v1.2.4/` |
|
||
| `http://127.0.0.1:8000/download/` | 下载 Core 包 | `Server/archives/` |
|
||
|
||
---
|
||
|
||
## ⚠️ 常见问题
|
||
|
||
### 问题 1：启动后显示 "Shell 目录不存在"
|
||
|
||
**原因：** `Server/Designer/dist/` 目录不存在
|
||
|
||
**解决：**
|
||
```bash
|
||
# 检查目录
|
||
cd D:\main\DesignerCEP\Server
|
||
dir Designer\dist
|
||
|
||
# 如果不存在，重新复制
|
||
cd ..
|
||
Copy-Item -Path "Designer\dist" -Destination "Server\Designer\dist" -Recurse -Force
|
||
```
|
||
|
||
---
|
||
|
||
### 问题 2：访问 `/shell/` 显示 404
|
||
|
||
**原因：** 文件没有正确挂载
|
||
|
||
**解决：**
|
||
1. 检查 `Server/Designer/dist/index.html` 是否存在
|
||
2. 检查后端启动日志是否显示 "✓ Shell 已挂载"
|
||
3. 重启后端服务器
|
||
|
||
---
|
||
|
||
### 问题 3：访问 `/` 不重定向
|
||
|
||
**原因：** `main.py` 中的重定向代码没有生效
|
||
|
||
**解决：**
|
||
1. 确认 `main.py` 中有重定向代码：
|
||
```python
|
||
@app.get("/")
|
||
def read_root():
|
||
from fastapi.responses import RedirectResponse
|
||
return RedirectResponse(url="/shell/index.html")
|
||
```
|
||
2. 重启后端服务器
|
||
|
||
---
|
||
|
||
### 问题 4：Shell 页面加载失败
|
||
|
||
**原因：** 资源文件路径问题
|
||
|
||
**解决：**
|
||
1. 检查 `dist/index.html` 中的资源引用是否正确
|
||
2. 确认 `assets/` 目录完整复制
|
||
3. 清除浏览器缓存后重试
|
||
|
||
---
|
||
|
||
## 🔄 更新流程
|
||
|
||
当 Shell 代码有更新时：
|
||
|
||
```bash
|
||
# 1. 重新构建 Shell
|
||
cd Designer
|
||
npm run build:shell
|
||
|
||
# 2. 复制到服务器
|
||
cd ..
|
||
Copy-Item -Path "Designer\dist" -Destination "Server\Designer\dist" -Recurse -Force
|
||
|
||
# 3. 重启后端（如果使用 --reload 则自动重启）
|
||
# 或手动重启
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ 部署检查清单
|
||
|
||
部署完成后，检查以下项：
|
||
|
||
- [ ] `Server/Designer/dist/index.html` 文件存在
|
||
- [ ] 后端启动日志显示 "✓ Shell 已挂载"
|
||
- [ ] 访问 `http://127.0.0.1:8000/` 自动跳转到 Shell
|
||
- [ ] 访问 `http://127.0.0.1:8000/shell/` 显示登录页
|
||
- [ ] Shell 页面可以正常登录
|
||
- [ ] 登录后跳转到 Core
|
||
- [ ] Core 退出后跳转回 Shell 登录页 ✅
|
||
|
||
---
|
||
|
||
## 📝 快速命令汇总
|
||
|
||
```bash
|
||
# 1. 构建 Shell
|
||
cd D:\main\DesignerCEP\Designer
|
||
npm run build:shell
|
||
|
||
# 2. 复制到服务器
|
||
cd ..
|
||
Copy-Item -Path "Designer\dist" -Destination "Server\Designer\dist" -Recurse -Force
|
||
|
||
# 3. 重启后端
|
||
cd Server
|
||
python -m uvicorn app.main:app --reload
|
||
|
||
# 4. 测试访问
|
||
# 浏览器打开: http://127.0.0.1:8000/
|
||
```
|
||
|
||
---
|
||
|
||
## 🎉 完成
|
||
|
||
部署完成后：
|
||
- ✅ 用户登录后使用 Core
|
||
- ✅ 退出时自动跳转回 Shell 登录页
|
||
- ✅ 不再显示 `{"message":"Welcome to DesignerCEP Backend"}`
|
||
|
||
**现在退出流程完美了！** 🎊
|
||
|