GitHub

React Nativeアプリの開始

BitriseではReact Nativeプロジェクトを簡単にセットアップ・構成が行なえます。あなたのReact Nativeレポ内にAndroidとiOSプロジェクトの両方を保存できますので、設定はAndroid、iOSアプリそれぞれの手順で行うことができます。React Nativeプロジェクトでは、初めにAndroid、その次にiOSのビルドが実行されます。組織が2つ以上のコンカレンシーをお持ちの場合は、並行して両方のビルドを走らせることができます。

React Nativeプロジェクトのセットアップ前に

まずbitrise.ioにサインアップしていることを確認し、Bitriseアカウントにアクセスできることを確認してください。もしまだであれば、それを完了するための4つの方法がございます。

bitrise.ioにReact Nativeプロジェクトを追加する

このチュートリアルでは、サンプルアプリを使用します。では始めましょう!

  1. bitrise.io にログインする
  2. Add a new app をクリックします。
  3. アプリのプライバシー設定を行う:private もしくは public
  4. あなたのレポジトリをホストするGitホスティングサービスを選びます。その後、プロジェクトをホストするご自身のレポジトリを選択してください。詳しくはレポジトリを接続するをお読みください。
  5. レポジトリのアクセス設定が完了したら、No, auto-add SSH keyをクリックします。詳しくはSSH keysをお読みください。
  6. プロジェクトのコンフィギュレーションに含まれるブランチの名前を入力します(例:master)。選んだらNext をクリックします。
  7. Validating repository では、自動的にレポスキャナーが発動しプロジェクトの最適なコンフィグをセットアップします。
  8. Project build configuration では、お好きなビルド設定を選択してください。
    • React Native プロジェクトでは、選択したproject typeとしてReact Native を確認することができます。スキャンが失敗しproject typeが自動的に選択されていない場合、手動によるプロジェクト設定を行えます。Androidが自動的にThe root directory of an Android app 上で選択されていることが確認できます。
    • プロジェクトに1つのモジュールだけが含まれている場合、そのモジュールは自動的にModuleとして選択されます。2つ以上のモジュールが含まれるプロジェクトでは、その中から1つモジュールを選択することができます。(一つのメインモジュールをおすすめします)
    • Select variant for building のフィールドでは、プロジェクトに合ったバリアントを選択してください。Select All Variantsは全てのバリアントのビルドを行います。APKや.ipaファイルを生成する場合は、debugrelease を選んでください。
    • Project (or Workspace) path field では、あなたのXcode project もしくは Xcode Workspace path を選択してください。
    • Select Scheme name
      スキャン検証はあなたのプロジェクト内にシェアされたスキームがないと失敗します。手動でXcode scheme をBitriseに追加することもできますが、仮にシェアされている状態であれば、自動的に探知します。詳しくは、スキームに関する問題をお読みください。
    • Select ipa export method では、.ipaファイルのエクスポートする方法を選択します:ad-hocapp-storedevelopmententerprise のいずれかを選ぶことができます。
  9. Webhook setupでは、Webhookに登録済であれば、レポジトリにコードがプッシュされると毎回自動的にビルドが開始されます。

Settings tab

これらの設定はいつでもSettings ページから修正することができます。Stackについては、Workflow EditorのStack タブより変更ができます。

これでbitrise.io上でのReact Nativeプロジェクトのセットアップが完了です!最初のビルドはprimary workflowを使用すると自動的に開始されます。ビルドページ内のAPPS & ARTIFACTS タブより最初のビルドの生成されたレポートを確認することができます。

依存関係 (dependencies) のインストール

Javascript dependencies

Bitriseスキャナーがプロジェクトのスキャンに成功すると、Run npm command もしくは Run yarn command ステップがワークフローに含まれるようになります。

Run npm commandでは、インプットフィールドのnpm command with arguments to runinstall と入力してください。そうすれば、あなたのプロジェクトにJavascript依存関係が追加されます。

Run yarn command があなたのプロジェクトに自動でJavascript dependenciesをインストールします。ステップを手動で設定する必要はありません。

Native dependencies

Install missing Android toolsステップは、あなたのAndroidプロジェクトに不足しているNative dependenciesをインストールします。このステップは、あなたのデプロイワークフローにデフォルトで入っています。

iOSのdependenciesは Run CocoaPods install ステップをワークフローに追加することで入手することができます。これはデフォルトのワークフローではありません。

Code signing コード署名

