🦁

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

2022/11/09に公開約1,900字

背景

カメラで撮影した画像を用いて機械学習をやってみたかった。
そこで、スマホアプリを作る必要があったが、初めてなので、簡単にできるものはないかと探したところ、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アプリ初回起動時

Discussion

ログインするとコメントできます