{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/how-to-build-and-deploy-to-deploygate-in-cli/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"0c707871-f84a-5f47-bfe5-b4359eeafc1f","excerpt":"こんにちは。 仕事でReact Nativeを触っているのですが、ステージング（DeployGate）へアプリを反映するときに、 Xcodeを起動 Product > Archiveを選択 しばらく待つ エクスポート方法（Ad-Hoc）を選択 オプション（Code Signing…","html":"

こんにちは。
\n仕事でReact Nativeを触っているのですが、ステージング（DeployGate）へアプリを反映するときに、

\n\n

という手作業をちまちまやるのが面倒になったので、
\nどうにかできないか調べてみたらCLIだけで完結できたので、その方法を残します

\n\n

iOSアプリで.ipaファイルを作成する

\n

iOSでipaファイルを作るには、ビルドとエクスポートの２ステップが必要です。\nどちらもxcodebuildコマンドで実行できます。

\n

ipaファイルを作るための下準備

\n

Xcodeの起動は必要ありませんが、インストールは必要です。
\nインストールした上で、Xcodeのコマンドラインツールもインストールしておいてください。

\n
\n

— Running On Device – React Native | A framework for building native apps using React

\n
\n

xcodebuildでビルド

\n

ビルドするには、プロジェクトルートで以下のコマンドを実行します。

\n
xcodebuild \\\n  -project \"ios/{プロジェクト名}.xcodeproj\" \\\n  -scheme \"{スキーム名}\" \\\n  archive \\\n  -archivePath \"./target/{スキーム名}.xcarchive\"
\n

プロジェクト名はおそらく問題ないと思います。
\n{スキーム名}は、xcodebuild -list -project \"ios/{プロジェクト名}.xcodeproj\"とコマンドを打つとスキーム名の一覧が出てくるので、そこからコピーするといいと思います。

\n
$ xcodebuild -list -project ios/{アプリ}.xcodeproj/\nInformation about project \"{アプリ}\":\n    Targets:\n        {アプリ}\n        {アプリ}Tests\n        {アプリ}-tvOS\n        {アプリ}-tvOSTests\n\n    Build Configurations:\n        Debug\n        Release\n\n    If no build configuration is specified and -scheme is not passed then \"Release\" is used.\n\n    Schemes:\n        {アプリ}\n        ...
\n

のような出力が得られると思うので、Schemes:以下に出力されている行をコピーしましょう。

\n

xcodebuildでIPAファイルを作成

\n

IPAファイルを作るには、以下のコマンドを入力します。

\n
xcodebuild \\\n  -exportArchive \\\n  -archivePath \"前述のコマンドで-archivePathに指定した値\" \\\n  -exportPath \"出力先のディレクトリ\" \\\n  -exportOptionsPlist \"説明します\"
\n

-archivePathはビルドしたファイルのパスを指定、
\n-exportPathには、ipaファイルの出力先を指定、
\n-exportOptionsPlistには、**ビルド用の設定ファイル（plist）**のファイルパスを指定します。

\n

ビルド用の設定ファイル（plist）はこんな感じです。

\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">\n<plist version=\"1.0\">\n<dict>\n    <key>method</key>\n    <string>ad-hoc</string>\n\n    <key>uploadBitcode</key>\n    <false/>\n\n    <key>uploadSymbols</key>\n    <true/>\n</dict>\n</plist>
\n

Xcodeの画面からipaファイル作ったことある方なら、なんとなくマッピングできるかと思います。
\nこのGUIで選択することをそのままXMLにしたものです。

\n

\n \n \n \n \n \n \n \n \n

\n

AndroidでAPKファイルを作成する

\n

AndroidのAPKファイルつくるのはとても簡単です

\n

APKファイルを作成するための下準備

\n
\n

— Android Setup – React Native | A framework for building native apps using React

\n
\n

でAndroidの開発環境のセットアップと、

\n
\n

— Generating Signed APK

\n
\n

で署名についてのセットアップを済ませておきます。\nこれをやらないと、署名ができずビルドの最後の方でエラーになります。

\n

GradleでReact NativeアプリをビルドしてAPKファイルを作成

\n
./android/gradlew --project-dir ./android assembleRelease
\n

これだけです。
\n--project-dirを指定しないとディレクトリがずれてうまくいきません。

\n

DeployGate APIでアプリをアップロード

\n

iOSでipaファイルを、Androidでapkファイルを生成できたら、DeployGateへアップロードします。
\nあらかじめログインしてAPIキーを入手しておいてください。

\n

コマンドはこんな感じでいかがでしょう。
\nGitの最新コミットメッセージを混ぜていたりとか、好みが分かれる処理も入っているので書き換えて使用してください。

\n

コミットID、メッセージが入っていると、反映されたバージョンを確認できるので便利だと思います。

\n
#!/usr/bin/env bash\n# Usage:\n#   DEPLOY_GATE_TOKEN=XXXXX deploy <apk or ipa path> [DEPLOYGATE_USERNAME] [DEPLOY_MESSAGE]\n\nset -eux\n\nPKG_PATH=$1\nDEPLOYGATE_USERNAME=${2:-CureApp-dev}\nDEPLOY_MESSAGE=${3:-$(git log --oneline --no-merges -n1 --color=never)}\n\ncurl \\\n  -F \"token=$DEPLOY_GATE_TOKEN\" \\\n  -F \"file=@$PKG_PATH\" \\\n  -F \"message=$DEPLOY_MESSAGE\" \\\n  https://deploygate.com/api/users/$DEPLOYGATE_USERNAME/apps
\n

このファイルをscripts/deployだとすると、こんな感じで使用します。

\n
DEPLOY_GATE_TOKEN=XXXXX ./scripts/deploy target/アプリ名.ipa Leko
\n

さいごに

\n

Fastlaneのgymコマンドが同じようなことをしてくれますが、
\nFastlane自体の学習コストは決して安くないので、もっと質素にビルドできる方法が見つかってよかったです。
\n主にXcode周りの面倒なところ、安く自動化できる手作業はガンガン自動化して開発効率あげましょう!!!

\n

なお、今回の記事のコマンドたちはGistに上げてあります。
\nぜひ見てみてください

","timeToRead":7,"frontmatter":{"title":"CLIだけでReact NativeアプリをビルドしてDeployGateにデプロイする方法","tags":["iOS","Android","React Native","DeployGate"],"date":"August 22, 2017","featuredImage":null}}},"pageContext":{"slug":"/how-to-build-and-deploy-to-deploygate-in-cli/","previous":{"fields":{"slug":"/implement-site-search-with-algolia/"},"frontmatter":{"title":"Algoliaを利用してMiddleman製サイトに検索機能を実装する","tags":["Algolia","JavaScript","Ruby","Middleman","React","Almin","DDD"]}},"next":{"fields":{"slug":"/how-to-use-japanese-tag-in-middleman/"},"frontmatter":{"title":"middleman-blogで日本語のタグのURLが空になる問題を解消する方法","tags":["Middleman"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}