Ubuntu 20.04环境Docker部署React前端代码修改后不自动重载问题求助

你的两个问题是关联的：

• Ubuntu系统下Docker默认以root用户运行容器，和宿主本地普通用户的UID/GID不匹配，所以挂载目录后容器没有写入权限，会报EACCES: permission denied错误
• 你把Dockerfile工作目录和挂载目录分开后，本地代码没有挂载到容器的实际运行目录，所以修改代码无法被监听到，自然不会触发热重载
• Mac系统的Docker文件共享层默认做了权限兼容处理，所以相同配置可以正常运行

1. 统一工作目录 #

修改前端Dockerfile，将工作目录设置为和docker-compose挂载路径一致的/app，同时调整COPY顺序优化镜像构建缓存：

FROM node:latest
WORKDIR /app

# 先复制依赖文件安装，利用Docker缓存避免每次改代码都重装依赖
COPY package.json ./
RUN yarn install --network-timeout 500000

# 再复制全部项目代码
COPY . ./

ENV API_URL $API_URL
ENV REACT_APP_API_URL $REACT_APP_API_URL

2. 配置容器运行用户匹配宿主权限 #

在宿主终端执行id命令，获取你当前用户的UID和GID（默认Ubuntu普通用户的UID、GID都是1000），然后在docker-compose.yml的frontend服务中添加user配置指定运行用户：

version: "2.1"
services:
  mysql-container:
    ...
  backend:
    ...
  frontend:
    build: ./frontend
    cache_from:
     - pals-crm-2_frontend_1:latest
    # 替换为你自己的UID:GID，可通过id命令查询
    user: "1000:1000"
    environment:
      REACT_APP_API_URL: "${REACT_APP_API_URL}"
      CHOKIDAR_USEPOLLING: "true"
    stdin_open: true
    volumes:
      - ./frontend:/app
      # 匿名卷覆盖容器内node_modules，优先使用镜像内的依赖
      - /app/node_modules
    ports:
      - "3000:3000"
    depends_on:
      - backend
    command: npm start
volumes:
  mysql-storage:

3. 清理旧缓存并重新构建 #

先清理旧的容器、卷和本地有权限问题的缓存文件：

# 停止并删除旧容器、关联匿名卷
docker-compose down -v
# 清理本地前端目录下的权限异常缓存文件
sudo rm -rf ./frontend/node_modules ./frontend/.cache

重新构建启动容器即可：

docker-compose up --build

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