使用docker-compose+Nginx部署React.js与Nest.js时仅显示Nginx欢迎页求助

问题根因 #

你当前配置的核心错误有两个：

• 外层负责监听3000端口的Nginx容器仅挂载了自定义配置文件，未持有前端构建后的静态资源，其/usr/share/nginx/html目录下只有Nginx官方默认的欢迎页文件，因此访问根路径时显示默认页。前端构建产物全部存放在frontend容器内部的文件系统中，和外层Nginx容器完全不互通。
• frontend容器的Dockerfile内置了冗余的Nginx服务，没有实际作用，白白占用资源。

修复步骤 #

1. 修改前端Dockerfile #

移除冗余的Nginx层，仅保留构建逻辑，将产物存放在镜像内指定目录即可：

FROM node:14.18.1-alpine3.14 as build

WORKDIR /app/frontend
COPY package.json /app/frontend/
COPY yarn.lock /app/frontend/

RUN yarn install --frozen-lockfile

COPY . /app/frontend

RUN yarn run build

2. 修改docker-compose.yaml配置 #

新增共享卷存放前端构建产物，分别挂载到frontend服务的构建输出目录和Nginx服务的静态资源目录：

version: "3.6"

services:
  database:
    # 原有配置保持不变
    image: postgres:13.1-alpine
    env_file:
      - ./database/.env
    volumes:
      - "db-data:/var/lib/postgresql/data"
    networks:
      - challenge
    ports:
      - "5432:5432"

  backend:
    # 原有配置保持不变
    build:
      context: $PWD/../../backend
      dockerfile: $PWD/backend/Dockerfile
    volumes:
      - ./backend/.env:/app/.env
      - ../../backend/src:/app/src
      - storage:/app/storage
    ports:
      - 3000
    networks:
      - challenge
    depends_on:
      - database
    env_file:
      - ./backend/.env
    environment:
      - FORCE_COLOR=1

  frontend:
    build:
      context: $PWD/../../web
      dockerfile: $PWD/frontend/Dockerfile
    # 移除无用的端口暴露
    networks:
      - challenge
    depends_on:
      - backend
    env_file:
      - ./frontend/.env
    volumes:
      - ../../web/src:/app/frontend/src
      # 新增共享卷挂载构建产物目录
      - frontend-build:/app/frontend/build

  nginx:
    image: nginx
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
      # 新增挂载前端构建产物到Nginx静态资源目录
      - frontend-build:/usr/share/nginx/html
    ports:
      - 3000:80
    depends_on:
      - backend
      - frontend
    networks:
      - challenge

volumes:
  db-data:
  storage:
  # 新增前端构建产物共享卷
  frontend-build:

networks:
  challenge:

3. 重启服务清除缓存 #

执行以下命令清除旧容器、旧卷后重新构建启动：

docker-compose down -v
docker-compose up --build

排查补充 #

如果修改后仍有问题，可进入Nginx容器查看配置是否正常加载：

# 查看Nginx加载的完整配置
docker exec <你的Nginx容器名> nginx -T

确认配置中location /的root路径是否正确指向静态资源目录。

内容的提问来源于stack exchange，提问作者Greg Sithole