Zenn
💬

ReactNativeで開発したandroidアプリをdeploygateで配布

2023/07/14に公開
React Native
tech

ReactNativeで開発をしていて、ビルドの仕方等に関する記事が少なく、苦戦したので、備忘録として。

前提

・react-native: 0.66.4
・Python 3.9.5
・node v16.15.1
・npm 8.19.2
・jdk version 11.0.15
・Windows
・社内利用のみで、ストアに公開したくないのでdeploygateで公開したい。

（以下、関係あるかよくわからないけど）
・buildToolsVersion = "30.0.2"
・minSdkVersion = 23
・compileSdkVersion = 31
・targetSdkVersion = 31

環境構築

このあたりの記事を参考に環境構築。

Chocolateyのインストール

コマンドプロンプトを管理者で実行し、下記を実行することでインストール。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

node のインストール

コマンドプロンプトを管理者で実行し、下記を実行。
公式ドキュメント によると、バージョンはltsで良い模様。
※0.68の記事を見たが、0.66もできた

choco install -y nodejs-lts

JDKのインストール

コマンドプロンプトを管理者で実行し、下記を実行。
この直前に試行錯誤していたときにopenJDKではない、jdkをインストールしてしまい、ビルド時にエラーが出た。
javaをいったんアンインストールし、programFiles内のjavaファイルを消し、パスを消したら解消した。

choco install -y openjdk11

Pythonのインストール

公式ドキュメントを見ると記載はないが、いろんな記事を見ると必要とあるので。
筆者はもともと別用途でいれていたので、そのまま使用。
Python 3.8.10, Python 3.9.5　はとりあえずできた。
インストールする場合はたぶん下記でできる。

choco install -y python3

Android Studioインストール

インストーラーを公式から入手してインストール。
ReactNative公式によると、
・Android SDK
・Android SDK Platform
・Android Virtual Device
・Hyper-V: Performance (Intel ® HAXM)
がいるらしい。
基本こちらの記事を参考に設定。
ただ、Intel ® HAXMとやらは、自分の端末(surfacelaptop4)ではエラーが起きてちゃんとインストールできなかった模様。
どうやら、HXAMは、テスト時にPC上で仮想デバイスを立ち上げた際に、高速化するためのものらしく、いったん無視して進めてみる。

SDKmangerでは、公式ドキュメントに従って、
SDK Platformsでは、Android11内の
・Android SDK Platform 30
・Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
を選択。
SDK Toolsでは、
Android SDK Build-Tools内で30.0.2
をチェックする。

と思いきや、ビルド時にエラーが出て、
・Android SDK Platform 31
も必要なようだったのでインストールする。うーん、よくわからない。

インストールしたら、
ユーザー環境変数に下記を設定する。
変数名：ANDROID_HOME
変数値：C:\Users\＜ユーザー名＞\AppData\Local\Android\Sdk
Pathには下記を追加
C:\Users\＜ユーザー名＞\AppData\Local\Android\Sdk\platform-tools
※デフォルトの場合

ついでに、システム環境変数に、
変数名：JAVA_HOME
変数値：C:\Program Files\OpenJDK\openjdk-11.0.15_10
と、
Pathに
C:\Program Files\OpenJDK\openjdk-11.0.15_10\bin
があることを一応確認。

ReactNativeCLIについて
記事によってはインストールしているが、公式によると不具合の原因になるので、アンインストールすべきとのこと。

コーディング

もともとEXPOで開発していたコードを使ってだいたいいけた。
ただ、EXPOのモジュールとかがあるので、一部入れ替えが必要だった。

npx react-native init [プロジェクト名]

でプロジェクトを作って開始。
git cloneでコピーした際は、npm installも実施。

動作確認

PC上の仮想端末でアプリを動かそうとすると、めちゃくちゃ遅くてうまくいかず。（Intel ® HAXMとやらが上手く入っていないせい？※後述）
なので、実機のAndroid端末をUSBで繋いで検証する方針に転換。
①Android端末側で開発者モード、USBデバッグを有効化（参考）
②USBで繋いで、アプリをいれているフォルダ直下で、

adb devices

これで、List of devices attachedという下に、IDが出てきたら、検証端末として認識されているのでOK。
③同じフォルダにて、

npx react-native run-android

すると、しばらくすると繋いだ端末側でアプリが起動。
アプリ自体がインストールされる模様。

ビルド

社内で使うだけで、ストア公開はしたくなかったので、
deploygateを使用して配布を行いたかった。
なので、最初はapkファイルを出力しようとした。（このときはapkファイルが必須だと思っていた・・・）
そこで、このあたりの記事を参考にして、

npx react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/build/generated/assets/react/debug/index.android.bundle --assets-dest ./android/app/build/res/react/debug

cd android

./gradlew assembleDebug

を実行。
その結果、、、
なんか一部のモジュールがエラー・・・。

いろいろ試行錯誤したり調べたりした結果、
deploygateへアップロードするのは、
apkファイルでなくても、aabファイルでもよいらしいことが判明。
どうやら、apkよりaabの方が新しい模様。。。（参考記事）

そこで、

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

cd android

./gradlew bundleDebug

を実行。

android/app/build/outputs/bundle/debug

フォルダ内に、app-debug.aabというファイルが生成。

これをdeploygateにアップロードした結果、、、

成功！！！他端末でもWeb経由でインストールが可能に！！！

バンザイ！

まとめ

これまでwebブラウザでの開発経験はあったけど、
ReactNativeだからjavascriptで書けるとはいえ、ネイティブは環境構築やらビルドやらが難しかった。。。
けど、ブラウザではできない、端末側の機能の制御っていう点でネイティブにしかできないところはあるんだなあ・・・と実感。

ReactNativeは、
Swiftとかネイティブの言語を知らないので、比較できないが、
これまでPHPとjavascript(Vue)を触っていた筆者にとっては、
Reactに関する知識は仕入れ直さないといかなかったが、
javascriptで書けるという点は、ネイティブアプリをつくるハードルを下げてくれました。

ただ、
・都度ライブラリを持ってこないといけない
・それらがビルドでエラーを起こしたり、、、
・日本語の記事が少ない
など
素人なりに、いろいろなネット記事でReactNativeが嫌われている理由がちょとわかったような気がしました。
とりあえず今回私は作りたい機能が少なかったので、Swift等をやるよりは渡しにとってはやりやすかったかな、と思います。

以上。

追記　仮想デバイスでの実行について

上記で、HXAMを無視した結果、仮想デバイスでの実行ができなかった。
後日、ちゃんと調べた結果、
こちらのサイトによると、HXAMはIntelのプロセッサが必要なようだが、筆者の使用しているPCはAMD Ryzen7というもののようで、そのため、HAXMは使えなかったことがわかった。
そこで上記のサイトに従って、

Microsoft の Hyper-V と Windows Hypervisor Platform (WHPX) 。 Hyper-V は Windows の仮想化技術の 1 つであり、物理的ホスト コンピューター上で、仮想化されたコンピューター システムを実行できます。

という手段をとることにした。「Hyper-V による高速化」というセクションを実行。
そのうえで、

npx react-native start

npx react-native run-android

を実行することで、仮想デバイスでもスムーズに利用することができるようになった。

Discussion