Nginx for Angular没有达到后端api

Question

我正在使用nginx来反向链接到后端服务器的代理URL。

这是我的角docker文件：

FROM node as node

# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

COPY package.json /usr/src/app/package.json
RUN npm install
COPY . /usr/src/app
ARG env=prod
RUN npm run build -- --prod

FROM nginx
COPY --from=node /usr/src/app/dist/ /usr/share/nginx/html
COPY nginx-custom.conf /etc/nginx/conf.d/default.conf

我的Nginx配置

server {
  listen 80;
  server_name  localhost;
  root /usr/share/nginx/html/sampleangularapp;

   location / {
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }

  location /api/products {
    proxy_pass http://backend:80;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
  }


}

Docker Compose：

version: '3'
services:
  backend:
    image: backend:v2
    container_name: backend
    build:
      context: BackEndAPIs
    ports:
      - 9000:80
  frontend:
    image: frontend:v2
    container_name: frontend
    build:
      context: sampleangularapp
    ports:
      - 4200:80
    depends_on: 
      - backend

当我按下通过代码调用api /产品的按钮时：

   return this.http.get<string[]>('api/products');

这是我得到的：

我仔细检查了api并正常工作：

Answer 1

根本原因：当解析为容器ip时，后端网址“ http://localhost:8080”在有角应用容器中将不起作用。

您需要确保使用docker网络将两个容器链接到同一网络，并使用其服务名称或后端应用程序容器ip进行连接。

在这种情况下，您可以使用docker-compose。

此处的示例：

version: '3'
services:
  backend:
    image: backend
    ports:
      - "9000:9000"
  frontend:
    image: frontend
    ports:
      - "4200:80"
    depends_on:
      - backend

我也在这里回答了类似的问题： Nginx backend issue

GitHub Reference