SourceBot项目中的Nginx反向代理配置问题解析

背景介绍

SourceBot是一个基于Next.js开发的聊天机器人项目。在部署过程中，用户希望通过Nginx反向代理将SourceBot挂载到特定路径下（如/bot/），但遇到了静态资源加载失败的问题。本文将详细分析该问题的成因及解决方案。

问题现象

当通过Nginx配置将SourceBot代理到/bot/路径下时，页面虽然能够访问，但CSS、JavaScript和图片等静态资源无法加载。通过浏览器开发者工具检查发现，所有静态资源请求仍然指向根路径/，而不是预期的/bot/路径。

技术分析

Next.js应用路径处理机制

Next.js应用默认假设自己部署在网站根路径下。当应用被挂载到子路径时，需要明确告知应用这一配置，否则生成的资源引用路径将不正确。

Nginx配置要点

正确的Nginx反向代理配置需要考虑以下几点：

1. 确保代理路径与后端应用路径匹配
2. 正确处理WebSocket升级请求
3. 设置适当的超时时间

解决方案

1. Next.js配置调整

SourceBot项目通过引入basePath配置解决了这一问题。开发者可以通过设置环境变量DOMAIN_SUB_PATH来指定应用的基础路径。例如：

DOMAIN_SUB_PATH=/bot

这个变量会被Next.js的basePath配置项使用，确保所有静态资源路径都正确添加前缀。

2. Nginx配置示例

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

location ^~ /bot/ {
    proxy_pass http://sourcebot:3000;
    proxy_http_version 1.1;
    proxy_set_header Connection "upgrade";
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_read_timeout 1d;
}

3. 关键配置说明

• proxy_pass：指向SourceBot服务的实际地址
• proxy_http_version 1.1：支持HTTP/1.1协议
• Connection "upgrade"和Upgrade $http_upgrade：处理WebSocket连接
• X-Forwarded-*头：传递原始请求信息
• proxy_read_timeout 1d：设置长连接超时时间

常见问题排查

如果按照上述配置后仍然遇到问题，可以检查以下几点：

1. 确保DOMAIN_SUB_PATH环境变量已正确设置并生效
2. 验证Nginx配置中路径匹配规则是否正确
3. 检查浏览器开发者工具中的网络请求，确认资源路径是否包含正确前缀
4. 查看服务端日志，确认是否有404或其他错误

总结

通过结合Next.js的basePath配置和正确的Nginx反向代理设置，可以成功将SourceBot部署到子路径下。这一解决方案不仅适用于SourceBot项目，对于其他基于Next.js的应用也有参考价值。关键在于确保前端应用知道自己的部署路径，同时反向代理配置要正确转发请求。