Docker环境下Vite与ts-node-dev文件修改无热更新问题排查

问题背景 #

我用Docker部署前后端应用，执行make build即可启动，但修改前端或后端文件后无法自动加载变更，必须重新构建才行。我知道Vite和ts-node-dev支持热重载，但找不到问题所在。项目使用colima作为Docker守护进程，相关配置如下：

项目结构 #

project
├── Makefile
├── client
│   ├── Dockerfile
│   ├── package.json
│   ├── tsconfig.app.json
│   ├── tsconfig.json
│   ├── tsconfig.node.json
│   └── vite.config.ts
├── docker-compose.yml
├── package.json
└── server
    ├── Dockerfile
    ├── package.json
    └── tsconfig.json

配置文件详情 #

Makefile #

build:
    docker-compose up --build -d

up:
    docker-compose up -d

down:
    docker-compose down

logs:
    docker-compose logs -f

docker-compose.yml #

version: '3.8'
services:
  client:
    build:
      context: ./client
    working_dir: /app
    volumes:
      - ./client:/app
      - /app/node_modules
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development

  server:
    build:
      context: ./server
    working_dir: /app
    volumes:
      - ./server:/app
      - /app/node_modules
    ports:
      - "4000:4000"
    environment:
      - NODE_ENV=development

前端（client）配置 #

package.json

...
"scripts": {
    "dev": "vite --host",
...
}

Dockerfile

FROM node:lts-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

#RUN npm run build

EXPOSE 3000

#CMD [ "http-server", "dist" ]
CMD ["npm", "run", "dev"]

vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port : 3000
  },
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

后端（server）配置 #

package.json

...
"scripts": {
    "dev": "ts-node-dev src/app.ts",
...
}

Dockerfile

FROM node:lts-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

#RUN npm run build

EXPOSE 4000

#CMD ["node", "dist/app.js"]
CMD ["npm", "run", "dev"]

tsconfig.json

{
  "compilerOptions": {
    ...
    "outDir": "./dist",
    ...
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

问题排查与解决方案 #

前端Vite热重载失效修复 #

Vite在Docker容器中无法检测文件变更，核心是容器文件系统不支持宿主机的文件变更通知，或权限问题。

1. 修改vite.config.ts，开启轮询模式：

export default defineConfig({
  server: {
    port: 3000,
    watch: {
      usePolling: true, // 启用轮询适配Docker卷
      interval: 100 // 轮询间隔，可按需调整
    }
  },
  // 其他配置保持不变
})

2. 确保权限一致：在docker-compose.yml的client服务中添加user: "node"，让容器内用node用户读取挂载文件，避免权限不足。

后端ts-node-dev热重载失效修复 #

ts-node-dev失效多因未正确监听文件变更，或挂载卷适配问题。

1. 更新package.json的dev脚本，添加监听参数：

"scripts": {
  "dev": "ts-node-dev --respawn --transpile-only src/app.ts"
}

• --respawn：文件变更时自动重启服务
• --transpile-only：跳过类型检查，提升重载速度

2. 若仍无效，添加轮询参数适配Docker文件系统：

"scripts": {
  "dev": "ts-node-dev --respawn --transpile-only --poll src/app.ts"
}

其他注意事项 #

• 启动服务用make up而非make build：make build会重新构建镜像，make up直接用已挂载的卷启动容器，修改文件后无需重新构建。
• 检查colima文件共享：确认项目目录在colima的共享范围内，避免挂载卷失效。
• 查看容器日志：执行make logs，检查Vite或ts-node-dev的日志输出，排查是否有文件变更的提示或错误信息。

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