LiteLLM项目Admin UI访问异常的Nginx代理问题解析

在使用LiteLLM项目v1.61.20版本时，部分用户遇到了无法访问Admin UI界面的问题。该问题主要表现为当用户尝试访问管理界面时，系统返回404错误，提示找不到特定的JavaScript资源文件。

问题现象

用户报告称在升级到v1.61.20版本后，访问管理界面时出现错误。具体表现为浏览器控制台显示无法加载/_next/static/chunks/309-a4a536a89a6eb4e7.js文件，导致管理界面无法正常渲染。

根本原因

经过分析，该问题主要与Nginx反向代理配置有关。当LiteLLM服务通过Nginx进行代理时，如果Nginx配置不当，会导致Next.js应用的静态资源路径解析错误，从而引发404错误。

解决方案

要解决此问题，需要对Nginx配置进行适当调整。以下是关键的配置要点：

1. 正确处理静态资源路径：确保Nginx能够正确转发/_next/static路径下的所有请求到后端服务。

2. 重写规则配置：需要添加特定的重写规则来处理Next.js应用的路由。

3. 代理设置优化：确保代理设置不会修改或丢失重要的请求头信息。

配置示例

以下是一个经过验证可用的Nginx配置示例：

location /ui/ {
    proxy_pass http://litellm_backend/ui/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    
    # 处理Next.js静态资源
    location ~ ^/ui/_next/static {
        proxy_pass http://litellm_backend;
    }
}

验证方法

配置完成后，可以通过以下步骤验证问题是否解决：

1. 清除浏览器缓存
2. 重新加载管理界面
3. 检查浏览器开发者工具中的网络请求，确认所有静态资源都能正常加载
4. 观察后端日志，确认请求被正确转发

预防措施

为避免类似问题再次发生，建议：

1. 在升级LiteLLM版本前，先查看版本变更说明
2. 在测试环境中验证新版本后再部署到生产环境
3. 保持Nginx配置与LiteLLM文档中的推荐配置同步更新

通过以上调整，应该能够解决Admin UI访问异常的问题，确保管理界面正常显示和运行。