🔥

低コストにOTAを!Hot UpdaterをReact Nativeに導入しよう!

に公開

こんにちは!テラーノベルのフロントエンドエンジニアの@kazutoyoです!

AppCenter CodePushが2025年の3月に終了しましたが、みなさんは無事に移行が完了していますか?
https://learn.microsoft.com/ja-jp/appcenter/retirement

有名どころだとExpoのEAS Updateや最近ではCodeMagicがCodePushサーバーのホスティングを始めました。
https://docs.expo.dev/eas-update/introduction/
https://blog.codemagic.io/goodbye-app-center-hello-codemagic-jpn/

EAS Updateは機能的に豊富ですが、課金体系が従量課金のため、大規模なアプリケーションの場合にかなりの金額になってしまいます。
CodeMagicは年間プランの場合に無料で、従量課金プランは月額$99でCodePushサーバーをホスティングしてくれるため、わりと良心的に利用することができます。

ただ、個人で利用していた方は、今まで無料で使えていたCodePushサーバーが急に高額になってしまって困りましたよね…

そんなときにgronxb/hot-updaterを見つけました。
こちらはセルフホスト型で、Cloudflareや、Supabase、AWS S3など自分の好きなところにホスティングが可能です。
https://hot-updater.dev/

特に、Cloudflare Workers + R2を使った場合、R2のエグレス料金が無料なため、よほどの大規模でない限りほぼ無料で利用することが出来ます。

Hot Updaterの特徴と機能

プラグインシステム

Hot Updaterはプラグインシステムがあり、自分の環境に合ったものを選択、また必要があれば自作することが可能です。

  • ビルドプラグイン
    • React Nativeのコードをビルドして、JSやアセットのバンドルを作成する
      • @hot-updater/bare : 通常のReact Native(Metro) でのバンドルを行う
      • @hot-updater/expo : Expoでのバンドル
  • ストレージプラグイン
    • ビルドされたバンドルをサービスプロバイダへアップロードなど管理する
      • @hot-updater/supabase : Supabase
      • @hot-updater/cloudflare : Cloudflare R2
      • @hot-updater/aws : AWS S3
      • @hot-updater/firebase : Firebase Storage
  • データベースプラグイン
    • 更新の確認に必要なメタデータを保存する
      • @hot-updater/supabase : Supabase
      • @hot-updater/aws : AWS S3
      • @hot-updater/cloudflare : Cloudflare D1
      • @hot-updater/firebase : Firestore

Webコンソール

Webコンソールでデプロイされたバージョンの管理することができます。
現状は以下の機能をWebコンソールで利用でき、Webコンソールはセキュリティ上の理由からローカルでのみ実行が可能です

  • ロールバック
  • 強制更新フラグ
  • ビルドされたバージョンのgitのコミットの確認

https://hot-updater.dev/docs/guides/console

Fingerprint

React Nativeで開発されたアプリケーションは、OS上で直接動作する「ネイティブアプリ」の層と、JavaScriptで書かれた「JS Bundle」の層から構成されます。
このネイティブアプリ層とJS Bundle層は互換性を維持すること必要です。

例えば、バージョン1.0のアプリに、バージョン1.1で追加したReact Native FirebaseなどネイティブのSDKを利用するライブラリが含まれるJS BundleがOTAアップデートを行った場合、バージョン1.0にはReact Native Firebaseがネイティブアプリに含まれていないためクラッシュなど不具合が発生します。

このJS Bundleとネイティブアプリの互換性があるかは、Expoの@expo/fingerprintによって、チェックすることが可能です。
https://hot-updater.dev/docs/guides/update-strategies/fingerprint

Hot Updaterはこの @expo/fingerprint を利用し、OTAアップデート時を安全に行うことが出来ます。

Channel

チャンネル機能を利用し、production/staging/devなど環境や配信したいグループなどを設定することが可能です。

https://hot-updater.dev/docs/guides/channel-management

Sentry/Datadogなどログ収集ツールへの対応

Sentry/Datadogプラグインにより、バンドルのビルド時にSentryへ自動的にSourcemapを送信します。
https://hot-updater.dev/docs/integration-plugins/sentry
https://hot-updater.dev/docs/integration-plugins/datadog

導入時の注意点とデメリット

Hot Updaterは魅力的な選択肢ですが、導入前に以下の点を考慮する必要があります。

セルフホストの運用責任

EAS UpdateやCodeMagicのようなフルマネージドサービスとは異なり、インフラの運用・監視はすべて自分で行う必要があります。

  • サーバーの稼働状況の監視
  • エラーが発生した際のトラブルシューティング
  • セキュリティアップデートの適用

開発段階のプロダクト

記事執筆時点でバージョン0.24と、まだ正式リリース(v1.0)には達していません。

  • APIの変更が発生する可能性
  • ドキュメントが不十分な箇所がある可能性
  • 予期しないバグに遭遇するリスク

本番環境での採用を検討する場合は、まず開発環境やステージング環境で十分にテストを行うことをおすすめします。

まとめ

Hot Updaterを使うことで、React NativeのOTAをセルフホストすることが可能になりました。
EAS Updateより手軽さはないですが、多くのユーザーを抱えるサービスでは大きくコストを削減することができそうです。

開発も活発に行われて機能も多く追加されているので、今後に期待したいですね。

それでは良いReact Nativeライフを!

テラーノベル テックブログ

Discussion