WSL环境下Docker的权限与node_modules文件同步问题排查

1. 修复WSL内项目文件的权限 #

从Windows复制到WSL的文件会继承Windows权限设置，容易导致容器内权限不足，执行以下命令修正：

# 将项目目录所有者改为当前WSL用户
sudo chown -R $USER:$USER /path/to/your/project
# 给项目目录设置合理的读写执行权限
chmod -R 755 /path/to/your/project/app

2. 调整React服务的Dockerfile #

确保容器内正确安装依赖并赋予react-scripts可执行权限，示例Dockerfile：

FROM node:18-alpine

# 设置容器内工作目录
WORKDIR /app

# 优先复制依赖配置文件，利用Docker缓存机制
COPY package*.json ./
# 安装项目所有依赖（包含react-scripts）
RUN npm install

# 复制项目源码文件
COPY . .

# 确保react-scripts具备执行权限
RUN chmod +x node_modules/.bin/react-scripts

# 启动React开发服务
CMD ["npm", "start"]

3. 修正Docker Compose配置 #

通过匿名卷隔离容器内的node_modules，避免本地空目录覆盖容器内依赖，同时开启文件轮询适配WSL文件系统：

services:
  react-app:
    build: ./app
    ports:
      - "3000:3000"
    volumes:
      # 挂载本地源码到容器，实现开发热更新
      - ./app:/app
      # 匿名卷：保留容器内的node_modules，不被本地目录覆盖
      - /app/node_modules
    environment:
      # 开启轮询，解决WSL下文件变更无法触发热重载的问题
      - WATCHPACK_POLLING=true
  # 你的PHP后端服务配置...

4. 配置WSL挂载权限（可选） #

如果仍存在权限问题，修改WSL挂载配置，让Windows目录挂载到WSL时使用标准Linux权限：

1. 在WSL终端执行：

sudo nano /etc/wsl.conf

2. 添加以下内容：

[automount]
options = "metadata,umask=0022,fmask=0022"
mountFsTab = false

3. 关闭WSL：在Windows命令提示符执行wsl --shutdown，再重新打开WSL终端。

5. 重新构建容器 #

执行以下步骤彻底清理并重建：

# 删除容器、关联卷和镜像
docker compose down -v --rmi all
# 删除本地空的node_modules目录（如果存在）
rm -rf ./app/node_modules
# 重新构建并启动服务
docker compose up --build

关于本地node_modules为空的说明 #

这是正常现象：我们配置的/app/node_modules匿名卷由Docker独立管理，不会同步到本地目录。这样做是为了避免Windows环境下的node_modules（含Windows二进制文件）与容器内Linux环境的依赖冲突，容器内的依赖完全由Dockerfile中的npm install安装，无需本地同步。

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