在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 NginX
image 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容器内运行应用程序时非常普遍的误解,尤其是对于浏览器应用程序:).
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屋!