bitrise.io

Expoアプリの開始

React Native CLI又はExpo CLIでReactNativeプロジェクトを生成することができます。ExpoはXcodeやAndroid Studioでネイティブコードを使わなくてもReact Nativeアプリを素早く起動、実行を行うことができるツールチェーンです。

このガイドではExpo CLIでビルドされたReact Nativeプロジェクトをセットアップ、テスト、コード署名、デプロイする方法について説明します。

Bitriseスキャナーは必要な構成を見つけ出し、自動的にデプロイワークフローにExpo Eject ステップを追加します。

bitrise.ioにExpoアプリを追加

最初にbitrise.ioにExpo appを追加する方法について見ていきます。

Bitriseアカウントを持ってますか?

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

  1. bitrise.ioにログインします。
  2. 上部のトップメニューバーにある + ボタンをクリックし、 Add app を選択してください。 Create New Appページに移動します。
  3. プライバシー設定のprivatepublicを選択します。
  4. リポジトリがあるgitホスティングサービスを選択し、ホストしたいリポジトリを見つけて選択してください。 詳しくはリポジトリを接続するをお読みください
  5. レポジトリのアクセス設定が完了したら、No, auto-add SSH keyをクリックします。詳しくはSSH keysをお読みください。
  6. プロジェクトのコンフィギュレーションに含まれるブランチの名前を入力します(例:master)。選んだらNextをクリックします。
  7. Validating repositoryでは、自動的にレポスキャナーが発動しプロジェクトの最適な設定をセットアップします。
  8. Project build configurationでは、React Nativeプロジェクトタイプが自動的に選択されます。 もし、スキャナーが失敗しプロジェクトタイプが自動的に選択されない時は手動でプロジェクトを設定できます。 Bitriseはプロジェクトに基づくModule変数の両方見つけ出します。

    次に、手動で入力するべきフィールドを見ていきます。

    • React NativeプロジェクトからiOSアプリを生成するためにSpecify iOS Development teamフィールドにiOS Development team IDを入力します。
    • Select ipa export methodでは、ipaファイルのエクスポートメソッドをad-hoc、app-store、development又はenterpriseメソッドの内の中からどれかを選んでください。
    • Select ipa export methodでは、ユーザー名を入力しNextを押してください。
    • Specify Expo passwordでは、パスワードを入力し次へを押してください。
    • プロジェクトの設定を確認してください。
  9. appアイコンをアップロードしてください。
  10. Webhook setupではwebhookを登録してBitriseが自動的にリポジトリのコードをプッシュするたびにビルドを開始できるようにしてください。

これで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依存関係が追加されます。

アプリをEjectする

ExpoでビルドされたReact Nativeアプリにはネイティブモジュールが付属されていません。 ビルドステップはプラットフォーム特有なので、BitriseではアプリをEjectし必要なネイティブテンプレートを追加して構成する必要があります。 bitriseのネイティブ依存関係インストーラーステップが不足しているネイティブ依存関係のインストールを行い、プロジェクトのビルドとデプロイの準備が完了します。

Bitriseスキャナーはデプロイワークフローの中のRun npm commandもしくはRun yarn commandステップのすぐ後にExpo Ejectのステップを自動的に挿入します。

もし、Expo Ejectのステップを実行することを望まないのなら、ワークフローの中でExpo Ejectステップを実行しない代わりにローカルでプロジェクトをejectしてネイティブのiOS/Androidプロジェクトをコミットすることができます。

Expoアプリの開始

もしExpo Ejectステップを実行するのなら、満たさなければならないフィールドについてみましょう。

Expo Ejectステップを実行すればビルド、サイン、テストなどのプラットフォーム固有のステップを実行することができるようになります。 例えば、iOSのためのXcode Archive & Export for iOSステップを実行することができます。

expoメッセージの公開

Deploy to Bitrise.ioステップはExpoコマンドを使用しません。 Deploy to Bitrise.ioステップはアーティファクトをBitriseに公開するもので、特定のプラットフォーム固有のステップではありません。 デプロイされたアーティファクトはアプリのBuildページのAPPS & ARTIFACTSタブの中で利用でき、さらにAPIとしても利用できます。 アーティファクトは.ipa、.apk、.aab file、a log、test results、もしくは何かしらのビルドになります。

Deploy to Bitrise.ioステップはexpo.ioには公開されません。 もしexpo.ioに公開する必要があるのなら、Eject ExpoステップのRun expo publish after eject?yesを入力してください。 この場合はexpo.ioに公開するためのexpoアカウントのユーザー名とパスワードを入力する必要があります。

