本地Nginx代理Docker化应用遇404问题排查

核心问题排查 #

你遇到的404和跨域问题，主要源于Nginx配置的几处错误，以及React应用未适配反向代理的路径场景。以下是具体修复步骤：

1. 修正Nginx上游服务端口配置 #

你的Docker Compose中json-server映射的是4000端口（宿主机4000→容器80），但Nginx的json-server upstream却指向了80端口，导致代理请求失败。同时，同一主机下使用localhost替代server-ip-address更可靠：

修改/etc/nginx/sites-available/bimawelcome中的upstream部分：

upstream react-client {
    server localhost:3000;
}

upstream node-server {
    server localhost:8000;
}
upstream json-server {
    server localhost:4000;  # 修正为Docker映射的4000端口
}
upstream fastapi-server {
    server localhost:5000;
}

2. 调整Nginx Server块的匹配规则 #

当前server_name设置为bimawelcome.com，但你实际访问的是服务器IP，导致Nginx不会匹配这个server块。修改server_name为你的服务器IP，或用通配符匹配所有请求：

server {
   listen 80;
   server_name your-server-ip _;  # 替换your-server-ip为实际IP，_匹配所有未匹配的请求

   # 其余location配置保留，后续调整react的location
}

3. 修复React前端的反向代理路径问题 #

直接访问3000端口正常，但通过/bimawelcome/访问404，是因为React应用打包时默认使用根路径，静态资源会请求/static/xxx而非/bimawelcome/static/xxx。有两种修复方式：

方式一：修改Nginx的React代理配置

调整location /bimawelcome/的配置，确保路径正确传递：

location  /bimawelcome/ {
    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_pass http://react-client/;  # 末尾加/，确保路径正确拼接
}

方式二：重新打包React应用，设置基础路径

在React项目中，打包时指定PUBLIC_URL：

# npm
PUBLIC_URL=/bimawelcome/ npm run build

# yarn
PUBLIC_URL=/bimawelcome/ yarn build

重新构建Docker镜像myusername/bimawelcome-front-end，替换原有镜像后重启服务。

4. 自动解决跨域问题 #

通过Nginx反向代理后，前端和所有后端服务都在同一域名下，前端请求后端时使用相对路径即可避免跨域。例如：

• 请求Node后端：/node-server/api/xxx（而非http://localhost:8000/api/xxx）
• 请求FastAPI：/fastapi-server/xxx

5. 验证配置并重启Nginx #

修改完成后执行以下命令：

sudo nginx -t
sudo systemctl restart nginx

总结 #

完成以上修改后，访问http://your-server-ip/bimawelcome/即可正常加载前端页面，同时前端通过相对路径请求后端服务不会出现跨域问题。

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