Docker Compose部署MEAN栈应用时Nginx默认页面替代Angular应用的问题求助

大家好，我正在把自己的MEAN栈应用容器化，准备部署到Azure App Services。我拆分了三个服务：Angular客户端、Node.js服务端，还有负责反向代理的Nginx，我的compose.yaml配置如下：

services:
  nginx:
    build:
      context: ./proxy
      dockerfile: Dockerfile # Custom Nginx Dockerfile
    container_name: proxy
    image: jeroenp98/waresy-proxy:latest
    ports:
      - "80:80" # Expose Nginx on port 80 to the public
    depends_on:
      - client # Ensure frontend and backend are running before Nginx starts
      - server
    networks:
      - app-network
  server:
    build: .
    container_name: waresy-server
    image: jeroenp98/waresy-server:latest
    environment:
      - JWT_SECRET=${JWT_SECRET}
      - MONGODB_URI=${MONGODB_URI}
    expose:
      - "3000:3000"
    networks:
      - app-network
  client:
    build:
      context: ./client
      dockerfile: Dockerfile
    container_name: waresy-client
    image: jeroenp98/waresy-client:latest
    expose:
      - "80:80"
    depends_on:
      - server
    networks:
      - app-network
networks:
  app-network:
    driver: bridge

现在遇到一个头疼的问题：运行docker compose up后，访问localhost:80看到的是Nginx默认欢迎页面，而不是我的Angular应用。不过API是正常工作的，我能正常向服务端发送请求。我排查了很久，完全搞不懂为什么容器会加载这个默认的index.html，而不是npm run build生成的Angular页面。

我的Nginx反向代理配置（nginx.conf）如下：

server {
    listen 80;
    listen [::]:80;

    # Proxy requests to the frontend
    location / {
        proxy_pass http://client:80; # Forwarding to the frontend's internal port 80
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Proxy requests to the backend API
    location /api/ {
        proxy_pass http://server:3000; # Forwarding to backend's internal port 3000
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

客户端的Dockerfile（client/Dockerfile）：

# client/Dockerfile
FROM node:22.12.0-alpine AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install -g @angular/cli
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
# Copy built Angular files
COPY --from=builder /app/dist/client/browser /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

代理Nginx的Dockerfile（proxy/Dockerfile）：

# Use the official Nginx image
FROM nginx:alpine
# Remove the default Nginx config
RUN rm /etc/nginx/conf.d/default.conf
# Copy Nginx config to the container
COPY nginx.conf /etc/nginx/conf.d/
# Expose port 80 to the outside world
EXPOSE 80
# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

我已经做了这些排查：

• 检查过客户端容器内的文件，没找到Angular生成的index.html
• 确认了angular.json里的outputPath设置为"dist/client"
• 试过把拷贝路径改成/app/dist/client和/app/dist/client/browser，但都没解决问题

有没有大佬能帮我定位下问题出在哪？万分感谢！

内容来源于stack exchange