Docker容器内代码变更无法在浏览器同步显示的问题求助

问题背景 #

使用Docker 20.10.21部署React前端、Node后端及Mongo数据库，通过Docker Volume挂载后端源码后，容器内代码可同步更新（已进入容器shell确认），但浏览器无法获取最新变更，清缓存、无痕窗口均无效，必须重启容器才能生效。已配置nodemon实现热重载，但未起作用。

现有配置 #

package.json #

{
  "scripts": {
    "db:up": "migrate-mongo up",
    "start": "nodemon --ignore './tests' index.js",
    "test": "jest --watchAll --colors"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "mongoose": "^5.11.13"
  },
  "devDependencies": {
    "jest": "^26.6.3",
    "migrate-mongo": "^8.1.4",
    "nodemon": "^2.0.7",
    "supertest": "^6.1.3"
  }
}

Dockerfile #

FROM node:14.16.0-alpine3.13

RUN addgroup app && adduser -S -G app app
USER app

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . . 

EXPOSE 3001 

CMD ["npm", "start"]

docker-compose.yml #

---
services:
  web:
    build: ./frontend
    ports:
      - 3000:3000
  api:
    build: ./backend
    ports:
      - 3001:3001
    environment:
      DB_URL: mongodb://db/vidly
    volumes:
      - ./backend:/app
      - /app/node_modules
    command: ./docker-entrypoint.sh
  db:
    image: mongo:4.0-xenial
    ports:
      - 27017:27017
    volumes:
      - vidly:/data/db
volumes: 
  vidly:

排查与解决办法 #

1. 修复nodemon文件监听问题 #

Alpine镜像默认的inotify机制在容器挂载卷时可能无法正常触发文件变更检测，需强制nodemon使用轮询模式：

• 修改package.json的start命令，添加--legacy-watch参数：

  "start": "nodemon --legacy-watch --ignore './tests' index.js"
  

• 或在docker-compose.yml的api服务中添加环境变量，强制文件监听工具使用轮询：

  api:
    # ...其他配置
    environment:
      DB_URL: mongodb://db/vidly
      CHOKIDAR_USEPOLLING: true
  

2. 确认docker-entrypoint.sh执行逻辑 #

docker-compose中指定了command: ./docker-entrypoint.sh，需确保该脚本最终执行npm start（即启动nodemon），示例脚本内容：

#!/bin/sh
# 可添加前置操作如数据库迁移
npm run db:up
# 启动nodemon
npm start

若脚本未正确启动nodemon，会导致热重载失效。

3. 禁用Express缓存（若涉及静态文件） #

如果后端提供静态资源，Express默认会缓存文件，需在开发环境禁用：

// 禁用静态文件缓存
app.use(express.static('public', { etag: false, lastModified: false }));

// 全局禁用缓存
app.use((req, res, next) => {
  res.set('Cache-Control', 'no-store');
  next();
});

4. 验证接口返回是否更新 #

先通过curl直接调用后端接口，确认返回内容是否为最新版本，排除浏览器缓存或前端转发问题：

curl http://localhost:3001/your-api-path

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