Docker化NodeJS+Angular项目Nginx未正确转发API到3000端口问题

• Nginx 运行在前端容器内部，配置中的 localhost 指向的是前端容器自身的环回地址，无法访问单独部署的 API 服务容器。Docker Compose 同网桥下的服务可直接通过服务名实现域名解析互通。
• 配置中两个 server 块的 server_name 与实际请求的 Host 值不匹配，所有访问 80 端口的请求默认命中第一个 server 块的根路径规则，直接返回 Angular 的 index.html 文件，永远不会触发 /api 前缀的代理规则。
• 已定义的 upstream 规则未被实际调用，属于冗余配置。

1. 更新 nginx.conf 配置 #

替换原配置为以下内容即可：

events{}

http {
    include /etc/nginx/mime.types;

    server {
      listen 80;
      server_name localhost;
      root /usr/share/nginx/html;
      index index.html;
      
      # 优先匹配/api前缀的API请求
      location /api/ {
          # 直接用Docker Compose中定义的API服务名作为访问域名
          proxy_pass http://mymusicads-api:3000/;
          proxy_redirect off;
          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;
      }

      # 剩余请求走Angular前端路由
      location / {
          try_files $uri $uri/ /index.html;
      }
    }
}

2. 重启服务生效 #

执行以下命令重新构建启动容器即可：

docker-compose down && docker-compose up --build

如果你的后端接口没有统一的 /api 前缀，要么调整后端路由统一添加 /api 前缀，要么调整 Nginx 的 location 匹配规则即可。

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