Docker容器配置卷后remix dev无法检测文件变更问题

问题现象 #

• 挂载./web:/code卷时，remix dev完全检测不到任何文件变更，不管是本地修改还是VS Code附加容器修改；移除卷配置后恢复正常。
• 挂载./web/app:/code/app时，仅能检测app根目录的文件（如root.tsx、entry.client.tsx），无法检测子目录（routes、utils）内的文件变更。
• 使用nodemon时，不加--watch-legacy参数有同样问题，加上后恢复正常。

原因分析 #

这是跨平台Docker挂载的常见问题：容器内的Node.js依赖inotify机制监听文件变更，但当主机是Windows（NTFS）或macOS（APFS）时，这些文件系统不支持Linux容器内的inotify递归监听，导致子目录的变更无法被触发。而nodemon的--watch-legacy参数会切换为轮询模式，定期扫描文件系统，绕过了inotify的限制。

解决方案 #

方案1：修改Remix配置，启用轮询监听 #

在remix.config.js中添加watchOptions配置，强制Remix使用轮询方式检测文件变更：

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
  appDirectory: "app",
  assetsBuildDirectory: "public/build",
  serverBuildPath: "build/index.js",
  publicPath: "/build/",
  tailwind: true,
  serverModuleFormat: "cjs",
  future: {
    v2_errorBoundary: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
  },
  // 添加以下配置
  watchOptions: {
    usePolling: true,
    interval: 1000 // 轮询间隔（毫秒），可根据需求调整
  }
};

方案2：用nodemon替代默认的remix dev启动 #

1. 在项目的package.json中添加nodemon启动脚本：

{
  "scripts": {
    "dev": "nodemon --watch-legacy --exec \"remix dev\""
  }
}

2. 修改Dockerfile的CMD命令，使用npm脚本启动：

FROM node:20.1.0

WORKDIR /code

COPY package*.json .
RUN npm install

COPY . .

EXPOSE 3000

CMD npx prisma generate && npm run dev

方案3：精细化挂载需要监听的目录（适合简单结构） #

如果不想全局启用轮询，可以只挂载需要实时监听的子目录，避免覆盖整个/code目录：

services:
  web:
    # 原有配置...
    volumes:
      - ./web/app/routes:/code/app/routes
      - ./web/app/utils:/code/app/utils
      - ./web/app/root.tsx:/code/app/root.tsx
      - ./web/app/entry.client.tsx:/code/app/entry.client.tsx
      - ./web/app/entry.server.tsx:/code/app/entry.server.tsx
      # 保留容器内的依赖和构建目录
      - /code/node_modules/
      - /code/build/
      - /code/public/build/

这种方式需要手动维护挂载的文件/目录，适合项目结构变动不大的场景。

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