Nginx反向代理配置：解决若依Druid静态资源404问题-北京尧图网络

1. 问题背景与现象描述最近在帮团队部署若依(RuoYi)框架时遇到了一个典型的Nginx反向代理问题系统上线后Druid监控页面的CSS样式和JS文件全部报404错误。这个问题看似简单但排查过程却涉及Nginx配置的多个关键知识点尤其是location匹配规则和proxy_pass的使用细节。若依作为国内流行的开源管理系统默认集成了Druid数据库连接池的监控功能。在本地开发环境一切正常但通过Nginx反向代理部署到生产环境后访问/druid路径时页面框架可以加载但所有静态资源*.css,*.js都返回404。这直接导致监控页面样式错乱功能无法正常使用。2. 问题排查过程2.1 初步检查首先确认后端服务本身没有问题# 直接访问后端服务假设运行在8080端口 curl http://localhost:8080/druid/login.html返回完整的HTML内容说明Spring Boot应用本身正常。2.2 Nginx配置分析原始的Nginx配置如下server { listen 80; server_name example.com; location ~* ^/druid { proxy_pass http://backend; proxy_set_header Host $host; } location / { proxy_pass http://backend/; proxy_set_header Host $host; } }2.3 关键问题定位通过Chrome开发者工具发现主页面/druid/login.html能正常加载但所有静态资源请求如/druid/js/common.js都返回404查看Nginx访问日志发现静态资源请求被代理到了错误的路径3. 技术原理深度解析3.1 Nginx location匹配机制Nginx的location匹配遵循以下优先级顺序精确匹配^~前缀匹配~或~*正则匹配区分/不区分大小写普通前缀匹配3.2 proxy_pass的尾部斜杠陷阱proxy_pass指令中URL末尾是否带斜杠有本质区别proxy_pass http://backend/会去除匹配的location路径proxy_pass http://backend会保留完整路径3.3 正则location的捕获问题正则表达式location会捕获匹配的整个URI路径如果proxy_pass不带URI部分会传递完整原始请求路径4. 解决方案与优化配置4.1 修正后的配置方案server { listen 80; server_name example.com; # 精确匹配静态资源 location ~* ^/druid/.*\.(js|css|png)$ { proxy_pass http://backend; } # Druid路径代理 location ~* ^/druid { proxy_pass http://backend/druid; } # 默认代理规则 location / { proxy_pass http://backend/; } }4.2 配置要点说明静态资源单独处理通过正则明确匹配静态文件扩展名添加路径重写在proxy_pass中明确指定/druid路径保留通用代理规则确保其他请求正常转发5. 完整测试验证流程5.1 逐步验证步骤检查Nginx配置语法nginx -t重新加载配置nginx -s reload完整测试路径主页面/druid/login.htmlJS文件/druid/js/common.jsCSS文件/druid/css/style.css5.2 关键验证点所有静态资源返回200状态码响应内容与直接访问后端服务一致页面样式和功能完全正常6. 进阶优化建议6.1 静态资源缓存优化location ~* ^/druid/.*\.(js|css|png)$ { proxy_pass http://backend; expires 7d; add_header Cache-Control public; }6.2 安全加固配置location ~* ^/druid { proxy_pass http://backend/druid; auth_basic Restricted; auth_basic_user_file /etc/nginx/.htpasswd; }6.3 性能调优参数proxy_buffer_size 128k; proxy_buffers 4 256k; proxy_busy_buffers_size 256k;7. 常见问题与排查技巧7.1 问题现象速查表现象可能原因解决方案所有资源404proxy_pass末尾斜杠问题检查proxy_pass的URI部分只有静态资源404路径重写问题单独配置静态资源location间歇性404上游服务健康状态检查后端服务可用性7.2 实用调试命令查看Nginx实际接收的请求tail -f /var/log/nginx/access.log测试proxy_pass实际转发地址curl -v http://example.com/druid/login.html检查上游服务响应curl -H Host: example.com http://backend/druid/login.html8. 经验总结与最佳实践在实际部署中我总结了以下几点经验始终先测试直接访问后端服务确认问题范围对特殊路径如监控页面单独配置location规则静态资源单独处理并添加缓存头使用curl -v命令验证请求全过程保持Nginx配置的简洁性和可读性对于若依框架的部署还需要特别注意Druid的路径默认是/druid前后端分离版本可能需要额外处理API路径生产环境务必配置访问权限控制这个案例典型展示了Nginx作为反向代理时location匹配和proxy_pass使用的微妙之处。理解这些底层机制才能快速定位和解决各类代理问题。

Nginx反向代理配置：解决若依Druid静态资源404问题

相关推荐

轻流无代码平台能力边界实测：表单流程权限集成与运维

hyperframes：HTML动画的帧序列化范式与CLI工作流

Spark GraphX图计算核心技术解析与应用实践

更多资讯

OpenClip 扩展商店使用教程：一键安装、自动更新与管理社区扩展

Bang Motion 视频图层技术详解：像 After Effects 一样把 MP4 嵌入 HTML 动画并锁定时间线的完整指南

4 步跑通 PyScript 配置与部署：从 make setup 到静态托管的实战清单

智慧地铁大屏 · 19 个组件完整操作手册

MySQL-数据库服务日志管理与数据闪回

供应链管理软件选型指南：WMS/OMS/TMS/BMS怎么选？（含主流厂商对比）

今日更新

猫狗目标检测数据集：VOC/COCO/YOLO三格式一体化实战包

HDU2017多校标程复现：算法竞赛工程化真题沙盒

Codex Sandbox 隔离环境拆解：AI Agent 的临时实验室如何运作

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？