angular - 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撰写:

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

根本原因:后端URL“http://localhost:8080”在解析为容器ip时将无法在 Angular 应用程序容器中使用。

您需要确保使用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