🦁

Expo GoをDockerで作成してスマホで見るまで

2022/11/09に公開

背景

カメラで撮影した画像を用いて機械学習をやってみたかった。
そこで、スマホアプリを作る必要があったが、初めてなので、簡単にできるものはないかと探したところ、expo cameraが出てきた。
言語はreact-nativeを使用したかったので、条件は一致。
調べてみるとExpoはフレームワークとのことで、「PHPでいうLaravelか〜」と軽い気持ちで始めたら、スマホで画面表示するまでハマったので、その記録を記載しようと思う。

スマホにExpo Goを入れて見れるようになるまで

まずは、ネットで検索。
良さそうな記事が出てきたので、
こちらに則り、進めていく。
docker-composeでdocker起動までは問題なく、expo init ${your_app_name}も問題なし。
いざ、yarn startしてみるが、Dockerを動かしているMac上でも(ブラウザ)スマホでも(Expo Goアプリ)
アクセス不可。
原因はtimeout。
その情報をもとに、ネットを検索するも対処法が見つからない。
Expo Goを起動するとwでwebが立ち上がるとのことで、実施してみる。webpackがないと怒られ、yarn addで対応。
webを立ち上げ、Dockerが動いているMacからアクセスしてみると画面が表示された。
webを立ち上げないとMacからは見れないことが分かった。 このwでweb起動というのは情報として
ネットには出てこなかった。当たり前のことなのか、スマホで見る場合は不要だから記載する人がいないのか・・・
何はともあれ、とりあえず見ることはできたので、次はスマホからのアクセスを試してみる。
webを立ち上げた状態でも変わらずExpo Goアプリからはアクセスができない。
焦点を変えて、「Docker内のExpo Goで立てているwebにスマホのブラウザからアクセスできるのか」を試す。
結果、アクセスできず、「では、何が原因か」と探ってみる。
もちろんこの時、スマホはWiFi接続で同じ帯域にいるので、通常であればブラウザアクセスするだけで表示され
る。
試しに、LOCAL_IP_ADDRをMacと同じIPに設定してみる。すると、ブラウザアクセスができた。
「では、Expo Goはどうか」というと、こちらも問題なくアクセスができた。
他サイトでは、アクセス後、直ぐにwebと同じ画面が表示されるようになっているが、実際にはbuildが走る。
何は共あれ、Expo Goで開発を進められる状態になった。

参考情報

Docker関連

Dockerfile

FROM node:16.18.0-alpine3.16

WORKDIR /var/app

RUN set -eux; \
  apk update --no-cache; \
  apk upgrade --no-cache; \
  apk add --no-cache yarn; \
  # 以下はうまくいっているのか不明。docker-compose up -d後、同じコマンドを打った記憶
  yarn global add expo-cli;

docker-compose.yml

version: '3'

services:
  api:
    build:
      context: ./docker
      dockerfile: Dockerfile
    volumes:
      - ./app/:/var/app
    environment:
      - REACT_NATIVE_PACKAGER_HOSTNAME=${LOCAL_IP_ADDR}
    ports:
      # 自分のローカルだと必要そうなポートは19001と19006だった
      # ネット上では大体19000~19003を利用していたので、自身の環境に合わせる
      - 19000-19010:19000-19010
    tty: true

.env

LOCAL_IP_ADDR=${動かしている端末のローカルIP}

Expo Goアプリ初回起動時

背景

スマホにExpo Goを入れて見れるようになるまで

参考情報

Discussion