一、问题现象项目在本地开发环境一切正常上传头像、简历等文件后能立即显示。部署到云服务器Ubuntu Docker Nginx后前端界面能正常访问API能正常登录、返回数据但所有上传的图片/文件均无法访问404 Not Found。环境信息后端ASP.NET Core 6/8Docker容器前端Vue/ReactNginx容器同时担任反向代理部署方式Docker Compose网络模式容器间通过服务名通信backend:8000二、排查过程完整实录第一步确认文件是否真的上传到了容器内部bashdocker exec -it portfolio-backend /bin/bash ls -la /app/wwwroot/uploads输出结果text-rw-r--r-- 1 root root 101117 Jun 29 03:27 test.jpg结论文件确实存在不是上传失败的问题。第二步绕过Nginx直接访问后端容器bashdocker run --rm --network container:portfolio-backend appropriate/curl --head http://127.0.0.1:8000/uploads/test.jpg返回结果textHTTP/1.1 200 OK Content-Type: image/jpeg Server: Kestrel结论后端ASP.NET Core应用程序能够正常提供静态文件服务问题出在Nginx代理层。第三步检查Nginx容器能否连通Backendbashdocker exec -it portfolio-frontend ping backend -c 2输出textPING backend (172.19.0.2): 56 data bytes 64 bytes from 172.19.0.2: seq0 ttl64 time0.138 ms结论容器间网络通信正常DNS解析也无问题。第四步检查Nginx配置发现致命隐患原Nginx配置精简版nginx# 反向代理后端API location /api/ { proxy_pass http://backend:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 反向代理后端静态文件 location /uploads/ { proxy_pass http://backend:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 前端静态资源缓存策略 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { expires 30d; add_header Cache-Control public, immutable; }问题根源Nginx 的location匹配规则中正则表达式~和~*的优先级高于普通前缀匹配。当请求/uploads/test.jpg时先被location ~* \.(jpg|...)$命中因为它是正则匹配Nginx 尝试在Nginx容器自身的root目录下找/uploads/test.jpg而不是转发给 Backend文件不存在 →404三、解决方案两种方式✅ 方案一使用^~修饰符提升优先级推荐nginx# 反向代理后端静态文件^~ 强制优先于正则 location ^~ /uploads/ { proxy_pass http://backend:8000; 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; }原理^~告诉Nginx只要路径以/uploads/开头就直接命中该规则不再向下匹配任何正则表达式。❌ 方案二删除正则缓存规则不推荐如果删除location ~* \.(js|css|...)$确实能解决问题但会导致前端静态资源JS/CSS/字体等失去缓存能力严重拖慢页面加载速度不推荐。四、技术点解析Nginx Location 匹配优先级核心Nginx 的 location 匹配顺序由高到低优先级匹配类型示例1精确匹配location /path2^~修饰的字符串匹配location ^~ /uploads/3正则表达式匹配按顺序location ~ \.jpg$或location ~* \.(jpg|png)$4普通字符串匹配最长优先location /api/或location /关键点正则匹配~的优先级高于普通字符串匹配无修饰符。所以/uploads/test.jpg会因为匹配到.jpg的正则而忽略location /uploads/。五、完整 Nginx 配置生产环境推荐nginxserver { listen 8888; server_name your-domain.com; root /usr/share/nginx/html; index index.html; # Vue/React 路由SPA location / { try_files $uri $uri/ /index.html; } # API反向代理 location /api/ { proxy_pass http://backend:8000; 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; client_max_body_size 50m; } # 用户上传文件代理^~ 强制优先 location ^~ /uploads/ { proxy_pass http://backend:8000; proxy_http_version 1.1; 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; proxy_buffering off; # 大文件流式传输 client_max_body_size 50m; # 上传文件大小限制 } # 前端静态资源缓存正则匹配仅作用于前端自身文件 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { expires 30d; add_header Cache-Control public, immutable; # 注意由于 ^~ /uploads/ 的存在这里不会劫持 /uploads/ 下的请求 } # Gzip 压缩 gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml; gzip_min_length 1000; }六、经验总结Nginx Location匹配顺序是“看不见的坑”不要想当然地认为/uploads/和\.jpg$会按书写顺序生效。必须熟悉匹配优先级规则。^~是解决“前缀 vs 正则”冲突的首选当你想让某个路径优先于所有正则匹配时^~是最干净、最安全的方案。保持“前端静态资源”和“后端上传文件”分离前端的 JS/CSS 适合长期缓存后端的用户头像/文件需要实时访问两者在Nginx中应分别配置各司其职。Docker环境下的排查技巧用docker exec进入容器直接看文件是否存在用docker run --rm --network container:xxx临时工具容器测试端口连通性用docker logs查看Nginx访问日志和错误日志七、彩蛋两个独立项目共用uploads目录会冲突吗如果你的服务器上部署了两个独立的ASP.NET Core项目且都通过Nginx代理但端口不同例如8888和1314那么完全不会有冲突。因为Nginx会先根据listen端口分发请求不同端口的server块相互隔离即使两个块里都有location ^~ /uploads/也各自代理到不同的后端容器互不干扰。八、相关命令速查表用途命令查看容器内文件docker exec -it 容器名 ls -la /app/wwwroot/uploads容器间网络连通性测试docker exec -it nginx容器 ping backend容器名在Nginx容器内测试后端接口docker exec nginx容器 curl -I http://backend:8000/uploads/test.jpg查看Nginx访问日志docker logs nginx容器名 --tail 50重载Nginx配置docker exec nginx容器名 nginx -s reload测试Nginx配置文件语法docker exec nginx容器名 nginx -t希望这篇记录能帮助到遇到同样问题的开发者。技术分享共同进步如果对你有帮助欢迎点赞、收藏、转发也可以在评论区交流你的排坑经历
