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

rod*_*ass 10 docker docker-compose react-native expo metro-bundler

我正在尝试对 Expo React Native 应用程序进行 docker 化,以便我的团队合作伙伴中的任何人都可以下载该存储库,然后轻松地docker-compose up在他们的计算机中运行相同的 expo 服务器。
到目前为止,我可以构建容器,并且它显示的信息与我在计算机上本地运行它时显示的信息相同。

在此输入图像描述

尝试启动 Metro 捆绑程序时出现问题,网址http://localhost:19002无法访问。端口 19001 不会发生这种情况,该端口工作正常。此外,我尝试用我的 iPhone 设备扫描二维码,但它也不起作用,因为我猜是找不到 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
Run Code Online (Sandbox Code Playgroud)
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

Run Code Online (Sandbox Code Playgroud)

Cle*_*rer 10

说得通。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 
Run Code Online (Sandbox Code Playgroud)

给你docker-compose.yml的,你应该没问题。


小智 6

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

Run Code Online (Sandbox Code Playgroud)