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

我有一個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 Application)
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我得到錯誤ERR_NAME_NOT_RESOLVED

我嘗試在容器中訪問api

docker exec -it app /bin/sh

我可以從api得到響應

# curl api:5000

我的reverse-proxy是否未正確配置？