Angular 的 Nginx 未命中后端 api

Question

我正在使用 nginx 反向代理 url 到后端服务器。

这是我的angulardocker文件:

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/products 的按钮时：

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

这是我得到的：

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

Answer 1

根本原因：后端 url“http://localhost:8080”将无法在 angular 应用程序容器内工作，因为它解析为容器 ip。

您需要确保使用 docker 网络将两个容器 link 连接到同一网络，并使用其服务名称或后端应用程序容器 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

Angular 的 Nginx 未命中后端 api

Nginx for Angular not hitting the back-end api

nginx

docker

nginx-location

angular