在 Nginx 中从 Angular 调用 API 无法解析 Docker 服务名称

Question

我有一个 Angular 应用程序在 NginX Docker 容器中运行。

Angular 应用可以使用localhost 作为服务器对另一个容器（Spring Boot API Docker）进行REST 调用。

server: string = 'localhost';
return this.httpClient.post<MyClass[]>('http://' + this.server + ':6060/files-data/list-files', request);

但是当使用Docker 服务名称时，REST 调用失败。

server: string = 'files-service';
return this.httpClient.post<MyClass[]>('http://' + this.server + ':8080/files-data/list-files', request);

*这次使用 8080 端口尝试解析 docker 服务名称

UI 控制台出错：

net::ERR_NAME_NOT_RESOLVED

使用默认NginXimage 和默认nginx.conf。

  nginx-files-ui:
    image: nginx:latest
    container_name: nginx-files-ui
    volumes:
      - ./files-ui/dist/html:/usr/share/nginx/html
    ports:
      - 99:80

容器都在同一个Docker 网络上运行。

networks:
  default:
    external:
      name: files-net

修改了nginx.conf 以包含解析器，但没有任何乐趣。

resolver 127.0.0.11 valid=30s;

知道为什么我不能使用Docker 服务名称拨打REST 吗？

编辑

在浏览器中运行的 Angular 代码似乎无法解析服务名称。

Docker composed services can't communicate by service name

Answer 1

我认为这是在 docker 容器中运行应用程序时非常常见的误解，尤其是对于浏览器应用程序:)。

如果您的应用和 api 在同一网络中运行并被访问，您只能在您的应用中使用 service name 调用 API。在您的情况下，Angular 应用程序和您的后端在同一网络中运行，但 Angular 应用程序是从主机访问的，而不是在容器内。

详细信息：在当前上下文中，当您从浏览器访问 Angular 应用程序时，您是在主机、主机网络中使用 Angular 应用程序，而不是在容器内，您的 Angular 应用程序通过从容器映射到主机的端口来公开机器。因此，当您发出 API 请求时，它将来自主机 -> docker 容器，届时，主机将尝试在当前上下文中解析 service name，当然从主机那里没有 service name

因此，对于所有浏览器应用程序，即使您使用 docker 容器部署它，但当您调用 API 时，大多数情况下您必须使用 localhost:<mapped_port> 或解析主机不在 docker 容器内的东西（例如：域名)。