Nginx 反向代理映射到多个前端和后端

Question

我有一个 Angular 前端和一个 node.js 后端，我想为不同国家的客户部署它们。我们需要为每个国家/地区提供一个前端和后端容器。所以想法是 nginx 应该根据路径重定向到 docker compose 环境中的正确容器：

example.com/us/frontend -> 我们的前端容器

example.com/us/backend -> 我们的后端容器

example.com/fr/frontend -> fr 前端容器

example.com/fr/backend -> fr 后端容器 ...

到目前为止我已经实现了：

docker-compose.yml

version: "3"
services:
  test-proxy:
    container_name: test-proxy
    image: nginx:latest
    depends_on:
      - example-frontend-us # References the service name.
    volumes:
      - ./config/nginx.conf:/etc/nginx/nginx.conf
      - ./content:/usr/share/nginx/html
    ports:
      - 80:80 # Publishs only port 80 outside of docker compose context.

  example-frontend-us:
    container_name: example-frontend-us
    image: angular-frontend
    ports:
      - 8081:80

nginx.conf:

 http {
    server {

        listen 80;
        server_name localhost 127.0.0.1;

        location = / {
            root /usr/share/nginx/html;
            try_files $uri /index.html;
        }
        

        location /us/frontend {
            proxy_pass          http:/example-frontend-us:8081;
            proxy_set_header    X-Forwarded-For $remote_addr;
        }
    }
}

如果我在 localhost/us/frontend 上打开浏览器，我会收到 502 Bad Gateway 响应

如果我在 localhost:8081 上打开浏览器，前端正在工作。

这里有什么问题？如何实现 nginx 路由到正确的容器？

Answer 1

在 docker compose 创建的虚拟网络中，您使用内部端口号。所以

proxy_pass          http:/example-frontend-us:8081;

应该是

proxy_pass          http://example-frontend-us:80;

（您还缺少 http:// 中的正斜杠）

最后，你不需要在 example-frontend-us 上映射端口，除非你希望能够直接访问它并绕过 nginx。