React Native アプリは2つのプロジェクト(Android と iOS)で構成されており、両方とも適切にコード署名されている必要があります。プロジェクトのWorkflow Editor内のCode Signingをクリックすると、全てのiOSとAndroidコード署名欄が表示されます。

では、手順を見ていきましょう!

Androidプロジェクトの署名

  1. アプリのWorkflow Editorの上段左側にあるWORKFLOWドロップダウンメニューよりdeployワークフローを選択します。
  2. Code Signing タブをクリックします。
  3. あなたのKeystoreファイルをANDROID KEYSTORE FILEへドラッグアンドドロップします。
  4. Keystore passwordKeystore aliasPrivate key passwordを入力し、Save metadataをクリックします。

    これらの情報は前もって準備しておく必要があります。Bitriseにアプリをアップロードする前に、Android Studioで生成されたKeystoreファイルにそれらの情報が含まれていなければなりません。Keystoreファイルについては、こちらを参照してください。

    Code Signingタブにこれらの情報が追加されてると、BitriseのAndroid Sign Step (Androidデプロイワークフローにデフォルトで含まれています)がAPK署名の処理をするので、これで配布への準備は完了です!

Androidコード署名についての詳しい情報

コード署名のオプションについての詳しい情報はAndroidコード署名ガイドを参照してください。

これでAndroidのコード署名は完了です!

テストにおけるiOSプロジェクトの署名とエクスポート

iOSプロジェクトのコード署名はエクスポートされた.ipaファイルの用途により異なります。ここのセクションでは、内部のテスターによって登録されたデバイスでインストール・テストを行う際のコード署名を紹介します。テスター同士でプロジェクトの共有をするには、developmentのエクスポート手段を使用した.ipaファイルが必要です。

.ipaファイルをapp storeへアップロードするには、ここを確認してください。

自動プロビジョニング

Certificate and profile installe ステップより手動によるプロビジョニング法についての手順を載せております。Bitriseは自動プロビジョニングのサポートもしております。

必要な情報:

  1. あなたのプロジェクト上での、手動もしくは自動(Xcode)のいずれかのコード署名方法を設定します。ローカルで.ipaファイルの生成を行ってください。
  2. the codesigndoc toolを使ってコード署名ファイルの収集とアップロードを行ってください。このツールはBitriseへコード署名ファイルをアップロードすることも可能なので、この機能を使うことをおすすめします!

    手動でアップロードすることもできます:Workflow Editorを開いて、Code signing タブを選択してください。その後、各自のフィールドにファイルのアップロードを行ってください。

  3. アプリのWorkflow Editorに進み上部左端にあるドロップダウンメニューのWORKFLOW内のdeployワークフローを選択してください。
  4. Certificate and profile installerステップがあなたのワークフロー内にあることを確認してください。このステップは、Xcode Archive & Export for iOSステップの前にある必要があります(これらの2つのステップの間に、 Xcode Test for iOSのような他のステップを含めることができます。)
  5. Xcode Archive & Export for iOS ステップ内にある Select method for export インプットを確認してください。デフォルトの環境変数は  $BITRISE_EXPORT_METHOD

    となっています。この変数はアプリの作成中に選択したエキスポート手段を保存します。もし以前にdevelopmentを選択していたら、ここではインプットを変更する必要はありません。そうでなければ、developmentにマニュアルでセットしてください。

    Export method env var

  6. ビルドを開始します

正確なコード署名ファイルがアップロードされていると、Certificate and profile installer ステップがあなたのコード署名ファイルをインストールし、Xcode Archive & Export for iOS ステップがdevelopment export method を用いて.ipa ファイルのエクスポートを行います。ワークフローにDeploy to Bitrise.io ステップがあれば、ビルドページ上の APPS & ARTIFACTS タブより.ipaファイルを見つけることができます。

iOSコード署名について

iOSコード署名は普通こんなに簡単ではありません。詳しくはBitriseでiOSコード署名をする方法をご確認ください。

iOSプロジェクトのデプロイ作業のための署名・エクスポート

内部のテスターのためのコード署名ファイルのセットアップ、.ipaファイルの作成をした場合、次の手順は外部のテスターを伴ってApp StoreへあなたのiOSアプリを公開してください

