Docker部署的SvelteKit应用UI修改仅生效1秒后恢复问题求助

我将SvelteKit应用容器化后，运行容器时修改前端UI，更改仅能显示1秒就恢复至修改前状态，推测是缓存机制导致的问题。

我的配置文件 #

Dockerfile #

FROM node:16
WORKDIR /test-app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build
ENV PORT 3000
EXPOSE 3000
EXPOSE 24678 
CMD ["node", "build"]

docker-compose.yaml #

version: '3'
services:
  svelte-test:
    image: sveltekit-test:node
    volumes:
      - ./:/test-app/
    ports:
      - 3000:3000
      - 24678:24678
      - 5173:5173
    tty: true
    stdin_open: true

端口说明 #

• 3000: SvelteKit端口
• 5173: 容器内SvelteKit端口
• 24678: Vite端口

项目目录结构 #

sveltekit-docker
    test-app
        -Dockerfile
        -docker-compose.yaml
        -package-lock.json
        -package.json
        -svelte.config.js
        -tsconfig.json
        -vite.config.js
        -all sveltekit folders (src, node_modules, static, tests)

问题原因与解决办法 #

核心原因 #

你的Dockerfile构建的是生产环境镜像（执行了npm run build），启动的是编译后的静态文件服务；但docker-compose又挂载了本地源码目录，同时暴露了Vite的热更新端口。这就导致：本地修改源码后，Vite短暂触发热更新，但生产服务优先读取预构建的build目录文件，页面随即恢复原状。

解决步骤 #

1. 修改Dockerfile适配开发环境
   去掉生产构建步骤，直接安装依赖后启动开发服务：

   FROM node:16
   WORKDIR /test-app
   COPY package.json package-lock.json ./
   RUN npm ci
   ENV PORT 5173
   EXPOSE 5173
   EXPOSE 24678
   CMD ["npm", "run", "dev", "--", "--host"]
   

   注：--host让Vite监听所有地址，确保容器外能正常触发热更新。

2. 调整docker-compose配置
   无需挂载整个目录（避免覆盖容器内依赖），只挂载需要修改的源码和配置目录，同时修正端口映射：

   version: '3'
   services:
     svelte-test:
       build: .
       volumes:
         - ./src:/test-app/src
         - ./static:/test-app/static
         - ./svelte.config.js:/test-app/svelte.config.js
         - ./vite.config.js:/test-app/vite.config.js
       ports:
         - 5173:5173
         - 24678:24678
       tty: true
       stdin_open: true
   

   注：使用build: .直接构建镜像，避免手动构建的镜像和配置不一致；只挂载需要修改的目录，防止本地node_modules覆盖容器内的依赖。

3. 验证配置

   • 删除旧镜像：docker rmi sveltekit-test:node
   • 启动容器：docker-compose up --build
   • 修改src目录下的Svelte组件，页面会实时更新且不会回滚。

额外说明 #

如果需要生产环境部署，不要挂载本地目录，直接使用npm run build后的镜像，启动node build即可，此时不需要热更新端口。

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