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

こんにちは!かたつむり(@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しなおすも特にかわらずw

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

picture 6

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

解決!

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のプロジェクト構築

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

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-clinpm startしてみたら良いのかもしれません。
yarnを使っているので、まずはyarnでアップデートしてみます。

一旦Ctrl+Cでコンテナを落として、
docker-compose.ymlyarn 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ブラウザで確認する