Docker-Compose部署Storybook热重载失效，求解决方案

以下是针对你的场景的几个有效解决方案，按优先级尝试：

1. 安装文件系统监听工具（Alpine镜像必备） #

Alpine Linux镜像默认缺少inotify-tools，而Webpack/Storybook的文件监听依赖该工具检测文件变化。修改你的Dockerfile-storybook，添加安装步骤：

FROM node:16-alpine

# 安装inotify-tools，解决文件监听基础依赖问题
RUN apk add --no-cache inotify-tools

RUN mkdir -p /app

WORKDIR /app

COPY package.json /app
COPY yarn.lock /app

RUN yarn install

COPY . /app

EXPOSE 3200

# 调整启动命令，绑定0.0.0.0确保容器外可访问，禁用自动打开浏览器
CMD ["yarn", "storybook", "--host", "0.0.0.0", "--port", "3200", "--no-open"]

2. 修正Storybook的Webpack配置，确保watchOptions正确生效 #

你的main.js中直接覆盖watchOptions可能导致原有配置丢失，改为合并配置模式，同时补充Webpack层级的watch设置：

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: "@storybook/react",
  core: {
    builder: {
      name: "@storybook/builder-webpack5",
      options: {
        webpackDevMiddleware: (config) => {
          // 合并原有watchOptions，避免覆盖默认配置
          config.watchOptions = {
            ...config.watchOptions,
            poll: 1000, // 每秒轮询一次文件变化
            aggregateTimeout: 300, // 延迟300ms触发重载，避免频繁更新
            ignored: /node_modules/, // 忽略依赖目录，提升性能
          };
          return config;
        },
      },
    },
  },
  // 补充Webpack层级的watch配置，确保双重生效
  webpackFinal: (config) => {
    config.watchOptions = {
      ...config.watchOptions,
      poll: 1000,
      aggregateTimeout: 300,
      ignored: /node_modules/,
    };
    return config;
  },
};

3. 解决Docker卷挂载权限问题 #

确保宿主机文件权限与容器内用户权限一致，避免容器无法读取文件变化。可在Dockerfile-storybook中添加用户配置：

# 在WORKDIR之后添加：
RUN addgroup -S appgroup && adduser -S appuser -G appgroup
USER appuser

如果权限仍有问题，在docker-compose.yaml的storybook服务中添加用户ID映射：

user: "${UID}:${GID}"

启动容器前在宿主机终端执行：export UID=$(id -u) && export GID=$(id -g)

4. 禁用Storybook缓存 #

缓存可能导致热重载不触发，在启动命令中添加禁用缓存参数：

CMD ["yarn", "storybook", "--host", "0.0.0.0", "--port", "3200", "--no-open", "--no-manager-cache"]

验证步骤 #

1. 重新构建Storybook镜像：docker-compose build storybook
2. 启动容器：docker-compose up storybook
3. 修改任意stories文件或组件文件，查看Storybook是否自动重载

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