ネイティブの依存関係(dependencies)

Install missing Android SDK componentsステップではandroidプロジェクトに足りないネイティブの依存関係をインストールします。 このステップはデプロイワークフローにデフォルトで含まれています。

アプリのテスト

React Nativeに組み込まれているjestと呼ばれるテスト方法を使用してアプリの単体テストを実行できます。

  1. Run npm commandステップのすぐ後にワークフローに別のRun npm commandステップを追加できます。
  2. npm command with arguments to runフィールドにtestを入力してください。

    Expoアプリの開始

  3. ビルドをスタートします

ビルドページのAPPS & ARTIFACTSタブでテストアーティファクトを確認することができます。

コード署名

react nativeアプリはAndroidとiOSの二つのプロジェクトがあり、どちらもコード署名が必要になります。 ワークフローエディタのCode Signingをクリックすると一ページで全てのiOSとAndroidのコード署名が表示されます。 これらを入力する方法についてみていきます!

アンドロイドアプリにサインする

  1. ワークフローエディタの左上にあるWORKFLOWドロップダウンメニューデdeployワークフローを選択してください。
  2. Code Signingタブへ移動してください。
  3. ANDROID KEYSTORE FILEフィールドにkeystoreファイルをドラッグアンドドロップします。
  4. Keystore passwordKeystore aliasPrivate key passwordフィールドを入力し、Save metadataをクリックしてください。

    アプリをBitriseにアップロードする前にAndroid Studioで生成されたkeystoreファイルに含まれているため、既に持っているはずです。 keystoreファイルに関しての詳細はこちらをクリックしてください。 この情報がCode Signingタブに追加されるとSign APKステップ(Android deployワークフローにデフォルトで含まれています。)はAABやAPKの署名を行い配布の準備をします。

Andoroidコード署名に関しての詳細

コード署名のオプションの詳細については Android code signing guideをご覧ください。

Expoアプリの開始

アンドロイドのコード署名が完了しました。 続けてiOSを行いましょう!

デプロイのためにiOSアプリの署名とエクスポートを行う

テストフライトとアップストアにデプロイするために以下のコード署名のためのファイルが必要です。:

  1. bitrise.ioのプロジェクトのWorkflowタブを開いてください。
  2. Code Signingタブをクリックしてください。
  3. PROVISIONING PROFILEフィールドにApp StoreタイプのプロビジョニングファイルをCODE SIGNING IDENTITYフィールドに iOS Distribution証明署をクリックまたはドラッグアンドドロップしてください。
  4. Workflowsタブをクリックしてdeployワークフローを選択してください。
  5. Xcode Archive & Export for iOSステップのSelect method for exportフィールドをapp-storeにセットしてください。
  6. Xcode Archive & Export for iOSを選択し、Force Build Settings入力グループまでスクロールしてください。
  7. アップロードしたコード署名ファイルを元に以下を入力してください。:

Force code signing with Development Team: チームIDを追加してください。

Expoアプリの開始 Force code signing with Code Signing Identity: コード署名IDを完全なIDまたはコード署名グループとして追加してください。

Expoアプリの開始 Force code signing with Provisioning Profile: プロビジョニングプロファイルのUUIDを追加してください。(ファイル名ではありません)

Expoアプリの開始

  1. もし、コード署名ファイルがApple Developer Portalで手動で生成されている場合は、ejectされたReact NativeプロジェクトではXcode管理のコード署名がオンになっているため、手動のコード署名設定を使用する必要があります。 Debug入力グループをクリックしAdditional options for xcodebuild call inputフィールドにCODE_SIGN_STYLE="Manual"を追加してください。

Bitriseにデプロイ

Deploy to bitrise.ioステップはビルドページのAPPS & ARTIFACTSタブの中にビルドに関連するすべてのアーティファクトをアップロードします。

ビルドURLを使ってチームメンバーと生成されたAPK/.ipaファイルを共有することができます。 APK/.ipaファイルがビルドされたことをグループまたは特定のユーザーに通知することもできます。

  1. Deploy to bitrise.ioステップに移動してください。
  2. Notify:User Rolesフィールドにロールを追加して、ロールが付与されている人のみ通知を受け取るようにできます。 もしくは、Nitify:Emailsフィールドに通知したいユーザーのメールアドレスを入力してください。 それらのメールアドレスをsecret env varsとして設定していることを確認してください。 これらの詳細はAPPS & ARTIFACTSタブの生成されたAPK/.ipaファイルの横にある目のアイコンをクリックし、Notificationsで修正することもできます。

