Zenn
😾

PayWallがクラッシュするときに真っ先に疑うこと【RevenueCat × EAS Build × React Native】

に公開
React Native
Expo
RevenueCat
Cursor
bolt.new
tech

こんにちは、ワニかず@40歳 出戻りエンジニアです。

RevenueCatのPayWall表示が
EAS Buildを使ったビルドモジュールでクラッシュして表示されない！

という現象が発生し、2日ほど時間を溶かしてしまいました。
私のような被害者が出ないよう、
記憶が鮮明なうちに、解決までの詳細をまとめたいと思います。

結論

EAS Buildで.envファイルが見えず、Revenuecatの「Public API key」が読めなかった
というのが原因でした。

EAS Buildとは？

EAS Buildは、人気のあるクロスプラットフォーム開発フレームワークである Expo が提供する、クラウドベースのビルドサービスです。アプリケーションのソースコードをクラウド上でiOSやAndroidのネイティブバイナリ（IPAやAPK/AABファイル）に変換してくれます。

今回、私は、Bolt.newで生成したコードを、ダウンロードしてCursorで開き、Expoを使ってReact Nativeアプリの開発を進めていました。

そして、リリース用のビルドをするためにEAS Buildを使った、という流れです。

ビルドする際は、Cursorなどのターミナルで

eas build --platform ios --profile production

を実行することで、EAS Buildを実行することができます。

.envファイルとは？

.envファイルは、環境変数（Environment Variables）を定義するためのプレーンテキストファイルです。環境変数とは、アプリケーションの動作に影響を与える設定値のことで、アプリケーションのコードとは別に管理されます。

今回、私は.envファイルに

EXPO_PUBLIC_REVENUECAT_IOS_KEY=xxxxxxxxxxxxxxx

というように、
Revenuecatの「Public API key」を設定をしていました。

Revenuecatの「Public API key」とは？

RevenuecatのPayWallを表示するときに必要なキーで、ReactNativeの場合、

await Purchases.configure({ apiKey: REVENUECAT_API_KEY });

というように初期処理でキーを指定します。

何が起きた？

EAS Buildを実行すると、ソースコードがExpoのサーバーにアップロードされてビルドが実行されます。しかし、セキュリティ上の理由から .env ファイルはアップロードの対象に含まれません。（通常、.gitignore でGitの管理対象外に設定されているためです。）

その結果、ビルドサーバー上にはRevenuecatの「Public API key」の情報が存在しないため、undefined となります。APIキーなしでRevenueCatの初期化が行われようとし、それが失敗してPayWall表示の際にクラッシュを引き起こしていた、という流れです。

対策

EAS Buildを使うのをやめて、
XCodeでのビルドに変更して今回は対応しました。

というのも、
EAS SecretsにAPIキーを登録する
という方法もあるようなのですが、

EAS Buildは無料プランだと回数制限が有り、その回数制限に引っかかり、XCodeでのビルドに切り替えました。

するとPayWallのクラッシュが起きず違いを比較したところ、EAS Buildで、.envファイルが見えていない、ということが判明する、という流れでした。

XCodeでのビルドの流れ

  1. XCodeのプロジェクトファイルを開く

Bolt.newからダウンロードしてきたプロジェクトフォルダのルートで

npx expo prebuild --clean

を実行すると、プロジェクトのルートにios/*.xcworkspaceというXCodeのプロジェクトファイルが作成されるため、それをダブルクリック。

  1. XCodeが開いたら、左のメニューをクリック

  2. 「Signing & Capabilities」→「All」をクリック

  3. Teamが「none」になっていると思うので、自分のアカウントを選択する

  4. Product→Archiveをクリック

  5. 正常終了すると、以下の画面が出るので「Distribute App」でApp Store Connectにアップ

おしまいに

開発期間が空くと、絶対忘れているのでまとめてみました。

Discussion