如何通过Docker将Next.js的out目录部署到Nginx？挂载异常排查

核心问题 #

1. Next.js构建产物未同步到卷中：你的Next.js服务挂载了staticbuild:/out，但如果Dockerfile未将构建生成的out目录复制到容器的/out路径，卷内就不会有静态文件。
2. Nginx默认页面抢占卷内容：Nginx镜像的/usr/share/nginx/html目录默认包含欢迎页，首次启动时Docker会把该目录内容复制到空的staticbuild卷中，之后Next.js写入的内容会被默认页覆盖（或优先级低于默认页）。

步骤1：修正Next.js的Dockerfile #

确保构建后的out目录被复制到容器的/out路径（与卷挂载路径对应）：

# 构建阶段
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build  # 执行Next.js构建，生成out目录

# 最终镜像（仅用于提供out目录，可简化）
FROM alpine:latest
# 将构建好的out目录复制到容器的/out路径
COPY --from=builder /app/out /out

步骤2：清空Nginx默认页面 #

修改Nginx的Dockerfile，删除默认的欢迎页，避免卷被初始化默认内容：

FROM nginx:alpine
# 删除默认的index.html等文件
RUN rm -rf /usr/share/nginx/html/*
# 复制你的nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

步骤3：调整启动顺序（可选但推荐） #

让Nginx在Next.js完成构建并写入卷后再启动，添加健康检查确保Next.js容器已准备好：

version: "3"

services:
  nextjs:
    build:
      context: ./client
      dockerfile: Dockerfile
    volumes:
      - staticbuild:/out
    # 健康检查：确认/out目录存在index.html
    healthcheck:
      test: ["CMD", "ls", "/out/index.html"]
      interval: 5s
      timeout: 5s
      retries: 5

  nestjs:
    build:
      context: ./back
      dockerfile: Dockerfile
    env_file:
      - ./back/.env

  nginx-proxy:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8080:80"
    volumes:
      - staticbuild:/usr/share/nginx/html
    depends_on:
      nextjs:
        condition: service_healthy

volumes:
  staticbuild:

验证操作 #

1. 清理旧卷和容器：

docker-compose down -v

2. 重新启动服务：

docker-compose up --build

3. 查看卷内容确认静态文件已同步：

docker volume inspect your_projectname_staticbuild
# 替换路径后查看内容
ls -l /var/lib/docker/volumes/your_projectname_staticbuild/_data

调整完成后，Nginx即可正确加载卷中Next.js构建的静态文件。

内容的提问来源于stack exchange，提问作者K H