时间戳

首页 > 解决方案 > 在 Nginx 中从 Angular 调用 API 无法解析 Docker 服务名称

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

问题描述

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

该Angular应用程序可以使用作为服务器REST调用另一个容器 ( Spring BootAPI Docker) 。localhost

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

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

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

使用NginX带有默认值的默认图像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;

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

编辑

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

Docker 组合服务无法通过服务名称进行通信

标签： angularnginxdocker-compose

解决方案

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

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

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

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

推荐阅读