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

Question

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

尝试启动 Metro 捆绑器时出现问题，无法访问 url http://localhost:19002。端口 19001 不会发生这种情况，它工作得很好。此外，我尝试用我的 iPhone 设备扫描 QR 码，但它也不起作用，因为我猜没有找到 docker ip。

我无法弄清楚我做错了什么，并且网络上没有太多关于 dockerize expo 的信息。

这些是我的 dockerfile 和 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

如前所述，要修复浏览器中的黑色背景屏幕，您必须添加 REACT_NATIVE_PACKAGER_HOSTNAME 环境变量并将其设置为您计算机的本地 IP 地址。然后，不要导航到 localhost:19002 或 0.0.0.0:19002 以获取 Expo Developer Tools，而是导航到 <<HOST LOCAL IP>>:19002（当然，替换为您各自的 IP），您应该会看到 DevTools 正常工作。此页面上的 QR 码应将您的应用加载到 ExpoGo 上，地址为<<HOST LOCAL IP>>:19000。

您的 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>>>

Answer 2

我可能有点太晚了，但我在这里想出了一个解决方法，一旦你实现了@ckaserer 给出的解决方案，你可以登录到http://0.0.0.0:19002 并选择Tunnel 而不是@连接部分中的 987654325@ 如下所示，然后在 Expo Go App 上运行您的应用程序就可以了

Answer 3

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

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

简而言之，像这样添加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，你应该没事。