【2】React Nativeでテキストエディタを作ってみる！【環境構築編】

SHARE

こんにちは！かたつむり(@Katatumuri_nyan)です！

Reactを触ってみて、サイト的なものは作れるようになりました(*´ω｀)
そこで、次はReactNativeを触ってみようと思い、簡単なテキストエディタを作成しようと企んでおります(笑)

今回は、Dockerで、React Native+Expoの環境構築をしていきます～！

最初から見る↓
【1】React Nativeでテキストエディタを作ってみる！【下調べ編】 【1】React Nativeでテキストエディタを作ってみる！【下調べ編】

環境

  • PC
    • Windows10
    • Docker Desktop
    • docker-compose

-端末
– iPhone XR
– iPad 9.7

1.Expoアカウントの作成

Expoアカウントの作成方法
iPhoneでExpo Clientのインストールとセットアップ

↑こちらの手順にそって、Expoアカウントを作成、メールが届くのでリンク先にログインして完了。
iPhoneとiPadでExpo Clientというシミュレーターみたいなものを導入。

2.Dockerで環境構築

DockerでReact Native(TypeScript)+Expoのプロジェクト構築

↑こちらの手順とファイルを参考に作成　　

docker-compose buildでエラーがでた！

picture 1
pywintypes.error: (2, 'CreateFile', '指定されたファイルが見つかりません。')

↑DockerDesktopを起動していないだけだった

↓またエラー
picture 2 

Building react_native
[+] Building 0.1s (2/2) FINISHED
 => [internal] load build definition from Dockerfile                                                             0.1s 
 => => transferring dockerfile: 2B                                                                               0.0s 
 => CANCELED [internal] load .dockerignore                                                                       0.0s 
 => => transferring context:                                                                                     0.0s 
failed to solve with frontend dockerfile.v0: failed to read dockerfile: open /var/lib/docker/tmp/buildkit-mount883823841/Dockerfile: no such file or directory
ERROR: Service 'react_native' failed to build : Build failed

dockerfileの名前をDockerFileと間違えていました(;´･ω･)
無事ビルドできました～！

記事にしたがってセットアップしていきます。

プロジェクトのセットアップ

TypeScriptを使っていないのでblankを選択しました。

コンテナの起動とアプリでの確認

参考記事にしたがって、起動していきます！

picture 3

読むとるも起動せず…

picture 5

Expoのデベロッパーツールが起動するhttp://localhost:19002/にも接続できませんでした(;´･ω･)

もしかして、ローカルホストの192.168.0.2が違うかも！と思い、.envを変更　　
（ipconfigで分かるIPアドレスに変更）

REACT_NATIVE_PACKAGER_HOSTNAME=192.168.0.19

docker-compose upしなおしました。

が、同エラー(;´･ω･)

ポートが他のプロセスと被っているのかと思い、ホストマシンでnetstat -nao | findするも特に何もなく…

~~~.envへの変更を192.168.0.2に戻しました。~~~
~~~http://localhost:19000/では、192.168.0.19でも192.168.0.2でもJSONが表示されているので、192.168.0.2の変更は関係ないと判断しました！~~~

iPhone側からhttp://192.168.0.19:19000/にアクセスできないので、ポートの設定か何かがうまくいっていないのかもしれないですね。

EXPOSE 19000
EXPOSE 19001
EXPOSE 19002

ポートが解放されていないのかなぁと思い、dockerfileに上記を足してみました。
buildしなおすも特にかわらずｗ

おかしいなと思って、以前つくったReactアプリを立ち上げてみると、全滅していました。
パソコンではアクセスできるものの、iPhoneからは難しく…こまったｗ
どこかでパソコンかDockerとかの設定が変わってしまったんでしょう…

picture 6

このポートのところ、0.0.0.0:3030ですよね。
以前はlocalhost:3030だったんです…。
何が起きたんだろうｗ

解決！

picture 7

パソコンのネットワークがパブリックの設定になっていました。
プライベートに設定しなおすと、iPhoneからも接続できるようになりました(*´ω｀)

やっと実機確認終了です～！

http://localhost:19001/とhttp://localhost:19002/にはまだ接続できませんが…

http://localhost:19002
アクセスすると、Expo DevToolが使用できます。
ここからシミュレータを起動したりできるみたいです。
（X Code、Android Studioのインストールや設定が別途必要になるようです）
後述していますが、自分はうまくいきませんでした…。
引用:DockerでReact Native環境作成から、Expo Clientで実機確認するまで

とのことなので、とりあえず無しで進めてみます。

ホットリロードされない問題

ホットリロードによって末尾の☺️がiPhone上の検証画面へ自動的に反映されます。
DockerでReact Native(TypeScript)+Expoのプロジェクト構築

と書いてありますが、私の実機では無理でしたｗ

Expoのドキュメントを参考に、作業してみました。

