如何正确配置 Nginx 反向代理？答案

【问题标题】：How to configure Nginx reverse proxy properly?如何正确配置 Nginx 反向代理？
【发布时间】：2022-01-14 15:56:11
【问题描述】：

我有一个 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 镜像：

NginxImage（ReactJS 应用程序）
NodeJsImage

我尝试使用以下 docker-compose 的 docker 运行这两个图像：

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 时出现错误 ERR_NAME_NOT_RESOLVED

我尝试访问容器内的 api

docker exec -it app /bin/sh

我可以从 api 获得响应

# curl api:5000

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

【问题讨论】：

React 应用程序在浏览器中运行，而不是在 Docker 中；它看不到 Docker 内部主机名 app 或 api。您可以在不同位置的同一 Nginx 端口上同时提供已编译的应用程序和后端代理，然后您的浏览器应用程序可以向 /api/wherever 发出请求，而无需知道主机名。
您应该通过代理使用 NGINX 端口80 访问应用程序（然后可以转发到 API 服务）

标签： reactjs docker nginx

【解决方案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
  }
}

【讨论】：