Docker Compose部署Nuxt+Nest开发环境 前端卷异常致热更新、登录态故障

两个问题本质都是Docker卷挂载配置和Nuxt运行机制不匹配导致的：

• 热更新失效：直接将本地前端全目录挂载到容器/app路径时，会覆盖容器内部安装的node_modules依赖，且Windows/macOS下Docker跨文件系统默认不会传递文件修改事件，Nuxt依赖的文件监听工具无法捕获代码变更。
• 刷新丢失登录态：全目录挂载同样会覆盖容器内Nuxt运行时生成的.nuxt构建缓存目录，服务端渲染时无法读取会话相关的上下文缓存，导致鉴权状态丢失。后端Nest运行时不需要生成类似的本地构建缓存目录，且默认监听机制对挂载场景兼容更好，所以没有出现同类问题。

1. 调整docker-compose.yml #

新增监听相关环境变量，通过匿名卷屏蔽容器内特殊目录的挂载覆盖：

services:
  frontend:
    build: ./eva-frontend
    depends_on:
      - backend
    ports:
      - 3000:3000
    environment:
      # 开启文件轮询监听，兼容Docker跨文件系统的事件传递
      - CHOKIDAR_USEPOLLING=true
      - WATCHPACK_POLLING=true
    volumes:
      - ./eva-frontend:/app
      # 以下两个目录使用容器内部文件，不被宿主机挂载覆盖
      - /app/node_modules
      - /app/.nuxt
  backend:
    build: ./eva-backend
    ports:
      - 3001:3001
    volumes:
      - ./eva-backend:/app
      # 同步给后端加依赖目录匿名卷，避免跨平台依赖冲突
      - /app/node_modules

2. 优化前端Dockerfile #

调整文件拷贝顺序，充分利用Docker构建缓存，减少重复构建时间：

FROM node:16.15.1-alpine
WORKDIR /app
# 优先拷贝依赖配置文件，依赖未变更时不会重新执行npm install
COPY package*.json ./
RUN npm install
# 再拷贝其余业务源码
COPY . .

EXPOSE 3000

ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3000

CMD ["npm", "run", "dev"]

配置修改完成后执行以下命令清除旧缓存并重启服务：

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

启动完成后即可验证：

• 修改前端任意源码文件，等待1-2秒可看到容器内前端服务输出重编译日志，页面自动触发热更新
• 完成登录操作后刷新页面，登录态正常保留，无需重复登录

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