在Ollama WebUI项目中实现自定义部署路径的技术方案

在开源项目Ollama WebUI的实际部署场景中，很多开发者会遇到需要将应用部署在非根路径下的需求。本文将详细介绍如何通过技术手段实现这一目标，并提供完整的解决方案。

背景与需求分析

现代Web应用部署时，经常需要将多个应用部署在同一域名下的不同路径中。例如，将Ollama WebUI部署在https://example.com/my_ai_portal这样的路径下，而非直接部署在根路径。这种需求在以下场景中尤为常见：

1. 企业内网部署多个AI服务
2. 云服务提供商的多租户环境
3. 需要与其他系统集成的场景

技术实现方案

核心思路

实现这一需求的关键在于修改项目中所有硬编码的路径引用，确保它们都包含自定义的基础路径前缀。这包括：

1. 前端路由配置
2. API端点定义
3. 静态资源引用
4. WebSocket连接路径

具体实现脚本

我们开发了一个自动化脚本，能够系统地扫描项目代码并完成所有必要的路径修改。该脚本具有以下特点：

1. 智能路径替换：使用正则表达式精准匹配各种路径引用模式
2. 忽略规则：自动跳过不应修改的文件（如图片、字体等）
3. 安全机制：支持干运行模式先检查修改内容
4. 配置更新：自动修改Svelte配置以支持基础路径

脚本使用说明

# 干运行模式（仅检查不修改）
node ./prepare_openwebui.js ./open-webui/ --dry-run --path my_ai_portal

# 实际执行修改
node ./prepare_openwebui.js ./open-webui/ --path my_ai_portal

技术细节解析

路径替换规则

脚本内置了多种路径匹配规则，包括但不限于：

• 前端路由跳转（goto函数调用）
• HTML链接（href属性）
• API端点定义（FastAPI装饰器）
• 静态资源引用（src属性）
• WebSocket连接路径

特殊处理场景

对于某些特殊情况，脚本提供了精细化的控制：

1. 开发环境与生产环境的路径差异处理
2. 特定文件的例外规则（如配置文件）
3. 动态路径拼接的特殊情况

部署流程建议

1. 克隆项目仓库
2. 运行路径修改脚本
3. 修改Dockerfile（在构建步骤前添加脚本执行）
4. 重新构建前端代码
5. 部署应用

注意事项

1. 该方案已在Ollama WebUI 0.5.20版本测试通过
2. 每次升级项目版本后可能需要重新应用修改
3. 反向代理配置需要相应调整以匹配新的路径

总结

通过本文介绍的技术方案，开发者可以灵活地将Ollama WebUI部署在任何子路径下，满足各种复杂的部署需求。这种方案不仅适用于Ollama WebUI，其核心思路也可以借鉴到其他类似Web项目的部署场景中。

对于希望进一步定制化的开发者，可以基于提供的脚本进行扩展，实现更复杂的路径处理逻辑，如多级嵌套路径支持或环境变量动态配置等高级功能。