Docker容器中配置Expo前端及Metro热更新问题求助

一、检查Metro的文件监听配置 #

• 确保metro.config.js里开启了文件监听，并且把挂载目录加入watchFolders，比如：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);
// 把容器内的项目根目录加入监听列表
config.watchFolders = [__dirname];
// 确保包含你用到的文件扩展名
config.resolver.sourceExts.push('js', 'jsx', 'ts', 'tsx');

module.exports = config;

Metro默认不会监听外部目录，必须显式指定watchFolders才能感知挂载目录的文件变化。

二、修复Docker卷同步问题 #

• 确认docker-compose.yml的卷挂载是双向同步，别搞成单向：

services:
  expo-dev:
    volumes:
      # 本地项目根目录挂载到容器内/app，确保双向同步
      - ./:/app
      # 用命名卷存node_modules，避免本地和容器依赖冲突
      - node_modules:/app/node_modules

• 如果是Linux环境，给卷加上rshared传播模式，让容器能实时感知本地文件变更：

volumes:
  - ./:/app:rshared

• 验证同步效果：执行docker exec <容器ID> ls -l /app/src，对比本地文件的修改时间，要是不一致，重启容器甚至Docker服务试试。

三、解决容器内文件系统监听限制 #

• Linux容器的inotify监听数量默认不够，Metro可能检测不到文件变化。两种解决方式：
  1. 在docker-compose.yml里加环境变量，强制用轮询代替inotify：

  services:
    expo-dev:
      environment:
        - CHOKIDAR_USEPOLLING=true
  

  2. 提高inotify的监听上限，在docker-compose.yml里加sysctl配置：

  services:
    expo-dev:
      sysctls:
        - fs.inotify.max_user_watches=524288
  

  或者在entrypoint.sh里加这段命令：

  echo fs.inotify.max_user_watches=524288 | tee /etc/sysctl.d/40-max-user-watches.conf && sysctl --system
  

四、检查容器内文件权限 #

• 容器内跑Expo的用户（比如node用户）必须对挂载目录有读写权限。在Dockerfile里加：

RUN mkdir -p /app && chown -R node:node /app
USER node

• 如果本地用户的UID/GID和容器内不一致，会导致容器无法监听文件，在docker-compose.yml里指定本地用户的UID和GID：

services:
  expo-dev:
    user: "${UID}:${GID}"

（启动前先在终端执行export UID=$(id -u) GID=$(id -g)，或者直接写死你的UID/GID）

五、依赖检测错误的辅助处理 #

虽然核心是热更新，但依赖错误会导致Metro跑不起来，顺带处理下：

• 确保node_modules命名卷初始化正确：先在Dockerfile里加RUN npm install构建镜像，第一次启动容器前执行docker-compose run expo-dev npm install，把依赖装到命名卷里。
• 或者在entrypoint.sh里加依赖检查：

if [ ! -d "node_modules" ]; then
  npm install
fi

六、验证热更新触发 #

• 进入容器执行touch /app/src/App.tsx，看Metro控制台有没有输出文件变更的日志：
  • 没日志：说明文件监听没生效，回到前面的步骤排查。
  • 有日志但Expo App没更新：检查App和容器在同一网络，能访问Metro的19000/19001/19002端口；确保App连接的是容器的IP（不是localhost）；手动刷新App试试。

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