🎉

React Nativeを書く際に実機で動作確認する(Docker)

に公開
React Native
tech

はじめに

なんかモバイルアプリを触ってみようと思って、React Nativeで色々書こうとしていました。
Windowsで開発していたので、実機確認がXcodeなどでできず、Expoを使うことと、Dockerで立ち上げた時に実機で確認ができるようにしてみました

Expoとは？

説明しようとしたけど、綺麗にまとまっている記事があったので添付いたします。

https://zenn.dev/kamo_tomoki/books/0158a7770edeea/viewer/f58b65

https://docs.expo.dev/

Dockerファイルで立ち上がるようにする

Dockerで立ち上げができるとExpoがホットリロードで確認することができます。
そのため、動作確認などが簡単という利点があります

事前準備

  • Expoにログインしてアカウントを作成する
  • 端末側にもアプリをインストールしておく

Dockerをかく

  • Dockerfile
# ベースイメージとしてnode:18を使用
FROM node:18

# 作業ディレクトリを/appに設定
WORKDIR /app

# 現在のディレクトリの内容をコンテナにコピー
COPY package*.json ./

# npmをインストール
RUN npm install

# 現在のディレクトリの内容をコンテナにコピー
COPY . .

# Expoアプリをトンネルモードで起動
CMD ["npm", "start"]
  • docker-compose.yml
services:
  myapp:
    container_name: myapp-react-native
    tty: true
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/app
    env_file: .env
    ports:
      - 8081:8081
  • .env
        - PCと同じIPを端末で指定しないといけません
        - そのため、ifconfigなどでipを確認して、envに記載します
        - .envの内容はdocker-compose.ymlで指定します
REACT_NATIVE_PACKAGER_HOSTNAME=192.168.x.x

これでdockerのイメージをビルドして、立ち上げると以下のようにQRが出てくるので、端末で読み込みます

[f:id:yoshioka0101:20250227214339p:plain]

つまづいた部分

QRコードは出てきましたが、端末で読み込むと起動できませんでした。

PCと端末のWi-Fiが同じでないといけないので、確認したがうまくいかず

色々調べるとちゃんと設定しているけど、IPが接続できていないよと判定されてしまうことがあるみたいです。
対策として--tunnelを実行する必要があります

https://docs.expo.dev/more/expo-cli/#tunneling

package.jsonに書かれている内容に--tunnelを追加します

 -   "start": "expo start",
 +   "start": "expo start --tunnel",
```    

これでWeb側も端末側も同じ内容になりました！
おわり！

PCの画面

[f:id:yoshioka0101:20250227214402p:plain]


iOSの画面

[f:id:yoshioka0101:20250227214420p:plain]

Discussion