DockerでReact Nativeの開発環境を作って、iOS Simulatorを起動したいです。

Question

前提・実現したいこと

Dockerを使ってReactNativeの開発環境を作り、iOSシミュレータを起動しようとしています。
Expo Developer Toolsを使ってiOSシミュレーターを起動しようとした際にxcodeをインストールしているのに、xcodeをインストールしてくださいというメッセージが出ます。

発生している問題・エラーメッセージ

iOSシミュレーターを起動しようとすると

✔ Xcode needs to be installed (don't worry, you won't have to use it), would you like to continue to the App Store? …

上記の確認が出て、yesとすると

Going to the App Store, re-run Expo when Xcode is finished installing.

このようなメッセージが出ますが、xcodeは既にインストールしています。

環境

Dockerfile

FROM amazonlinux:latest

RUN yum update -y

## nodejs
RUN curl -sL https://rpm.nodesource.com/setup_14.x | bash -
RUN yum install nodejs -y
RUN yum -y install wget
RUN wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
RUN yum -y install yarn


## systemd
RUN yum -y install systemd

## ReactNative
RUN yarn global add expo-cli

WORKDIR /srv/frontend/app

docker-compose.yaml

version: '3'
services:
  app:
    build: .
    container_name: app_django
    ports:
      - "19000:19000"
      - "19001:19001"
      - "19002:19002"
    privileged: true
    volumes:
      - ./frontend:/srv/frontend/app 
    command: /sbin/init
    environment:
      TZ: Asia/Tokyo
      EXPO_DEVTOOLS_LISTEN_ADDRESS: 0.0.0.0
    tty: true  

試したこと

１、xcodeの「Preferences」>「Locations」のCommand Line Toolsはすでに設定されております。

２、xcodeでios 14.3 Simulatorをインストールしました。

Answer 1

Docker コンテナの中で yarn ios を実行してもコンテナの中に Xcode やシミュレータはありませんから動作しないと思います。
仮に Mac の /Application フォルダをコンテナにマウントしても、Mac の Command Line Tools がコンテナ内で実行できないので動作しないと推察されます。

---

どうしても Docker でやりたい場合、iOS や Android に関しては「Expo Go」アプリを利用しての実機確認になるのではないでしょうか？

なお、その際は docker-compose.yaml の environment へ REACT_NATIVE_PACKAGER_HOSTNAME: Macのローカルipアドレス を追加しないと QR コードのアドレスが 127.0.0.1 にされてしまうと思うので気をつけて下さい。もちろん、スマートフォンと Mac は同じ Wi-Fi ネットワークに接続されないといけません。

environment:
    TZ: Asia/Tokyo
    EXPO_DEVTOOLS_LISTEN_ADDRESS: 0.0.0.0
    REACT_NATIVE_PACKAGER_HOSTNAME: xxx.xxx.xxx.xxx # あなたのMacのローカルIPアドレス

yarn start でコマンドラインに QR コードを出してくれるので、それをカメラで読み取れば「Expo Go」にアプリが描画されます。

---

それと、yarn web でウェブブラウザ用に公開する場合、19006 ポートを使われたことがあるので、それも docker-compose.yaml に足したほうがいいかも知れません。

ports:
    - "19000:19000"
    - "19001:19001"
    - "19002:19002"
    - "19006:19006"

Comments

[shuhei-o]

ありがとうございます。
理解できました。この場合、React NativeなどをDockerなどではなくて、自分のPCに直接入れるのが、適切なのでしょうか。

[退会済みユーザー]

開発に関しては色々な事情や要件があるので一概には言えませんが、iOS アプリもビルドするつもりでしたら結局はそうする事になるかと思いますー。

[shuhei-o]

ありがとうございます！