7.9 KiB
7.9 KiB
后端部署 Shell 完整指南
🎯 目标
让服务器提供 Shell 登录页面,解决退出时无法跳转回登录页的问题。
📋 需要做的事情
✅ 后端代码已修改完成
Server/app/main.py 已经修改好了,包含:
- 挂载 Shell 目录到
/shell/路径 - 根路径重定向到 Shell 登录页
📦 需要上传的文件
1. 构建 Shell(在前端项目中执行)
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:直接复制到服务器项目(推荐)⭐
# 在项目根目录执行
# 把 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:使用软链接(开发环境)
# Windows(管理员权限)
cd Server
mklink /D Designer ..\Designer
# Linux/Mac
cd Server
ln -s ../Designer Designer
🔧 后端代码说明
main.py 的修改(已完成)
# 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
# 在前端项目目录
cd D:\main\DesignerCEP\Designer
npm run build:shell
检查输出:
- ✅
dist/index.html文件存在 - ✅
dist/assets/目录存在
Step 2: 复制 Shell 到服务器
方法 A:在本地复制(推荐)
# 在项目根目录
cd D:\main\DesignerCEP
# 创建目标目录
mkdir Server\Designer -Force
# 复制文件
Copy-Item -Path "Designer\dist" -Destination "Server\Designer\dist" -Recurse -Force
方法 B:在服务器上从 Git 拉取(如果用了 Git)
# 在服务器上
cd /path/to/DesignerCEP
git pull
cd Designer
npm run build:shell
Step 3: 验证文件结构
cd Server
dir Designer\dist\index.html # Windows
# 或
ls Designer/dist/index.html # Linux
应该看到:
D:\main\DesignerCEP\Server\Designer\dist\index.html
Step 4: 重启后端服务器
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:根路径重定向
# 在浏览器访问
http://127.0.0.1:8000/
预期: 自动跳转到 http://127.0.0.1:8000/shell/index.html 并显示登录页
测试 2:直接访问 Shell
http://127.0.0.1:8000/shell/
预期: 显示登录页面
测试 3:登录并退出
- 在 Shell 登录页输入账号密码
- 登录成功 → 跳转到 Core
- 在 Core 点击退出
- 预期: 跳转回 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/ 目录不存在
解决:
# 检查目录
cd D:\main\DesignerCEP\Server
dir Designer\dist
# 如果不存在,重新复制
cd ..
Copy-Item -Path "Designer\dist" -Destination "Server\Designer\dist" -Recurse -Force
问题 2:访问 /shell/ 显示 404
原因: 文件没有正确挂载
解决:
- 检查
Server/Designer/dist/index.html是否存在 - 检查后端启动日志是否显示 "✓ Shell 已挂载"
- 重启后端服务器
问题 3:访问 / 不重定向
原因: main.py 中的重定向代码没有生效
解决:
- 确认
main.py中有重定向代码:
@app.get("/")
def read_root():
from fastapi.responses import RedirectResponse
return RedirectResponse(url="/shell/index.html")
- 重启后端服务器
问题 4:Shell 页面加载失败
原因: 资源文件路径问题
解决:
- 检查
dist/index.html中的资源引用是否正确 - 确认
assets/目录完整复制 - 清除浏览器缓存后重试
🔄 更新流程
当 Shell 代码有更新时:
# 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 登录页 ✅
📝 快速命令汇总
# 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"}
现在退出流程完美了! 🎊