Angular 前端无法到达单独docker容器中的后端端口

我的前端应用程序位于NGINX之后，NGINX在docker容器中提供静态前端文件（以角度书写），通信端口为80:80

我的后端应用程序是NestJS，它在另一个docker容器中的localhost:3000端口上提供数据

用docker compose启动应用程序，但我的前端无法到达后端-获得502，糟糕的GW

该问题是由nginx或docker-compose.yml的设置引起的，还是同时由两者引起的

Dockerfile前端：

FROM node:latest AS builder

WORKDIR /app
COPY . .
ARG configuration=production
RUN npm install && npm run build.prod

FROM nginx:latest
LABEL version="1.0"

COPY nginx.conf /etc/nginx/nginx.conf

WORKDIR /usr/share/nginx/html
COPY --from=builder /app/dist/frontend/ .

Dockerfile后端：

FROM node:10 AS builder
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY . .
RUN npm run build
ADD . /app
EXPOSE 3000
CMD ["npm", "run", "start:prod"]

NGINX.conf

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    server {
        listen 80;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        location / {
            try_files $uri $uri/ /index.html;
        }

        location /api {
            proxy_pass http://127.0.0.1:3000;
        }

        location ~ \.html$ {
          add_header Cache-Control "private, no-cache, no-store, must-revalidate";
          add_header Expires "Sat, 01 Jan 2000 00:00:00 GMT";
          add_header Pragma no-cache;
        }
    }
}

docker-compose.yml

version: '3'

services:
  angular:
    image: "docker-frontend:v3"
    container_name: "frontend"
    ports:
      - "80:80"
    links:
      - restapi

  restapi:
    image: "docker-backend:v1"
    container_name: "backend"
    expose: 
      - 3000
    ports:
      - "3000:3000"

---

您不能在容器内使用localhost连接到另一个容器，要实现这一点，您可以使用容器的名称

比如说

http://localhost:3000/api/

会是

http://backend:3000/api/

---

你能在你的angular应用程序中显示带有url的http请求吗？另一个问题，你是否尝试从外部软件（如postman）调用你的端点？请求是到localhost/api/books[GET]，响应是502坏网关。我可以从主机（MacOS）访问localhost:3000/api/books，没有任何问题。我认为问题是，在nginx背后，我选择的是localhost:3000，但它与运行后端容器的主机不同。你是说localhost:3000/api/books吗？请复制粘贴此：const url=“”；const-httpOptions={headers:newhttpheaders（{'Content-Type'：'application/json'}）}；返回此.httpClient.get（url，httpOptions）；我会尝试一下，但我不想在angular（frontend）服务中指定端口，我只想使用相对路径，比如/api/books，然后在nginx上将每个请求重定向到/api/*到localhost:3000。明白吗，但我必须在nginx conf文件中使用它来进行代理传递？因为我不想在angular服务中指定端口。好的，所以我将位置改为backend:3000，而不是localhost，它可以工作。