带有 Expo dockerized 应用程序的 Metro 捆绑器无法正常工作

Question

我正在尝试 docker 化一个 Expo React Native 应用程序，这样我的团队合作伙伴中的任何人都可以下载 repo，然后制作 docker-compose up 并且毫不费力地拥有相同的 expo 服务器运行宁在他们的电脑里。
到目前为止，我使构建容器成为可能，并且它显示的信息与我运行在本地计算机上显示的信息相同。

尝试启动 metro bundler 时出现问题，url http://localhost:19002 无法访问。正在工作 perfectly.Besides 的端口 19001 不会发生这种情况，我尝试用我的 iPhone 设备扫描二维码，但它也不起作用，因为找不到 docker ip我猜。

我不知道我做错了什么，而且网络上没有太多关于 dockerize expo 的信息。

这些是我的 docker 文件和 docker-compose.yml

FROM node:latest

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app

COPY package*.json /usr/src/app/
COPY app.json /usr/src/app/

RUN npm install -g expo-cli

EXPOSE 19000
EXPOSE 19001
EXPOSE 19002

CMD npm i -f && npm start

version: '3.7' # Specify docker-compose version

# Define the services/containers to be run
services:
   expo: # Name of the frontend service
      container_name: expo-prestadores
      build: ./ # Specify the directory of the Dockerfile
      ports:
         - 19000:19000 # Specify port-forwarding
         - 19001:19001
         - 19002:19002
      volumes: # Mount host path in the container
         - ./:/usr/src/app
         - /usr/src/app/node_modules

Answer 1

有道理。 Expo DevTools 告诉您容器中 localhost 上的运行。

这意味着在您的容器中，Expo DevTools 仅对 localhost 可用。这反过来只能从容器本身中获得。没有端口暴露会帮助你。您需要以允许外部访问的方式设置端口绑定。例如通过容器的 IP 以允许 expose 语句工作。

简而言之，像这样添加EXPO_DEVTOOLS_LISTEN_ADDRESS=0.0.0.0环境变量

version: '3.7' # Specify docker-compose version
services:
   expo: # Name of the frontend service
      container_name: expo-prestadores
      build: ./ # Specify the directory of the Dockerfile
      ports:
         - 19000:19000 # Specify port-forwarding
         - 19001:19001
         - 19002:19002
      volumes: # Mount host path in the container
         - ./:/usr/src/app
         - /usr/src/app/node_modules
      environment:
         - EXPO_DEVTOOLS_LISTEN_ADDRESS=0.0.0.0

到你的docker-compose.yml，你应该没问题。

Answer 2

我可能来不及了，但我在这里想出了一个解决方法，一旦你实施了@ckaserer 给出的解决方案，你就可以登录 http://0.0.0.0:19002 和 select Tunnel 而不是连接部分中的 LAN 如下所示，运行您在 Expo Go App 上的应用程序就可以了

Answer 3

要修复之前回复中提到的浏览器中的黑色背景屏幕，您必须添加 REACT_NATIVE_PACKAGER_HOSTNAME 环境变量并将其设置为计算机的本地 IP 地址。然后，不要导航到 localhost:19002 或 0.0.0.0:19002 以获得 Expo Developer Tools，而是导航到 <<HOST LOCAL IP>>:19002（当然，替换为您各自的 IP），您应该会看到 DevTools 正在运行。此页面上的二维码应将您的应用程序加载到地址 <<HOST LOCAL IP>>:19000.

的 ExpoGo 上

您的 docker-compose.yml 现在应该如下所示：

version: '3.7' # Specify docker-compose version
services:
   expo: # Name of the frontend service
      container_name: expo-prestadores
      build: ./ # Specify the directory of the Dockerfile
      ports:
         - 19000:19000 # Specify port-forwarding
         - 19001:19001
         - 19002:19002
      volumes: # Mount host path in the container
         - ./:/usr/src/app
         - /usr/src/app/node_modules
      environment:
         - EXPO_DEVTOOLS_LISTEN_ADDRESS=0.0.0.0 
         - REACT_NATIVE_PACKAGER_HOSTNAME=<<HOST LOCAL IP>>>

带有 Expo dockerized 应用程序的 Metro 捆绑器无法正常工作

Metro bundler with Expo dockerized app is not working

docker

docker-compose

react-native

expo

metro-bundler