Docker Compose内Nginx容器被同网络外部容器访问返回404问题问询

问题成因 #

• Nginx服务块的server_name配置未匹配front-end服务名：用服务名front-end发起请求时，Nginx无法匹配到对应前端服务的server块，会 fallback 到默认server块，若默认块的根目录无对应文件就会返回404。
• Nginx静态资源根路径配置错误：server块的root/alias指向的目录不存在，或者没有包含前端打包后的index.html等静态文件。
• 单页应用(SPA)路由规则缺失：如果你的前端是React/Vue等SPA项目，Nginx没有配置正确的try_files规则来重写路由到入口文件，直接访问路径时会找不到对应资源。
• 前端服务部署在子路径：前端实际是挂载在Nginx的子路径下（比如/app），直接访问根路径/就会返回404。

排查与解决方案 #

1. 先验证Nginx本地服务是否正常
   进入front-end容器执行本地访问测试：

docker exec -it <你的front-end容器名> curl -v http://localhost:80

如果本地访问也返回404，说明是Nginx本身配置问题，和跨容器访问无关。如果本地访问正常，说明是服务名访问的匹配规则问题。
2. 检查Nginx的server配置
查看front-end容器内的Nginx配置（通常路径为/etc/nginx/conf.d/default.conf）：

• 确认server_name配置包含front-end，或者直接删除server_name字段让该server块匹配所有请求：

  server {
      listen 80;
      server_name localhost front-end; # 增加front-end匹配
      # 其余配置...
  }
  

• 确认root指向的路径正确，路径下存在前端打包的静态文件，可以进入容器执行ls <root配置的路径>验证。

3. 补充SPA路由规则
   如果是SPA项目，在server块中增加重写规则：

location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri $uri/ /index.html; # 所有路由重写到入口文件
}

4. 验证前端部署路径
   如果前端部署在子路径下，需要将Cypress的baseUrl修改为对应路径，比如http://front-end:80/app，同时保证Nginx的子路径配置正确。
5. 跨容器访问验证
   进入cypress测试容器，执行以下命令验证访问：

# 直接用服务名访问
curl -v http://front-end:80
# 加Host头模拟域名访问，验证是否是server_name匹配问题
curl -v -H "Host: <你平时正常访问前端的域名>" http://front-end:80

如果加Host头后访问正常，就可以确认是server_name配置缺失导致的问题。

内容的提问来源于stack exchange，提问作者Fernando