Docker＆Angular-无法从基于角度的前端容器连接到后端容器

如何解决Docker＆Angular-无法从基于角度的前端容器连接到后端容器

我有两个容器：基于JavaEE的后端和基于Angular的前端。前端将发出一些Http请求以检索后端中的数据。这是我的docker-compose文件的示例：

version: '3'
services:
    backend:
        image: backend
        container_name: backend
        build: ./backend
        ports:
            - "8080:8080"
    frontend:
        image: frontend
        container_name: frontend
        build: ./frontend
        ports:
            - "8085:80"
        environment:
            - REST_API_URL=http://backend:8080/vehicles

环境REST_API_URL将与HttpClient一起在前端使用，以向后端发送请求以获取数据。我想在这里使用后端容器的名称，但是它没有用，它无法连接到后端，而如果我将其更改为http://localhost:8080/vehicles则可以使用。但是，如果我进入前端容器并向地址http://backend:8080/vehicles发出curl请求，那么我得到了数据，这让我感到困惑。

我的问题是，为什么角度HttpClient的呼叫this.http.get<Vehicle[]>(this.REST_API_URL)在我的情况下只能服务http://localhost:8080/vehicles，而不能服务http://backend:8080/vehicles ???。

这里也是我前端的 Dockerfile ：

FROM Nginx:1.17.1-alpine

RUN apk add --update curl
copY Nginx.conf /etc/Nginx/Nginx.conf
RUN rm -rf /usr/share/Nginx/html/*
copY /dist/frontend /usr/share/Nginx/html
copY ./entryPoint.sh /
RUN chmod +x entryPoint.sh
ENTRYPOINT ["sh","/entryPoint.sh"]
CMD ["Nginx","-g","daemon off;"]

和 Nginx.conf ：

events{}
http {    
    include /etc/Nginx/mime.types;    
    server {        
        listen 80;
            server_name localhost;
            root /usr/share/Nginx/html;
            index index.html;        
        location / {
                    try_files $uri $uri/ /index.html;
            }
        }
}

解决方法

如果您想访问http://backend:8080

，则似乎需要添加一个docker网络。

version: '3'
services:
    backend:
        image: backend
        container_name: backend
        build: ./backend
        ports:
            - "8080:8080"
        networks:
            - mynetwork
    frontend:
        image: frontend
        container_name: frontend
        build: ./frontend
        ports:
            - "8085:80"
        environment:
            - REST_API_URL=http://backend:8080/vehicles
        networks:
            - mynetwork

networks:
    mynetwork:

如果要使用http://localhost:80访问，则必须为两个docker使用相同的lo接口：

version: '3'
services:
    backend:
        image: backend
        container_name: backend
        build: ./backend
        ports:
            - "8080:8080"
        network_mode: host

    frontend:
        image: frontend
        container_name: frontend
        build: ./frontend
        ports:
            - "8085:80"
        environment:
            - REST_API_URL=http://backend:8080/vehicles
        network_mode: host

第三种可能性是在前端使用http://host.docker.internal:8080访问后端。请首先确认主机中未使用8080。如果不使用docker网络，则建议例如映射8086：8080（因此，请使用host.docker.internal：8086或其他名称）。

,

如果从本地计算机连接，则可以使用localhost，但如果从docker连接，则必须使用容器名称。 然后，您必须使用localhost连接到angulsr werver，但是angular api调用应该是backend：8080

,

您可以使用links将容器链接在一起。

version: '3'
services:
    backend:
        image: backend
        container_name: backend
        build: ./backend
        ports:
            - "8080:8080"
    frontend:
        image: frontend
        container_name: frontend
        build: ./frontend
        ports:
            - "8085:80"
        links: 
            - "backend"
        environment:
            - REST_API_URL=http://backend:8080/vehicles

,

经过一些尝试，我确实找到了解决该问题的方法。我必须配置我的nginx服务器以允许使用其服务名称的后端调用通过。因此，nginx配置应如下所示：

go tool pprof heap.out

Showing nodes accounting for 2052.21kB,100% of 2052.21kB total
Showing top 10 nodes out of 37
flat flat% sum% cum cum%
1028kB 50.09% 50.09% 1028kB 50.09% bufio.NewReaderSize (inline)
512.19kB 24.96% 75.05% 512.19kB 24.96% runtime.malg
512.02kB 24.95% 100% 512.02kB 24.95% github.com/go-redis/redis/v8/internal/proto.(*Reader).readStringReply
0 0% 100% 1028kB 50.09% bufio.NewReader (inline)
0 0% 100% 1540.02kB 75.04% github.com/go-redis/redis/v8.(*Client).Process
0 0% 100% 512.02kB 24.95% github.com/go-redis/redis/v8.(*StringSliceCmd).readReply
0 0% 100% 512.02kB 24.95% github.com/go-redis/redis/v8.(*StringSliceCmd).readReply.func1
0 0% 100% 1028kB 50.09% github.com/go-redis/redis/v8.(*baseClient)._getConn
0 0% 100% 1540.02kB 75.04% github.com/go-redis/redis/v8.(*baseClient)._process
0 0% 100% 1540.02kB 75.04% github.com/go-redis/redis/v8.(*baseClient)._process.func1

这里是指所有带有events{} http { include /etc/nginx/mime.types; server { listen 80; root /usr/share/nginx/html; index index.html; location / { try_files $uri $uri/ /index.html; } location /api/ { proxy_pass ${REST_API_URL}; } } } 路径的调用都将被转发到后端。 在角度代码中，我只需要调用路径而不是整个后端URL，例如：/api