React Native Tech Blog

supported by maricuru (旧maricuru tech blogです)

【React Native】【Expo】iOS/Android ストア申請用のビルドを作る

Expo ReactNative

こんにちは、maricuruのワダ(@takahi5)です。
寒さに比例して南国に行きたい欲が高まってきております🏖

さて、弊社アプリはExpoで作っていますが、たまに
「Expoで作ったアプリってストアに公開できるの？」
と聞かれることがあります。

もちろんストアに公開できます！

むしろストア公開のステップが大幅に軽減されるのがExpoのメリットだったりします。

  • XCodeでのビルド不要
  • Android Studioでのビルド不要
  • iOSのプロビジョニングとかの管理不要
  • pushのトークンとかの管理も不要

などなど驚きのメリットがあります。

f:id:wasan:20181025124259j:plain

ストア申請用とExpoクライアントアプリの違い

Expoで普段開発しているとExpoクライアントアプリを使うと思います。
QRコードとかで起動できるやつです。

ストアに申請するときには、これとは異なり申請用のビルドを作ることになります。
iOSならipaファイル、 androidならapkファイルですね。

ストア申請用のビルドの作り方

基本的には↓に書いてあります。
Building Standalone Apps - Expo Documentation

要所を説明したいと思います。

app.jsonの設定

bundleIndentifer, packageはitune connect や google play consoleで作成したものを指定しましょう。
buildNumberやversionCodeはビルドを申請するたびにインクリメントする番号です。

 {
   "expo": {
    "name": "Your App Name",
    "icon": "./path/to/your/app-icon.png",
    "version": "1.0.0",
    "slug": "your-app-slug",
    "sdkVersion": "XX.0.0",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourappname",
      "buildNumber": "1",
    },
    "android": {
      "package": "com.yourcompany.yourappname",
      "versionCode": 1,
    }
   }
 }

ビルドする

expo build:ios
expo build:android

でそれぞれビルドできます。

初回のビルドのときは、クレデンシャルなどを自分でアップロードするか、Expoに管理をおまかせするか、などを聞かれます。

僕はExpoにお任せするのをオススメします。 楽ちんなのでｗ
その場合、Apple IDやパスワードを聞かれます。

その後、Expoサーバー側でビルドが始まります。しばらく時間がかかります。

以下のようなメッセージが表示され、ビルド状況をモニタリングするURLが表示されます。
気になる場合はこのURLを覗いてみてもよいでしょう。

Building...
Build started, it may take a few minutes to complete.
You can monitor the build at https://expo.io/builds/07e11983-2649-4a93-a507-b9dc7a8927f8

そしてビルドが完成すると以下のように、ダウンロードURLが表示されます。

Successfully built standalone app: https://expo.io/artifacts/xxxxxx-xxxxxxxx-xxxxxxxx

このURLをブラウザで開くと、ipaファイルなりapkファイルをダウンロードできます。

ビルドをストアにアップロードする

androidの方はapkをgoogle play consoleのウェブサイト上でアップロードすればよいです。

iOSのほうはちょっと面倒で、ipaファイルをitune connectにアップロードするためには、
Application Loaderというアプリでアップロードします。

選択ボタンをクリックして先ほどのipaファイルを選ぶだけです。 f:id:wasan:20181023231536j:plain:w300

ビルドをアップロードできたら、あとは普通にitune connectで申請すればOKです！

更新ビルドを作るとき

app.jsonの

  • version
  • ios.buildNumber
  • android.versionCode

を変更して、あとは上記と同じ手順になります！