如何正確配置 Nginx 反向代理？

Question

我有一個 create-react-app 應用程序，使用以下容器化 Dockerfile 。

FROM node:10-alpine as build
WORKDIR /app
COPY package.json .
RUN npm install --production
COPY . .
RUN npm run build

FROM nginx:1.21.5-alpine
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Nginx 的 conf.d

upstream api {
  server api:5000;
}

server {
  listen 80;

  location / {
    root /usr/share/nginx/html;
  }
}

server {
  listen 5000;

  location / {
    proxy_pass http://api;
  }

}

我有一個 expressjs 應用程序，使用以下容器化 Dockerfile 。

FROM node:10-alpine
WORKDIR /app
COPY package.json /app
RUN npm install --production
COPY . /app
CMD node index.js
EXPOSE 5000

我為每個應用程序構建 docker 圖像，所以我必須 docker 圖像：

1. NginxImage（ReactJS 應用程序）
2. NodeJsImage

我嘗試使用 docker 和下面的docker-compose運行這兩個圖像：

version: "3.4"
services:
  app:
    image: NginxImage
    hostname: app
    ports:
      - "3001:80"
    networks:
      - local_deploy
  api:
    image: NodeJsImage
    hostname: api
    ports:
      - "5001:5000"
    networks:
      - local_deploy
networks:
  local_deploy:
    driver: bridge

但是當我嘗試在瀏覽器中打開 reactjs 應用程序時，以及當 reactjs 應用程序調用http://api:5000時出現錯誤ERROL_NAME

我嘗試訪問容器內的 api

docker exec -it app /bin/sh

我可以得到 api 的響應

# curl api:5000

我的反向代理是否配置不正確？

Answer 1

感謝@David、 @Beppe和@Yusuf的提示。 就我而言，我只是將 API 端點更改為它自己的應用程序地址。

應用程序運行時的示例

localhost:3001

然后我將 api 端點設置為

localhost:3001/api

在 nginx 配置中，我在服務器塊中添加了另一個具有重寫條件的位置

upstream api {
  server api:5000;
}

server {
  listen 80;

  location / {
    root /usr/share/nginx/html;
  }

  location /api {
    rewrite /api/(.*) /$1 break;
    proxy_pass http://api
  }
}