解决Windows Docker环境下Nextjs热更新失效问题

Windows Docker Desktop

为了在Windows下搭建Linux开发环境，可以使用Windows Docker Desktop创建开发容器Dev Container，然后在开发容器内进行开发，如果项目本身也使用到了Docker，可以在开发容器内安装docker-in-docker或者docker-from-docker，而VSCode编辑器支持快速配置开发容器，使用起来非常方便。

现在，Windows版本的Docker在安装时会默认选择WSL2作为后端，代替Hyper-V。WSL2是微软推出的一种Windows子系统，可以在里面安装常用的Linux系统。综合来说，用WSL2会比用Hyper-V运行起来快一些，推荐使用WSL2作为后端。

Nextjs热更新失效问题

在使用Windows Docker Desktop创建开发容器Dev Container后，发现Nextjs出现热更新失效的问题，每次修改代码后，都需要手动重启容器才能看到修改后的效果。虽然我们可以通过在next.config.js里添加如下配置来暂时性地解决这个问题，

但是这样做会导致Nextjs的热更新变得非常慢，每次修改代码后，都需要等待大概几十秒钟才能看到修改后的效果。这是因为这个配置是开启了使用webpack的watch模式来监听文件变化，而最新版的Nextjs已经不再使用webpack来编译代码了，而是使用比webpack快6到7倍的Rust SWC。

原因

我习惯在Windows本地拉代码，然后用Dev Container打开Windows本地的代码，这样做实际上是将Windows文件系统转换成Linux版，然后以数据卷volume的形式mount到容器的文件系统里，然后在开发容器内修改代码。这样我修改的代码就会同步到Windows本地，这样就可以在Windows本地使用git来提交代码了。

问题出在WSL2对mount到Linux上的文件系统的改变的监听上。这是一个已知的待解决的问题，详细可以参考这里。简单来说就是，WSL2目前仍然无法监听到从Windows上mount到Linux上的文件系统的改变，所以Nextjs热更新失效了。

解决办法

抛弃Docker的Dev Container，直接在WSL2 Linux上拉代码，目前Windows已经支持在资源管理器直接打开已安装的WSL2 Linux文件系统，所以可以直接通过资源管理器打开Linux目录然后在里面创建文件夹放项目代码，一般确保代码不在/mnt/c/Users/...这样的目录下，就不会出现这个问题了。

上述的操作也可以通过VSCode的Remote - WSL插件来轻松完成，可以在VSCode里直接打开Linux目录和终端。

要注意的是如果安装了WSL2后端的Windows Docker Desktop,那么在WSL Linux里可以直接使用docker命令，而不需要再次安装。在WSL Linux里启动的Docker容器，都会出现在Windows Docker Desktop的容器列表里。这相当于Dev Container里的docker_from_docker的表现。

终于可以打游戏搞开发两不误了，不用双系统切来切去了23333