【18】React Nativeでテキストエディタを作ってみる！【デプロイ編】

SHARE

こんにちは！かたつむり(@Katatumuri_nyan)です！

Reactを触ってみて、サイト的なものは作れるようになりました(*´ω｀)
そこで、次はReactNativeを触ってみようと思い、簡単なテキストエディタを作成しようと企んでおります(笑)

アプリの機能としては十分できてきたと思うので、これからビルド・デプロイ・公開申請をしていきます！

GitHubでソースコードを管理しています！

最初から見る↓
【1】React Nativeでテキストエディタを作ってみる！【下調べ編】【1】React Nativeでテキストエディタを作ってみる！【下調べ編】

前回を見る↓
【17】React Nativeでテキストエディタを作ってみる！【細かい修正編】【17】React Nativeでテキストエディタを作ってみる！【細かい修正編】

環境

  • React Native
  • Expo
  • windows 10

参考

公開申請用の設定 app.jsonの構成

まず、app.jsonに公開用の設定を書いていきます。2.app.jsonを構成します

既に、app.jsonはあるので、足りなさそうな部分を書き足しました。

{
  "expo": {
    "name": "snail_Markdown_TextEditor",
    "slug": "snail_Markdown_TextEditor",
    "version": "1.0.0",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
+      "bundleIdentifier": "com.katatumuri.snailmarkdowntexteditor",
+      "buildNumber": "1.0.0",
      "supportsTablet": true,
      "usesIcloudStorage":true
    },
    "android": {
+      "package": "com.katatumuri.snailmarkdowntexteditor",
+      "versionCode": 1,
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

ビルド

ビルドしていくので、とりあえず expo startします。

Andoroid用にビルド

Android用にビルドすることを選択した場合
expo build:android -t apkAndroid向けにビルドする場合、APK（）またはAndroid App Bundle（expo build:android -t app-bundle）のビルドを選択できます。アプリバンドルをお勧めしますが、プロジェクトでGoogle Playアプリ署名が有効になっていることを確認する必要があります。詳細については、こちらをご覧ください。
プロジェクトを初めてビルドするときに、キーストアをアップロードするか、それともGoogleに処理してもらうかを尋ねられます。キーストアが何であるかわからない場合は、キーストアを生成してもらうことができます。それ以外の場合は、自由にアップロードしてください。
Expoにキーストアを生成させることを選択した場合は、後で キーストアを実行して安全な場所にバックアップすることを強くお勧めしますexpo fetch:android:keystore。アプリをGooglePlayストアに送信したら、そのアプリに対する今後のすべての更新 は、Googleが受け入れるために、同じキーストアで署名する必要があります。何らかの理由で、将来プロジェクトを削除したり、資格情報をクリアしたりした場合、キーストアをバックアップしていないと、アプリに更新を送信できなくなります。

Expoの公式ドキュメント通りにやっていきます。
Google Playアプリ署名がわからないので、apkでやってみますｗ
別コンソールを開いてexpo build:android -t apk

picture 1

Expoのアカウントがあるので、
ログインします。
picture 2

キーストアを作るか聞かれるので、作っておきます。

picture 3
ビルド中、Expoのホームでこんな感じで表示されてました。

picture 4
できたっぽい

iOS用のビルド

iOS用にビルドすることを選択した場合
iOS用のスタンドアロンアプリは、アーカイブexpo build:ios -t archive（expo build:ios -t simulator）ビルドまたはシミュレーター（）ビルドの2つの異なるタイプでビルドできます。シミュレータービルドを使用すると、スタンドアロンアプリをシミュレーターでテストできます。アプリをストアに公開したり、TestFlightなどのツールを使用して配布したりする場合は、アーカイブを使用する必要があります。
iOS向けにビルドする場合、独自のオーバーライドを提供する機会を持ちながら、Expoに必要なクレデンシャルを作成させるかどうかを選択できます。Apple IDとパスワードはローカルで使用され、Expoのサーバーに保存されることはありません。

公式ドキュメント通りにやっていきます。
expo build:ios -t archive

picture 1
Appleにログインするよう求められます。

picture 2
Appleにログインしたら、認証をする必要があるみたいです。

picture 3
おっと！Appleに課金してないからダメみたいです。
Apple Developerアカウントを作成します。

Apple Developerアカウントを作成

App Store Small Business Programに登録します。

picture 4
登録画面に移動

picture 5
ログインします。

picture 6
あれ！だめでした。

picture 7

developerアカウントはあるみたいなので、どうしたらいいんだろうｗ