変更がデバイスに表示されていませんか？
Expo Goはデフォルトで、ファイルが変更されるたびにアプリを自動的にリロードするように構成されていますが、何らかの理由で機能しない場合に備えて、アプリを有効にする手順を確認してください。
まず、ExpoCLIで開発モードが有効になっていることを確認します。
次に、アプリを閉じて再度開きます。
アプリが再び開いたら、デバイスを振って開発者メニューを表示します。エミュレーターを使用している場合は⌘+d、iOSまたはctrl+mAndroidの場合はを押します。
が表示されたらEnable Fast Refresh、それを押します。が表示された場合はDisable Fast Refresh、開発者メニューを閉じます。次に、別の変更を加えてみてください。

ExpoCLIで開発モードが有効になっていることを確認します

ここなんですが、公式ドキュメントによると、、 http://localhost:19002/（Expo開発ツール）には接続必要って事みたいですね、、、。
ターミナルデモできる様な気もしますが、今後のためにExpo開発ツールを使えるように試行錯誤します！

とりあえずデバッグしてみた

picture 8
picture 9
picture 10 

Runtime is not ready for debugging.
 - Make sure Packager server is running.
- Make sure the JavaScript Debugger is running and not paused on a breakpoint or exception and try reloading again.

ランタイムはデバッグの準備ができていません。
-Packagerサーバーが実行されていることを確認します。
-JavaScriptデバッガーが実行中であり、ブレークポイントまたは例外で一時停止していないことを確認して、再ロードを再試行してください。

…謎

1つ解決

Metro bundler with Expo dockerized app is not working

↑こちらを参考に、.envに以下を追加

EXPO_DEVTOOLS_LISTEN_ADDRESS=0.0.0.0

docker-compose upしなおしてみます。

picture 11

真っ暗だけど開きました！
コンテナ内のlocalhostに繋がっていたのですね。
なるほど！

でも、真っ暗だしホットリロードできないですね。


↑こちらを参考に、npm install -g expo-cliとnpm startしてみたら良いのかもしれません。
yarnを使っているので、まずはyarnでアップデートしてみます。

一旦Ctrl+Cでコンテナを落として、
docker-compose.ymlにyarn upgrade --latestを追加しました。

version: "3"
services:
  react_native:
    build: ./docker/react_native
    volumes:
      - ./react_native/:/usr/src/app
    env_file: .env
    command: sh -c 'yarn upgrade --latest && yarn start'
    ports:
      - "19000:19000"
      - "19001:19001"
      - "19002:19002"

再びdocker-compose upしなおしてみます。
が、真っ黒のままでした(;´･ω･)

docker-compose.ymlを元に戻しました。

コンテナを起動したまま別のターミナルを開いて、yarn global upgradeしてみます。

yarn遅いから苦手😢

再びdocker-compose upしなおしてみます。

picture 12

あhttp://192.168.0.19:19002/でアクセスできました！
ありゃ～、もしかしたらyarnのくだりは必要ないかもですね(笑)

ホットリロードはうまくいかなかった

ただし、ホットリロードうまくいかないので、実機でのリアルタイム確認はできなさそうです(;´･ω･)

代替え案-webブラウザで確認する

picture 13
ここ押すとインストールが勝手に始まります。

picture 14

ポート19006で動くみたいなので、docker-compose.ymlにポートを追加しました。

version: "3"
services:
  react_native:
    build: ./docker/react_native
    volumes:
      - ./react_native/:/usr/src/app
    env_file: .env
    command: yarn start
    ports:
      - "19000:19000"
      - "19001:19001"
      - "19002:19002"
      - "19006:19006"

再びdocker-compose upしなおしてみます。
picture 13
ここをもう一度押すと、勝手にWebpackが起動。
http://localhost:19006/にアクセスすると、、、

picture 15

できました～！

でもやっぱりホットリロードできないｗ(´;ω;｀)

解決：.envにCHOKIDAR_USEPOLLING=trueを追加

そういえば以前、Reactアプリを作成した時はホットリロードできてたので、その方法を試してみます。
.envにCHOKIDAR_USEPOLLING=trueを追加。

再びdocker-compose upしなおしてみます。

webブラウザの方ではできました～！！！！！！
やった～！
コードを更新すると、リロードしてくれるようになりました✨

iPhoneの方は、ホットリロードしてくれませんね(;´･ω･)
とりあえず、webブラウザでリアルタイムに確認して、iPhoneは時々確認しようと思います！

いちおうexpo updateをしておきました～！

と、いうことで、環境構築は終わりです(*´ω｀)
ありがとうございました～！

↓続き
【3】React Nativeでテキストエディタを作ってみる！【右往左往編】 【3】React Nativeでテキストエディタを作ってみる！【右往左往編】

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

【1】React Nativeでテキストエディタを作ってみる！…

次の記事

【3】React Nativeでテキストエディタを作ってみる！…