やりたいこと
- WSL上で作成したReact Nativeプロジェクトを、Windows側のエミュレータで動作させる。
- 実機（Androidスマホ）でも動作させる。
この記事で書いていないこと
- Mac、iOS環境での話
- EAS Build関連の話
環境
Windows 11
WSL2（Ubuntu 24.04.1）
Windows側設定
Android Studio
使用バージョン：Android Studio Ladybug(2024.2.1-Patch2)
SDK Manager
SDK Managerにて必要なものをインストール。デフォルト選択に加えてAndroid SDK Command-line Toolsを選択した結果、以下のようになってました。
SDK Platformsタブ
-
Android 14.0 ("UpsideeDownCake")
- Android SDK Platform 34
- Sources for Android 34
SDK Toolsタブ
-
Android SDK BUild-Tools36-rc1
- 35.0.0
- 34.0.0
-
Android SDK Command-line Tools (latest)
- Android SDK Command-line Tools (latest)
- Android Emulator
- Android Emulator hypevisor driver (installer)
- Android SDK Platform-Tools
AVD作成
AVDを適当に作成。今回はPixel_6aで作成しました。
パス設定
%USERPROFILE%\AppData\Local\Android\Sdk\platform-tools にパスを通します。
Androidエミュレータ起動
エミュレータを起動します。バッチとか作っておくと楽かも。
# AVDの名前確認
%USERPROFILE%\AppData\Local\Android\Sdk\cmdline-tools\latest\bin\avdmanager.bat list avd
# ↑で表示されたNameの部分を[Name]に入れて、エミュレータ起動
# メモリ指定してないと固まったので指定したほうが良いのかも
%USERPROFILE%\AppData\Local\Android\Sdk\emulator\emulator.exe "@[Name]" -memory 4096
WSL側準備
node.jsとJDKが必要です。
node.js
$ node -v
v22.11.0
JDK
$ java -version
openjdk version "21.0.5" 2024-10-15 LTS
OpenJDK Runtime Environment Temurin-21.0.5+11 (build 21.0.5+11-LTS)
OpenJDK 64-Bit Server VM Temurin-21.0.5+11 (build 21.0.5+11-LTS, mixed mode, sharing)
コマンドラインツール ～ SDK Manager 設定
https://developer.android.com/studio#command-line-tools-only
このページの下のほうにある、「コマンドラインツールのみ」のLinux用のリンクをクリック。
利用規約が出てくるので、同意をチェック。ダウンロードボタンが有効になるので、ここからURLを取得する。
zipを取得して展開する。
# コマンドラインツールの取得
~$ wget https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip
# 展開
~$ unzip commandlinetools-linux-11076708_latest.zip -d Android
# 展開したらzipは削除
~$ rm -rf commandlinetools-linux-11076708_latest.zip
#ディレクトリ構成を変更
~$ cd Android
~/Android$ mv cmdline-tools latest
~/Android$ mkdir cmdline-tools
~/Android$ mv latest cmdline-tools/
SDK Managerで必要なパッケージをインストールする。
$ cd ~/Android/cmdline-tools/latest/bin/
$ ./sdkmanager --install "platform-tools" "platforms;android-34" "build-tools;34.0.0"
$ ./sdkmanager --update
$ ls ~/Android
build-tools cmdline-tools licenses platform-tools platforms
Windows側adbを使うように変更する。
$ cd ~/Android/platform-tools
$ mv adb adb2
$ ln -s /mnt/c/Users/<username>/AppData/Local/Android/Sdk/platform-tools/adb.exe adb
~/.bashrcに以下を追記して反映します。
# Android用設定
export ANDROID_HOME=$HOME/Android
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
エミュレータで動作確認
プロジェクト作成
create-expo-appで作成します。TypeScriptを使いたいので--templateで指定しています。作成完了まで少し時間がかかります。Your project is ready!のメッセージが表示されればOKです。
$ npx create-expo-app@latest wsl-sample-app --template blank-typescript
アプリ実行
WindowsのVSCodeでWSL上のプロジェクトを開き、実行します。
$ cd wsl-sample-app
$ npm run android
Windows側で起動しているエミュレータにExpo Goがインストールされ、無事アプリが起動しました。
少し編集してみます。
import { StatusBar } from 'expo-status-bar';
import { Pressable, StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Pressable style={({ pressed }) => [
{ opacity: pressed ? 0.5 : 1.0 }
]}
onPress={() => alert('Hello world!!')}
>
<Text>Press</Text>
</Pressable>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
ホットリロードも効いてるようです。
実機で動作確認
前提
- Android端末とWindowsは同ネットワーク。
- Android端末にPlayストアからExpo Goをインストールしておく。
方針
npm start するとQRコードが表示されます。こちらをAndroid端末のExpo Goアプリからカメラで読み込むと本来は起動できるのですが、今回の場合、WSL側のIPアドレスに向けて接続を試みようとしてしまうため、直接接続はできない状態になっています。
この接続先をWindows側のIPアドレスに変更し、Windowsでポートフォワーディングしてやることで、Android → Windows → WSL という流れにします（--tunnelオプションという手もありますが、今回は使いません）
ポートフォワーディング設定
WindowsでPowerShellを管理者権限で起動し、以下コマンドを実行します（IPアドレスやポートは適宜読み替えてください）
# 転送設定を追加
netsh interface portproxy add v4tov4 listenport=8081 listenaddress=0.0.0.0 connectport=8081 connectaddress=WSL側(Ubuntu)のIPアドレス};
# 確認
netsh interface portproxy show all
ファイアウォール設定
続いて、ファイアウォールを設定します。
# 受信の規則に、ポート指定での許可設定を追加
New-NetFireWallRule -DisplayName 'WSL Rule' -Direction Inbound -LocalPort 8081 -Action Allow -Protocol TCP
# 確認
Get-NetFirewallRule -DisplayName 'WSL Rule'
誤って設定した時などは以下コマンドで削除可能です。
# ポートフォワーディング設定削除時
netsh interface portproxy delete v4tov4 listenport=8081 listenaddress=0.0.0.0
# ファイアウォールルール削除
Remove-NetFireWallRule -DisplayName 'WSL Rule' -Direction Inbound -LocalPort 8081 -Action Allow -Protocol TCP
動作確認
上記設定後、Android端末のExpo Goで、QRコードは読み込まずにWindowsのIPアドレス（exp://192.168.x.xx:8081等）を直接指定することで、アプリが起動します。
おわりに
React Native、楽しいのでぜひ触ってみてください！
参考リンク