app storeにデプロイする

もしiOSアプリをデプロイしたいなら、 Signing and exporting your iOS app for deploymentにあるステップに従ってください。

TestflightとiTunes ConnectにiOSアプリをデプロイする

app-store .ipaファイルをエクスポートしましたか?

ネイティブのマーケットプレイスへデプロイする手順を始める前に、app-store .ipaファイルをエクスポートしたことを確認してください。

  1. Xcode Archive & Export for iOSステップのフィールドをforceオプションに変更し、app store profileとdistribution credentialsを手動でアップロードしてください。。
  2. Deploy to iTunes Connect - Application Loaderステップをワークフローに追加してください。

    このステップをXcode Archive & Export for iOSステップの後に、できればDeploy to Bitrise.ioの前に置いてください。

  3. Deploy to iTunes Connect - Application LoaderステップでApple credentialsを入力してください。

    このステップでは以下が必要です:

    • Apple ID.
    • パスワードもしくは、もしiTunes Connectで2要素認証を使用していればapp-specificパスワード

    このパスワードはログに表示されたり公開されることはありません。that’s why it is marked SENSITIVE.

  4. ビルドを開始します。.

    もし全てがうまくいけば、Testflightでアプリを確認することができます。そこから、外部テスターに公開したりApp Storeに公開したりできます。

AndroidアプリをGoogle Play Storeにデプロイする

keystoreファイルをアップロードしていますか?

マーケットプレイスにデプロイを始める前にANDROID KEYSTORE FILEフィールドにkeystoreファイルがアップロードされていることを確認してください。

Deploy to Google Playステップを使用する前に、次のタスクを実行したことを確認してください。

  1. Google Play Consoleを使ってGoogle Playに手動で最初のAPKファイルをアップロードする。
  2. Link your Google Play Developer Console to an API project. Google Play Developer ConsoleをAPIプロジェクトをリンクします。
  3. サービスアカウントを使ってAPIアクセスクライアントを設定する: Google Developer Consoleのサービスアカウントを作るときに、Key Typejsonを選ぶことを確認してください。
  4. Google Play Consoleでサービスアカウントに必要な権限を与えます。SettingsUsers & permissionsInvite new userと移動します。Google Play Publisher APIの動作方法により、サービスアカウントに少なくとも次の権限を付与する必要があります。:
    • Access level: アプリ情報を見ます。
    • Release management: 本番リリースの管理、テストトラックリリースの管理
    • Store presence: ストアリスティング、料金、配布を修正します。
  5. オプションのステップとして、ストアリストに翻訳を追加できます。Deploy to Google PlayステップでwhatsnewファイルをアップロードされたAPKバージョンに反映するには、Translate & localize your appで記載されているようにストアリスティングセクションに翻訳を追加してください。

今から、Bitriseに戻ってデプロイ構成を完了させましょう!

  1. BitriseのダッシュボードでCode Signingタブに移動しGENERIC FILE STORAGEにサービスアカウントのJSONキーをアップロードします。
  2. ファイルをアップロードしたurlの環境変数をコピーします。

    例: BITRISEIO_SERVICE_ACCOUNT_JSON_KEY_URL

  3. デプロイワークフローのSign APKステップの後にDeploy to Google Playを追加します。
  4. Service Account JSON key file pathフィールドにGENERIC FILE STORAGEにサービスアカウントJSONキーをアップロードしたときに生成された環境変数をペーストします。このフィールドはステップの中にsensitiveマークがあります。これはここに入力した環境変数がシークレットでビルドログには表示されないことを意味します。生成された環境変数に加え、ファイルパスをローカルにもリモートにもできるステップのフィールドにファイルパスを追加することもできます。
    • リモートJSONキーファイルの場合、ダウンロードURLを指定することができます。例えば、https://URL/TO/key.json
    • ローカルJSONキーファイルの場合、ファイルパスURLを指定することができます。例えば、file://PATH/TO/key.json
  5. Package name: androidアプリのパッケージ名
  6. Track: APKをデプロイしたいトラック(例:alpha/beta/rollout/productionもしくはセットされたカスタムトラック)

以上です!アプリをビルドし、Google Play Storeにリリースしましょう。