こんにちは!かたつむり(@Katatumuri_nyan)です!
Reactを触ってみて、サイト的なものは作れるようになりました(*´ω`)
そこで、次はReactNativeを触ってみようと思い、簡単なテキストエディタを作成しようと企んでおります(笑)
DockerでReact Nativeを開発すると、ホットリロードが効きません。
一応代替え作もあるのですが…
あまりにもリロードが遅すぎるので、WSLで環境構築しなおします!
最初から見る↓
【1】React Nativeでテキストエディタを作ってみる!【下調べ編】
前回を見る↓
【3】React Nativeでテキストエディタを作ってみる!【右往左往編】
Windows+DockerDesktopでのReact Native+Expoでは、仕様上ホットリロード効かないことが分かったので、WSLを使って環境構築をしていきます!
(ホストマシンに環境構築しないのは、ただのこだわり。)
DockerでReact Native環境作成から、Expo Clientで実機確認するまで
↑こちらの方が↓のような記事も書いてくださってるので、参考に環境構築していきます!
WSLでReact Native + Expo環境を作ろう
目次
WSLのインストール
とりあえず、WSLが必要なので、インストールします。
WSLをインストールする
↑こちらを参考にインストールしていきます!
(どこかでDockerとWSLの違いとかそれぞれメリデメとか調べなきゃデスね。)
WSL2の方が新しいみたいなので、WSL2をインストールします。
ついでにリポジトリを新しくしました。(前回Editorのつづり間違ってた(〃ノωノ)w)
なじみのUbuntuにしました~!
> WslRegisterDistribution failed with error: 0xc03a001a
なぜ…
failed with error: 0xc03a001a で失敗するときの対処法
↑こちらを参考に直していきます!
無事起動・ログインできました(*´ω`)
Ubunto久しぶりで嬉しい~(普段Dockerで使っているけどなんとなくw)
Node.jsのインストール
Windows に WSL を使って Node 環境を構築する
↑こちらを参考にインストールしていきます!
ReactNative+Expo環境構築
やっとここまできました!
WSLでReact Native + Expo環境を作ろう
疑問メモ
ここでちょっと疑問:VScodeでコード編集できるんだろうか…?
VSCodeをWSLで使用する設定
↑でいけるっぽい。試してみよう。
いけたけど、せっかくつくったリポジトリ…はどうなるのかなw
うまくいきました~!
sourcetreeにも作業ディレクトリ登録できたので、いい感じですね。
環境変数の設定がよくわからない
~/.profile
ってどこ?って思ったので、探してみました。
ubuntuを起動すると最初に表示される画面で、ls -a
と打ってみます。
.profile
あった!!!
ここに環境変数を追加します。が、開き方が分からん。。。
vim .profile
でとりあえず開いてみました。
vimで編集できました。Vim初心者に捧ぐ実践的入門
でも、実機で開けません(´;ω;`)
netstat -nao | find "19000"
で確認すると、ほかのプロセスとは被ってないみたいでした。
ファイアウォール切ってみましたが特に何も起こらず。
とりあえずTunnelモードで使ってみることにしたら、開けました!
ホットリロードも効くので、実機確認できたあ良かった(*´ω`)
Android Studioのインストール
WSLでReact Native + Expo環境を作ろう
↑こちらを参考にインストールしていきます。
環境変数の追加
Windows10でTempやPathなどの環境変数を設定する方法
Windowsの環境パスを通す(path)
↑こちらを参考に追加していきます。コントロールパネルから行いました。
うまくいかないので、↓。
[Android] adb コマンドを利用するために PATHを切る、PATHを通す
これでいけました!PATHの最後に\が足りなかったみたいですね。
Android Studioでのシミュレーション
Couldn't start project on Android: No Android connected device found, and no emulators could be started automatically. Please connect a device or create an emulator (https://docs.expo.io/workflow/android-studio-emulator). Then follow the instructions here to enable USB debugging: https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select "Use custom Android SDK tools", and point it at your Android SDK directory.
できませんwww
なんで?
WSL2のadbコマンドでWindowsホストのadb-serverに接続する
↑を参考にやってみます。
Using the Android emulator on Windows 10 with WSL2
↑を見ながらubuntu用のAndroid SDK / platform-tools をインストール
sudo apt install openjdk-8-jdk wget https://dl.google.com/android/repository/sdk-tools-linux-4333796.zip unzip sdk-tools-linux-4333796.zip
unzip
がないので入れます。sudo apt install unzip
unzip sdk-tools-linux-4333796.zip mv tools android-sdk-tools cd android-sdk-tools sdkmanager "system-images;android-28;google_apis_playstore;x86_64" "build-tools;28.0.3" "platforms;android-28" --sdk_root="$ANDROID_SDK_ROOT" sdkmanager "platform-tools" --sdk_root="$ANDROID_SDK_ROOT" sdkmanager --licenses
sdkmanager
入ってない😢
SDKToolsだけでコマンドラインからエミュレータを設定 起動
これみたら、Command line toolsだけダウンロードできるらしいので、やってみます。
同じディレクトリで
wget https://dl.google.com/android/repository/commandlinetools-win-7302050_latest.zip unzip commandlinetools-win-7302050_latest.zip
cmdline-tools
が増えました。
なんか使えないwww
sdkmanager: command not found
解凍からやり直します。ubuntuも再起動したもののできないので、、、。
あ、パスが通ってないだけかもしれない!
カレントディレクトリのスクリプト実行で「Command not found」と表示される
sdkmanager
の存在するディレクトリで./
をつけて実行したらできたので、パスの問題ですね。
bin/
つけてやってみます。
cd android-sdk-tools bin/sdkmanager "system-images;android-28;google_apis_playstore;x86_64" "build-tools;28.0.3" "platforms;android-28" --sdk_root="$ANDROID_SDK_ROOT" bin/sdkmanager "platform-tools" --sdk_root="$ANDROID_SDK_ROOT" bin/sdkmanager --licenses touch ~/.android/repositories.cfg cd ~/.android/platform-tools
むむむ。bash: cd: /home/mymai/.android/platform-tools: No such file or directory
たしかにない。
rootに入っていましたw
ファイル移動させますw
mv build-tools licenses platform-tools tools emulator patcher platforms system-images .android
もう一度以下を試します。abd
使えなかったので./adb
で
cd ~/.android/platform-tools ./adb --version ./adb kill-server ./adb devices
できたので、.profile
に以下を追記
# JDK if [[ -e /usr/lib/jvm/java-8-openjdk-amd64 ]]; then export JAVA_HOME="/usr/lib/jvm/java-8-openjdk-amd64" export PATH="$PATH:$JAVA_HOME/bin" fi # Android tools if [[ -e $HOME/android-sdk-tools ]]; then export PATH="$HOME/android-sdk-tools:$HOME/android-sdk-tools/bin:$PATH" export PATH="$HOME/.android/platform-tools:$PATH" export ANDROID_HOME="$HOME/.android" export ANDROID_SDK_ROOT="$HOME/.android" export REPO_OS_OVERRIDE="linux" adb kill-server 2> /dev/null export ADB_SERVER_SOCKET=tcp:$(cat /etc/resolv.conf | grep nameserver | cut -d' ' -f2):5037 fi
ubuntu再起動。
WSL2でのADBの使用も参考に↓
start-adb.ps1という名前でWindows上に保存する(リンク先にコードあります。)
$adbPath は “C:\Users\ユーザー名\AppData\Local\Android\Sdk\platform-tools”
あとは、
【PowerShell】PowerShellを管理者権限で実行したい!ソースの先頭に埋め込むだけで自動で管理者権限に昇格するスクリプト!
↑を参考に、冒頭に以下を追加します。
if (!([Security.Principal.WindowsPrincipal][Security.Principal.WindowsIdentity]::GetCurrent()).IsInRole("Administrators")) { Start-Process powershell.exe "-File `"$PSCommandPath`"" -Verb RunAs; exit }
start-adb.ps1
を右クリックして、PowerShellで実行
を押す。
うーん。いけない。
パソコンごと再起動してみます。
3.Expoサーバを起動し、Expo DevTools(localhost:19002)の「Run on Android device/emulator」を選択すると以下のエラーが出ます。
Couldn't start project on Android: adb W 06-30 18:23:15 678 678 network.cpp:149] failed to connect to '172.25.112.1:5037': Connection timed out * cannot start server on remote host error: cannot connect to daemon at tcp:172.25.112.1:5037: failed to connect to '172.25.112.1:5037': Connection timed out
# JDK if [[ -e /usr/lib/jvm/java-8-openjdk-amd64 ]]; then export JAVA_HOME="/usr/lib/jvm/java-8-openjdk-amd64" export PATH="$PATH:$JAVA_HOME/bin" fi # Android tools if [[ -e $HOME/android-sdk-tools ]]; then export PATH="$HOME/android-sdk-tools:$HOME/android-sdk-tools/bin:$PATH" export PATH="$HOME/.android/platform-tools:$PATH" export ANDROID_HOME="$HOME/.android" export ANDROID_SDK_ROOT="$HOME/.android" export REPO_OS_OVERRIDE="linux" adb kill-server 2> /dev/null export ADB_SERVER_SOCKET=tcp:$(cat /etc/resolv.conf | grep nameserver | cut -d' ' -f2):5037 fi
↑これ、export ADB_SERVER_SOCKET=tcp:$(cat /etc/resolv.conf | grep nameserver | cut -d' ' -f2):5037
だけでいい気が。
.profile
を編集してsource ~/.profile
関係なかったし、必要でした。
たぶんだけど、ポートの設定がうまくいっていないらしい。
source ~/.profile
でadb kill-server 2> /dev/null
までしか読み込まれていない。
WindowsとWSLのadb
んpバージョンが違うとうまくいかないみたいだけど、同じでした。
adb -a nodaemon server start
~~~ためしにWindows側でadb kill-server
するとcannot connect to daemon at tcp:5037: cannot connect to 127.0.0.1:5037: 対象のコンピューターによって拒否されたため、接続できませんでした。 (10061)
と出ました。~~~
~~~「対象のコンピューターによって拒否されたため、接続できませんでした」VisualStudioのclient.Connectのlocalhost 80でエラー出たときの対処法~~~
~~~↑を参考に、「Windows Communication Foundation HTTP アクティブ化」「Windows Communication Foundation 非HTTP アクティブ化」にチェックを入れました。~~~
ubuntu再起動。
adb.exe devices
ならできそう!ということは…
↑の長いの消して、.bashrc
に以下を追加
alias adb='adb.exe'
もダメ。
ADB tool in WSL cannot identify device solution
↑より↓
sudo apt-get update && sudo apt-get install android-tools-adb
WindowsとWSLのadbが一緒のバージョンじゃないといけないらしいので、
sudo cp adb /usr/lib/android-sdk/platform-tools/adb -i
で前の方でインストールしていたadbを今インストールしたadbに上書きしました。
export ADB_SERVER_SOCKET=tcp:$(cat /etc/resolv.conf | grep nameserver | cut -d' ' -f2):5037
を.profile
に追記
できない\(^o^)/オワタ
AndroidデバイスでのUSBデバッグの有効化
ReactNative-EXPOでAndroidエミュレータでアプリ起動するまでにはまったところ
AndroidデバイスでのUSBデバッグの有効化
できない!!!
socatのインストール
Building a react native app in WSL2
↑より。sudo apt-get install socat
socat -d -d TCP-LISTEN:5037,reuseaddr,fork TCP:$(cat /etc/resolv.conf | tail -n1 | cut -d " " -f 2):5037
手順にそって、ファイアウォール設定しなおすとつなげた!
でもエラーが出る😢
Couldn't start project on Android: could not connect to TCP port 5554: Connection refused
TCPポートに接続できませんでした:WSL2のAndroidエミュレーターでExpoアプリを開こうとすると接続が拒否されました
↑を見ながらPowerShellでSet-NetFirewallProfile -DisabledInterfaceAliases "vEthernet (WSL)"
(管理者権限で実行)
$WSL_CLIENT = bash.exe -c "ip addr show eth0 | grep -oP '(?<=inets)d+(.d+){3}'"; $WSL_CLIENT -match 'd{1,3}.d{1,3}.d{1,3}.d{1,3}'; $WSL_CLIENT = $matches[0]; iex "netsh interface portproxy add v4tov4 listenport=5554 listenaddress=127.0.0.1 connectport=5554 connectaddress=$WSL_CLIENT"
できないのでパソコンごと再起動。
ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}'
iex "netsh interface portproxy delete v4tov4 listenport=8081 listenaddress=127.0.0.1" | out-null; $WSL_CLIENT = bash.exe -c "ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}'"; $WSL_CLIENT -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}'; $WSL_CLIENT = $matches[0]; iex "netsh interface portproxy add v4tov4 listenport=8081 listenaddress=127.0.0.1 connectport=8081 connectaddress=$WSL_CLIENT"
androidエミュレーターでの確認は無理でした!!!\(^o^)/オワタ
もうiPadだけでいいや!
!
Androidでプロジェクトを開始できませんでした:TCPポート5580に接続できませんでした:127.0.0.1:5580に接続できません:
.expo
削除して見ましただめだ!
[WSL 2] NIC Bridge mode (Has TCP Workaround🔨)
↑よりPowerShellのタスクを使ってみる。
できない
そもそもLANでExpoに接続できないのが原因では?
wsl2でsshサーバを起動し、外部からそこに接続
↑よりPowerShellでポートフォワードnetsh.exe interface portproxy add v4tov4 listenaddress=localhost listenport=19000 connectaddress=127.0.1.1 connectport=19000
できぬ!
Windows WSL2に外部から直接アクセスするための設定
これもできないなぁ
ipv4 をリッスンする: ipv4 に接続する: Address Port Address Port --------------- ---------- --------------- ---------- 0.0.0.0 19000 127.0.0.1 19000 * 19000 192.168.0.19 19000 localhost 19000 127.0.1.1 19000
iex "netsh interface portproxy add v4tov4 listenport=5554 listenaddress=127.0.0.1 connectport=5554 connectaddress=172.22.185.61" iex "netsh interface portproxy add v4tov4 listenport=5037 listenaddress=127.0.0.1 connectport=5037 connectaddress=172.22.185.61" iex "netsh interface portproxy add v4tov4 listenport=5037 listenaddress=127.0.0.1 connectport=5037 connectaddress=172.22.176.1"
てかてか、ポートフォワードとかリッスンとかコネクトとか分からないw
ポートフォワード
うーん…
WSL2 環境で Windows 側の adb.exe を使うといろいろ楽
↑これやってみよう
/usr/bin
にadbがあったので、削除して/usr/bin
で↓
sudo ln -s /mnt/c/Users/mymai/AppData/Local/Android/Sdk/platform-tools/adb.exe adb
cd /usr/lib/android-sdk/platform-tools/ sudo rm adb
もしました。
あ、Expo側でRun on Android device/emulator
選択すると、Expoクライアントをandroidの仮想デバイスにインストールするのははいけました!
めっちゃ簡単だった!
しかし以下のエラーが…
192.168.0.19:19000
にLAN接続できないので、しょうがないですね。
tunnel
にしてみます。
もう一度Run on Android device/emulator
!!!!
いけた!!!!!!
やった!!!!!!
長かったwww
原因はあまりよくわかりませんが…
おそらくポートの解放問題と、adbの設定の仕方ですね。
Windows側のadbとWSL2側のadbの兼ね合いというか…
WSL2側でadbがうまく使えないので、Windows側のadbを使ったらうまくいったって言う話に落ち着きました。
あとLANがうまく使えないので、tuunelで行けたということですね。
よかったw
パソコンごと再起動すると、tuunelが使えなくなりました😢
なんでや…
Tunnel URL not found (it might not be ready yet), falling back to LAN URL. Error starting tunnel protocol fault (couldn't read status): connection reset
ポートプロキシの設定いじってたのがダメだったみたい。PowerShellで管理者権限でnetsh int portproxy reset all
したらいけました。
ちなみに、最初のandroidにクライアントをExpoインストールする時は、LAN
、そのあとの接続はtunnel
でできます。
Pixel Xにしてみてもできました!
これで、AndroidStudio、iPhone、iPadでの確認ができるー!
しかも、ホットリロードも効くようになりました(*´ω`)(Dockerの時より早い)
LANの方がホットリロード速いらしいけど、ちょっとLANはあきらめてもよさそう!
これでやっと環境構築完了です!お疲れ様でした!ここからが本題です(*´ω`)
↓続き
【5】React Nativeでテキストエディタを作ってみる!【テキストエリア作成編】