在 Docker 容器中运行 Vite 开发环境，有这两个问题要注意

容器化开发给我们带来了很多便捷，Docker 不仅可以在生产环境中使用，用在开发环境下也能摆脱对系统环境的依赖。但是在开发环境下使用 Docker 也有一些问题要注意，如果不解决这些问题，你的开发体验不会很好。

下面就两个问题案例加以说明，如果你没有合适的项目用于测试，可以试试用我的开源全栈项目fullstack-blog跑一跑。

容器启动正常，却无法访问服务

我们用 Docker 启动一个 Vite + Vue3 项目的开发环境后，发现容器日志一切正常，运行端口也符合预期。

但是在浏览器中打开对应地址访问http://localhost:3000/时，会发现无法访问，就好似网络根本不通，换成 IP 127.0.0.1 访问也不行。但是实际上，我们的端口映射是正常的。

services:
  frontend:
    image: fullstack-blog-frontend:dev
    ports:
      - "3000:3000"
# 其他配置

之所以会出现这个问题是因为，Vite 默认的host是 localhost，而 localhost 实际上是一个特殊的域名，容器中的 localhost 与宿主的 localhost 不是一个概念，此 localhost 非彼 localhost。

我们需要将vite.config.ts中的server.host修改为0.0.0.0。当你设置host为0.0.0.0时，Vite服务器会监听所有可用的网络接口，这意味着任何设备在局域网内都可以访问你的 Vite 服务器，此时通过 Docker 的端口映射，就能形成网络通路，保证端口映射后能找到对应的 Vite 开发环境服务。

export default defineConfig({
  server: {
    host: "0.0.0.0",
    // 其他配置
  },
  // 其他配置
})

当我们做以上修改后，就能够在宿主的浏览器正常访问 Docker 容器中的 Vite 开发环境了。

这同样适用于 Webpack 项目，当我们使用 Webpack 时，devServer 的 host 也要做对应的修改。

修改文件后，HMR热更新失效

使用 Docker 开发环境时，我们最关注的一个特性是 HMR，因为我们需要在修改源码后立刻看到效果，如果没有这个能力的支持，使用 Docker 搭建开发环境也就失去了意义。如果我们不做特殊的配置，就会发现 HMR 在 Docker 开发环境中失效。

如果你遇到了这个问题，请直接修改vite.config.ts，将server的watch配置做一个修改即可，开启usePolling。启用 usePolling: true 后，Vite 会使用轮询模式来监控文件变化，确保即使在文件系统事件不可靠的情况下，也能及时响应文件的更改。然而，这可能会对性能产生一定影响，特别是在有大量文件或高频率更改的情况下。

watch: {
  usePolling: true
}

如果你不是使用 Docker 运行开发环境，请不要打开此选项。

PM2 的 watch 能力失效

在前面一篇文章《使用 Docker 搭建 NodeJS 开发环境是一种什么体验？》中提到过，这里也做个记录，方便查询。

如果以上解决了你的问题，别忘了留下你的点赞和关注，我将持续分享！