Docker部署Svelte项目实现热重载的方法咨询

问题根源 #

1. 启动命令错误：当前使用的npm start是旧模板的生产环境静态服务（基于sirv），本身不具备热重载能力，必须切换到开发模式的npm run dev（基于rollup的监听模式）。
2. 卷挂载覆盖问题：直接挂载./frontend:/frontend会覆盖容器内的node_modules目录——如果宿主机器未安装对应依赖，容器内的依赖会直接丢失，导致服务无法正常运行，热重载自然失效。

解决方案 #

1. 更新docker-compose.yml的前端服务配置

调整卷挂载规则，仅同步开发必需的文件/目录，避免覆盖容器内的依赖，同时替换启动命令为开发模式：

version: '3.8'
services:
  frontend:
    build: ./frontend
    ports: ["8080:8080"]
    command: npm run dev
    volumes:
      # 挂载src目录，代码修改实时同步
      - ./frontend/src:/frontend/src
      # 挂载rollup配置文件，修改配置即时生效
      - ./frontend/rollup.config.js:/frontend/rollup.config.js
      # 挂载public目录，静态资源修改同步
      - ./frontend/public:/frontend/public
    environment:
      # 确保开发服务器监听所有地址，容器外可访问
      - HOST=0.0.0.0

  backend:
    restart: always
    build: ./backend
    ports: ["3000:3000"]

2. 优化前端Dockerfile

由于代码通过卷挂载同步到容器，无需复制整个项目，仅保留依赖安装步骤即可：

FROM node:16
WORKDIR /frontend
# 仅复制依赖配置文件，安装项目依赖
COPY package*.json ./
RUN npm i
ENV PORT=8080
EXPOSE 8080

3. 修正rollup.config.js的服务器监听配置

旧模板默认可能仅监听localhost，需要修改为监听所有地址，确保热重载的websocket能正常通信：

// rollup.config.js
export default {
  // ...其他原有配置
  plugins: [
    svelte({
      // ...svelte相关配置
    }),
    resolve({
      browser: true,
      dedupe: ['svelte']
    }),
    commonjs(),
    livereload('public'),
    dev && serve({
      // 修改为0.0.0.0，允许容器外部访问
      host: '0.0.0.0',
      port: 8080
    }),
    // ...其他插件配置
  ]
};

验证步骤 #

1. 停止现有容器：docker-compose down
2. 重新构建并启动服务：docker-compose up --build
3. 修改前端src目录下的代码，浏览器将自动刷新，热重载功能生效。

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