TestflightとApp Storeへデプロイするためには、他のコード署名ファイルが必要になります:

  1. ローカルマシンで、Xcode上でのプロジェクトのApp Storeコード署名をセットアップし、App Storeの.ipaファイルをエクスポートしてください。ローカルマシンで失敗すれば、Bitrise上でも間違いなく失敗しますのでお気をつけください!
  2. the codesigndoc toolを使ってコード署名ファイルの収集とアップロードを行ってください。
  3. アプリのWorkflow Editorより新しいワークフローを作成してください:+ Worlflow ボタンをクリック、新規のワークフロー名を入力し deployBASED ON ドロップダウンメニューより選択してください。この方法により、新規のワークフローがベーシックのdeployワークフローのコピーになります。
  4. Xcode Archive & Export for iOS ステップより Select method for exportのインプットをapp-storeにセットしてください。

    App store export

    Testflightへアプリのアップロードを行わずに外部のテスターにアプリを配布する場合、ad-hocを選択しあなたのワークフロー上にDeploy to Bitrise.ioステップがあることを確認してください。

Test your project プロジェクトのテスト

jestと呼ばれる、React Nativeのビルドにおけるテスト方法があります。ワークフローにRun npm command ステップを追加し、 npm command with arguments to run のフィールドにtestと入力してください。

Bitriseにデプロイする

Deploy to bitrise.io ステップでは、あなたのビルド関連の全てのアーチファクトがBuildページのAPPS&ARTIFACTSタブへアップロードされます。

ビルドのURLを使用しているチームメンバーと生成されたAPKまたは.ipaファイルを共有することができます。あなたのAPKまたは.ipaファイルがビルドされた場合も、ユーザーグループや個人ユーザーへの通知を行います。

  1. Deploy to bitrise.io ステップに進みます。
  2. Notify: User Roles では、role(役割)を追加すると、ある一定の役割が与えられたユーザーのみに通知されます。あるいは、Notify: Emails の欄に通知したいユーザーのメールアドレスを入力すると、そのメールアドレスへ通知が行われます。この場合、入力するメールアドレスにシークレット環境変数が設定されていることを確認してください。こういった詳細については、Notificationsで修正することができます。 APPS & ARTIFACTSタブ上の、生成されたAPKまたは.ipaファイルの隣りにあるeye アイコンをクリックしてください。

App Storeへのデプロイ

iOSアプリのデプロイ作業を行う方は、Code sign your iOS project for deploymentにあるステップに従ってください。

iOSアプリをTestflightあるいはiTunes Connect にデプロイする

すでにapp-storeの.ipaファイルのエクスポートが完了していますか?

マーケットプレイスへのデプロイ作業を進める前に、app-storeへ.ipaファイルのエクスポートが完了しているか確認してください。

  1. Xcode Archive & Export for iOS ステップを追加した後、ワークフローに Deploy to iTunes Connect - Application Loader ステップを追加します(Deploy to Bitrise.io ステップの前が好ましい)。

    Deploy to iTunes Connect - Application Loader ステップにAppleアカウント情報を入力します。

    このステップで必要な情報;

    • Apple ID
    • パスワード、もしくはiTunes Connectの二要素認証を使用している場合はアプリのパスワード

    パスワードがログ上で見えたりすることはありませんのでご安心ください。(それ故SENSITIVEがマークされております

  2. ビルドを開始します

    全てが成功すれば、アプリをTestflightで確認することができます。そこから、外部テスターへ配布したり、App Storeに出品することも可能です。

AndroidアプリをGoogle Play ストアにデプロイ

Androidコード署名

ANDROID KEYSTORE FILE の欄にkeystoreファイルがアップロードされているか確認してください。

  1. Google Play ストアに同期されていることを確認してください。

    Google Play ストアへの登録・プロジェクトのセットアップ

    Google Play APIアクセスのセットアップ

  2. BitriseのDashboardで、Code Signing タブに進みGENERIC FILE STORAGE にサービスアカウントのJSONキーをアップロードします。
  3. アップロードしたファイルのURLを保存しているenvキーをコピーします。例:BITRISEIO_SERVICE_ACCOUNT_JSON_KEY_URL
  4. Android Sign ステップがデプロイワークフローにあることを確認したら、Google Play Deploy ステップを追加します。
  5. 以下に従って必要事項の記入を行ってください:
    • Service Account JSON key file path:このフィールドはリモートURLを受け付けるので、アップロードしたサービスアカウントのJSONキーが含まれた環境変数を入力してください。(例) $BITRISEIO_SERVICE_ACCOUNT_JSON_KEY_URL
    • Package name :あなたのAndroidアプリのパッケージネーム
    • Track :あなたのAPKをどこにデプロイするのかを入力するtrack (alpha/beta/rollout/production)

これで完了です!ビルドを開始してAndroidアプリの出品ができます。