Skip to main content

CodePush 用にアプリを設定する

概要

CodePush SDK をインストールし、デプロイキーと CodePush サーバー URL をアプリ設定に追加します。このプロセスは React Native アプリと Expo アプリでは異なります

CodePush SDK をインストールし、デプロイキーと CodePush サーバー URL をアプリ設定に追加します。このプロセスは React Native アプリと Expo アプリでは異なります

React ネイティブアプリ用のコードプッシュの設定

CodePush for React Nativeを使用するには、SDKをインストールしてから、iOSモジュールとAndroidモジュールの両方にCodePushをセットアップする必要があります。

バージョン要件

CodePushNext SDK はリアクトネイティブ 0.76 以降をサポートしています。

  1. React ネイティブコードプッシュインストール次へ:

    npm install @code-push-next/react-native-code-push

  2. 用コードプッシュを設定します。最も重要な手順は以下のとおりです iOS セットアップ。

    詳細な手順は、SDK の GitHub リポジトリにあります。 iOS。

  3. 用の CodePush をセットアップします。最も重要な手順は以下のとおりです アンドロイドセットアップ。

    詳細な手順は、SDK の GitHub リポジトリにあります。 アンドロイド。

iOS セットアップ

  1. バンドル ID が、次の場合に使用したバンドル ID と一致することを確認してください Bitrise でアプリを作成する。使えます react-native-rename アプリの名前をカスタムバンドル ID に変更するには: リアクション・ネイティブ・リネーム。

  2. で ios/Podfile、次の行を探してください platform :ios、 min_ios_version_supported。次のように変更してください platform :ios, 15.5。

  3. Update ios/<projectname>/AppDelegate.swift:

    1. CodePush ヘッダーのインポートステートメントを追加します。

      import CodePush

    2. 次のコード行を見つけてください。

      Bundle.main.url(forResource: "main", withExtension: "jsbundle")

    3. これを次の行に置き換えてください。

      CodePush.bundleURL()

    4. きみの bundleURL メソッドは以下のようになるはずです。

      override func bundleURL() -> URL? {
#if DEBUG
   RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
#else
   CodePush.bundleURL()
#endif
}

  4. Add the CodePush deployment key and the CodePush Server URL to ios/<projectname>/Info.plist:

    デプロイキーは、作成時に取得します Bitriseへのコードプッシュ・デプロイ。

    ワークスペーススラッグ

    サーバーURLにはBitriseワークスペーススラッグが必要です。 スラグでワークスペースとプロジェクトを識別する。

    #The CodePush deployment key

<key>CodePushDeploymentKey</key>
<string></string>

#The CodePush server URL with the Bitrise workspace slug

<key>CodePushServerURL</key>
<string>https://<workspace-slug>.codepush.bitrise.io</string>

アンドロイドセットアップ

  1. 末尾に行を追加 android/app/build.gradle 追加のビルドタスク定義として:

    ...
apply from: "../../node_modules/@code-push-next/react-native-code-push/android/codepush.gradle"
...

  2. [更新] android/app/build.gradle android.defaultConfig セットアップするには versionCode と versionName:

    versionCode System.getenv("APP_VERSION_CODE") != null ? System.getenv("APP_VERSION_CODE").toInteger() : 1
versionName System.getenv("APP_VERSION_NAME") != null ? System.getenv("APP_VERSION_NAME") : "1.0"

  3. [更新] android/app/src/main/java/…/MainApplication.kt CodePush を使用するには:

    パッケージリスト

    PackageList は、アプリケーションの存続期間中に一度だけインスタンス化する必要があります。

    ...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush

class MainApplication : Application(), ReactApplication {
   override val reactNativeHost: ReactNativeHost =
       object : DefaultReactNativeHost(this) {
           override fun getPackages(): List<ReactPackage> = PackageList(this).packages.apply {
             // Packages that cannot be autolinked yet can be added manually here, for example:
             // add(MyReactNativePackage())
            }

           // 2. Override the getJSBundleFile method in order to let
           // the CodePush runtime determine where to get the JS
           // bundle location from on each app start
           override fun getJSBundleFile(): String {
             return CodePush.getJSBundleFile() 
           }
    };
}

  4. で android/app/src/main/res/value/strings.xmlで、CodePush デプロイキーと CodePush サーバー URL を追加します。

    デプロイキーは、作成時に取得します Bitriseへのコードプッシュ・デプロイ。

    ワークスペーススラッグ

    サーバーURLにはBitriseワークスペーススラッグが必要です。 スラグでワークスペースとプロジェクトを識別する。

    <string name="CodePushDeploymentKey" translatable="false"><CODE_PUSH_DEPLOYMENT_KEY></string>
<string name="CodePushServerUrl" translatable="false">https://<workspace-slug>.codepush.bitrise.io</string>

Expo アプリ向けコードプッシュの設定

  1. 変換 app.json に app.config.js これにより、環境変数を使用できるようになります。

    詳細については、以下をご覧ください 動的設定に関する Expo ドキュメント。

  2. を設定 apps ios.bundleIdentifier と android.package で app.config.js。これらは、使用中の値と一致する必要があります アプリを作成する。 ビットライズで。

  3. リアクトネイティブコードプッシュネクストSDKをインストールし、 dotenv、および expo-build-properties パッケージ:

    npm install @code-push-next/react-native-code-push dotenv expo-build-properties

  4. エキスポコードプッシュプラグインのセットアップ:

    • プラグインをに含める app.config.js。

      ワークスペーススラッグ

      サーバーURLにはBitriseワークスペーススラッグが必要です。 スラグでワークスペースとプロジェクトを識別する。

       plugins: [
        [
        "@code-push-next/react-native-code-push/expo", // CodePush plugin
          {
            ios: {
                // Use the environment variable for the iOS CodePush Deployment Key
                CodePushDeploymentKey: IOS_CODE_PUSH_DEPLOYMENT_KEY,
                CodePushServerURL: "https://<workspace-slug>.codepush.bitrise.io" 
            },
            android: {
                // Use the environment variable for the Android CodePush Deployment Key
                CodePushDeploymentKey: ANDROID_CODE_PUSH_DEPLOYMENT_KEY,
                CodePushServerURL: "https://<workspace-slug>.codepush.bitrise.io" 
            }
          }
        ],
        [
          "expo-build-properties",
          {
            ios: {
              deploymentTarget: "15.5"
            }

          }
        ]
        // Add other plugins here if you have more
      ]

  5. デプロイキー値をに追加 .env ファイル。デプロイキーは次の場合に取得されます CodePush デプロイメントを作成しています。 ビットライズで。

    ヒント

    を追加 .env ファイルをあなたの .gitignore 鍵を秘密にしておくためだ!

    # .env file

# CodePush Deployment Keys
IOS_CODE_PUSH_DEPLOYMENT_KEY=""
ANDROID_CODE_PUSH_DEPLOYMENT_KEY=""
このセクションの内容: