Docker容器中Expo/React Native快速重载失效及Axios请求问题

项目背景 #

基于Expo(React Native SDK 51)开发的项目，已通过Docker和Docker Compose完成前后端容器化，方便开发者一键启动。本地使用Expo Go测试时快速重载功能正常，但容器内该功能失效；已在frontend/.env中配置REACT_NATIVE_PACKAGER_HOSTNAME实现同网段手机访问。项目为开源项目。

问题现象 #

• 容器内Expo快速重载功能失效
• 前端容器通过Axios请求后端时，无法解析backend主机名，报错："Unable to resolve host backend: No address associated with hostname"
• 仅8081端口能打开应用，其余端口无法访问
• Docker环境下bundling流程耗时30-50秒，远慢于本地的10秒内

期望解决目标 #

1. 让Docker容器中的Expo快速重载功能正常运行
2. 解决Axios请求无法到达后端接口的问题

环境信息 #

• React Native + Expo (SDK 51)
• Docker Compose (v2.27.0-desktop.2)
• Windows 11 (23H2)

已尝试的解决方案 #

• 添加CHOKIDAR_USEPOLLING=true环境变量以检测文件变更
• 将本地前端目录挂载到容器/home/app路径
• 暴露8081、19000、19001端口
• 在容器内通过curl http://backend:5000可正常访问后端，但Axios使用backend作为服务名发起请求仍报错

相关配置文件 #

前端Dockerfile #

# Use the official Node.js image as the base image
FROM node:18

# Set the working directory
WORKDIR /home/app

# Copy the package.json and package-lock.json files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Start the application
CMD ["npx", "expo", "start"]

docker-compose.yml #

services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    container_name: frontend
    ports:
      - "8081:8081"
      - "19000:19000"
      - "19001:19001"
    environment:
      - "./frontend/.env"
      - CHOKIDAR_USEPOLLING=true  # Required for hot reloading to work in Windows
    volumes:
      - ./frontend:/home/app
      - ./frontend/node_modules:/home/app/node_modules  # Prevents node_modules from being overriten
    depends_on:
      - backend
    tty: true  # Enables the interactive terminal (shows the QR code for Expo Go)

  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    container_name: backend
    ports:
      - "5000:5000"
    environment:
      - PYTHONUNBUFFERED=1
    volumes:
      - ./backend:/app
    env_file:
      - ./backend/.env

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