在Nginx中从Angular调用API不会解析Docker服务名称 [英] Call to API from Angular in Nginx does not resolve Docker service name

问题描述

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

I have an Angular app running in a NginX Docker container.

Angular 应用程序可以使用 localhost 作为服务器.

The Angular app can make a REST call to another container (Spring Boot API Docker) using localhost as server.

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

但是，当改用 Docker 服务名称时， REST 调用失败.

But REST call fails when using Docker service name instead.

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

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

*using 8080 port this time as trying to resolve docker service name

UI控制台中的错误:

Error in UI console:

net :: ERR_NAME_NOT_RESOLVED

使用默认的 NginX 图像和默认的 nginx.conf .

Using default NginXimage with default 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 网络上运行.

Containers all run on same Docker network.

networks:
  default:
    external:
      name: files-net

修改了 nginx.conf 以包括解析器，但没有乐趣.

Modified nginx.conf to include resolver but no joy.

解析器127.0.0.11 valid = 30s;

任何想法为什么我不能使用 Docker 服务名进行 REST 调用?

Any idea why I cannot make a REST call using Docker service name ?

编辑

EDIT

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

It seems Angular code running in browser is not able to resolve service names.

由Docker组成的服务无法按服务名称进行通信

推荐答案

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

I think this is the very common misunderstanding when running application inside docker container, especially for browser apps :).

如果您的应用程序和api在同一网络中运行并正在访问，则只能在应用程序中使用服务名来调用API.在您的情况下，Angular应用程序和后端在同一网络中运行，但是Angular应用程序是从主机而不是容器内部访问的.

You can only call API using service name in your app if your app and the api are running and being accessed within same network. In your case, the Angular app and your backend are running in same network,but the Angular app is being accessed from host machine, not inside container.

详细信息:在当前上下文中，当您从浏览器访问Angular应用时，您将在主机，主机网络，而不是容器内部使用Angular应用，通过将端口从容器映射到主机来暴露Angular应用机器.因此，当您发出API请求时，该请求将来自主机->docker容器，那时，主机将尝试在当前上下文中解析服务名称，当然从主机中没有 service name

Detail: In current context, when you access your Angular app from browser, you're using the Angular app in host machine, in host network, not inside container anymore, your Angular app is exposed by mapping port from container to host machine. Therefore when you make an API request, it'll coming from host machine -> docker container, at that time, host machine will try to resolve service name in current context and of course from host machine there's no service name

因此，对于所有浏览器应用程序，即使您使用docker容器进行部署，但是在调用API时，大多数情况下，您将必须使用 localhost:< mapped_port> 或其他可托管的东西机器不在Docker容器内(例如:域名).

Therefore, for all browser apps, even you deploy it using docker container, but when you call API, mostly you'll have to use localhost:<mapped_port> or something that resolve to host machine not inside docker container (Eg: domain name).

这篇关于在Nginx中从Angular调用API不会解析Docker服务名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！