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

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

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

DockerでReact Nativeを開発すると、ホットリロードが効きません。
一応代替え作もあるのですが…
あまりにもリロードが遅すぎるので、WSLで環境構築しなおします!

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

前回を見る↓
【3】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にしました~!

picture 1

picture 2

> WslRegisterDistribution failed with error: 0xc03a001a

なぜ…

failed with error: 0xc03a001a で失敗するときの対処法
↑こちらを参考に直していきます!

無事起動・ログインできました(*´ω`)

picture 3

Ubunto久しぶりで嬉しい~(普段Dockerで使っているけどなんとなくw)

Node.jsのインストール

Windows に WSL を使って Node 環境を構築する
↑こちらを参考にインストールしていきます!

ReactNative+Expo環境構築

やっとここまできました!
WSLでReact Native + Expo環境を作ろう

疑問メモ

ここでちょっと疑問:VScodeでコード編集できるんだろうか…?
VSCodeをWSLで使用する設定
↑でいけるっぽい。試してみよう。

いけたけど、せっかくつくったリポジトリ…はどうなるのかなw

うまくいきました~!
sourcetreeにも作業ディレクトリ登録できたので、いい感じですね。

環境変数の設定がよくわからない

~/.profileってどこ?って思ったので、探してみました。

ubuntuを起動すると最初に表示される画面で、ls -aと打ってみます。

picture 4

.profileあった!!!

ここに環境変数を追加します。が、開き方が分からん。。。

vim .profileでとりあえず開いてみました。
vimで編集できました。Vim初心者に捧ぐ実践的入門

でも、実機で開けません(´;ω;`)

netstat -nao | find "19000"で確認すると、ほかのプロセスとは被ってないみたいでした。

ファイアウォール切ってみましたが特に何も起こらず。

picture 5

とりあえず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

picture 1

ファイル移動させます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 ~/.profileadb kill-server 2> /dev/nullまでしか読み込まれていない。

picture 1

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デバッグの有効化
picture 1

picture 2

picture 5

picture 7

picture 6

picture 8

できない!!!

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の仮想デバイスにインストールするのははいけました!
めっちゃ簡単だった!

しかし以下のエラーが…

picture 1

192.168.0.19:19000にLAN接続できないので、しょうがないですね。
tunnelにしてみます。

もう一度Run on Android device/emulator!!!!
いけた!!!!!!
やった!!!!!!

picture 2

長かった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でできます。

picture 1

Pixel Xにしてみてもできました!

これで、AndroidStudio、iPhone、iPadでの確認ができるー!
しかも、ホットリロードも効くようになりました(*´ω`)(Dockerの時より早い)
LANの方がホットリロード速いらしいけど、ちょっとLANはあきらめてもよさそう!

これでやっと環境構築完了です!お疲れ様でした!ここからが本題です(*´ω`)

↓続き
【5】React Nativeでテキストエディタを作ってみる!【テキストエリア作成編】【5】React Nativeでテキストエディタを作ってみる!【テキストエリア作成編】

コメントを残す

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