Visual Studio Mobile Centerを使ってReact Nativeアプリを配布する方法を説明します。
配布用のアプリを用意する
$ react-native init RNDemoApp
$ cd RNDemoApp
$ git init
$ git add .
$ git commit -m "Bootstrap React Native project"
GitHubに新規リポジトリを作成してローカルで作ったコードをプッシュする。
// 自分で作成したリポジトリに置き換えてください
$ git remote add origin git@github.com:mkamakura/RNDemoApp.git
$ git push -u origin master
Visual Studio Mobile Centerに配布するアプリを登録する
https://mobile.azure.com/login にアクセスしてGitHubアカウントでログインします。
ログインしたらAdd a new appボタンを押してアプリを追加します。
AndroidもAndroid-RNDemoAppという名前で作成しました。
ビルド設定をする
まずMobile Centerに登録したAppにGitHubに作成したリポジトリを紐付けます。
Mobile CenterのサイドメニューにあるBuildから先程作成したリポジトリを選択します。(iOS、Androidそれぞれ実行する必要があります)
iOSのビルド設定
$ open ios/RNDemoApp.xcodeproj
Product>Scheme>Edit Scheme...を開いてBuild ConfigurationをReleaseにする
RNDemoAppTestsの項目のチェックボックスを外す
XCodeを閉じて変更をCommit&Pushする。
$ git add .
$ git commit -m "Add iOS Signing Info"
$ git push origin master
Mobile Centerからアプリのbranch設定をします。
iOSのビルド設定が完了すると、自動的にビルドが実行されます。
Androidのビルド設定
$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
terminalからkeystoreを作成して、Mobile CenterのAndroidアプリのbranch設定をします。
セットアップが完了するとビルドが実行されます。
実機での確認
ビルドが成功するとインストールのリンクが貼られたメールが届きます。
インストールが完了したらアプリを起動して、動作を確認しましょう。
キャプチャはiPhoneの画面ですが、流れはAndroidも同じです。
参考
この記事は以下の動画を参考に作成しました。不明な点がある場合は動画も参考にしてください。
https://www.youtube.com/watch?v=lfqZ8Uy2p3U