Docker化SvelteKit应用热重载失效问题求助

你的SvelteKit Docker化后热重载失效，核心问题出在目录挂载路径不匹配，另外还有几个细节需要调整，具体如下：

1. 修复Docker Compose的卷映射路径 #

Dockerfile中设置的工作目录是/app，但你在docker-compose里把本地代码挂载到了/var/www/html，导致容器内Vite监视的/app目录和本地修改的文件所在的/var/www/html目录完全脱节，自然触发不了热重载。

修改docker-compose的volumes配置：

volumes:
  - ./:/app  # 本地代码挂载到容器的工作目录/app
  - /app/node_modules  # 避免本地挂载覆盖容器内安装的依赖

添加/app/node_modules匿名卷的原因是：如果本地目录没有node_modules，挂载后会清空容器内已安装的依赖；即使本地有，也可能和容器内环境存在差异，导致依赖问题，这个匿名卷会保留容器内的node_modules目录，不受本地挂载影响。

2. 验证Vite配置的正确性 #

你的vite.config.js已经做了正确的配置：

• server.watch.usePolling: true：Docker容器内无法直接接收宿主机的文件系统事件，轮询模式是必须的，这个配置没问题。
• server.host: true 和 server.port: 8080：配合docker-compose的端口映射8080:8080，确保外部能访问，这个也没问题。

3. 确认端口映射完整性 #

Vite的HMR默认使用24678端口，你已经在docker-compose里做了24678:24678的映射，这个配置正确，不需要修改。

修复后的完整配置参考 #

docker-compose.yml #

version: "3.9"

services:
  dmc-web:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: dmc-web
    restart: always
    ports:
      - "8080:8080"
      - "24678:24678"
    volumes:
      - ./:/app
      - /app/node_modules

Dockerfile（可清理多余的EXPOSE端口） #

FROM node:19-alpine

ENV NODE_ENV development

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

COPY . .

EXPOSE 8080
EXPOSE 24678

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

操作步骤 #

1. 停止并删除现有容器：docker-compose down
2. 重新构建并启动容器：docker-compose up --build
3. 修改本地代码，检查浏览器是否自动触发热重载

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