こんにちは!かたつむり(@Katatumuri_nyan)です!
Reactを触ってみて、サイト的なものは作れるようになりました(*´ω`)
そこで、次はReactNativeを触ってみようと思い、簡単なテキストエディタを作成しようと企んでおります(笑)
今回は、Dockerで、React Native+Expoの環境構築をしていきます~!
最初から見る↓
【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
でエラーがでた!
pywintypes.error: (2, 'CreateFile', '指定されたファイルが見つかりません。')
↑DockerDesktopを起動していないだけだった
↓またエラー
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
を選択しました。
コンテナの起動とアプリでの確認
参考記事にしたがって、起動していきます!
読むとるも起動せず…
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とかの設定が変わってしまったんでしょう…
このポートのところ、0.0.0.0:3030
ですよね。
以前はlocalhost:3030
だったんです…。
何が起きたんだろうw
解決!
パソコンのネットワークがパブリックの設定になっていました。
プライベートに設定しなおすと、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開発ツール
を使えるように試行錯誤します!
とりあえずデバッグしてみた
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
しなおしてみます。
真っ暗だけど開きました!
コンテナ内の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
しなおしてみます。
あhttp://192.168.0.19:19002/
でアクセスできました!
ありゃ~、もしかしたらyarn
のくだりは必要ないかもですね(笑)
ホットリロードはうまくいかなかった
ただし、ホットリロードうまくいかないので、実機でのリアルタイム確認はできなさそうです(;´・ω・)