Ionic Heroku ReviewAppsの作成
Heroku ReviewAppsとは
Review Apps | Heroku Dev Center
GitHubのプルリクエスト単位で生成できるアプリのこと。
無料枠（プルリクエストの個数制限あり）でも使うことができ、一回設定しておけばほぼ放置でOK。アプリの作成と削除を自動でやってくれる。
ソースコードのレビューと一緒にプルリクエスト中のリンクから、対象のプルリクエストを動作するアプリ画面へ飛んで動作確認もできる。
今回の記事ではGitHub管理しているIonicアプリをHeroku ReviewAppsを使ってアプリの生成をする過程を紹介します。
Heroku側の設定
GitHub連携
予めHerokuのサイト、もしくはHerokuのCLIツールよりHeroku上にアプリを作成しておきます。
ダッシュボードより作成したアプリを選択して、上部メニューのDeployから対象のGitHubリポジトリを選択してください。選択後、Automatic deploysよりブランチを選択します。
最後にEnable Automatic Deploysをクリックします。
Pipeline設定
Add this app to a pipelineより、Create new pipelineを選択します。
Pipelineの名前を入力して Create pipelineをクリック。
Pipelineの作成が完了すると、画面が切り替わって…
Enable Review Appsをクリックします。
でてきたダイアログではCreate an app.json File…をクリック。
Buildpacksは heroku/nodejs と記入。
画面下部のCommit to Repoをクリック。
そうするとダイアログが開きます。（ReviewAppsがGitHubプルリクエストが開かれる度に作られる旨が書いてあります）
Create new review apps for new pull requests automaticallyにチェック。
Destroy stale review appsは任意で設定します。スクリーンショットの設定は5日後にアプリが消えるよう設定しています。
下部のEnableボタンを押下して完了です。
Ionicアプリ側の設定
package.jsonのscripts内でherokuからの要求されるbuildにフックして、scriptが実行できます。
herokuサーバーではios-deployをインストールすることができないため、Review apps作成のためのビルドが走る前にios-deployをpackage.jsonから一時的に削除する必要があります。
また、ReviewApps用にアプリ設定を変えたかったので、プロジェクトルートにHerokuディレクトリを作ってapp.config.tsとionic.config.jsonを別で作りました。
以下、package.jsonのscripts内に設定します。
“heroku-prebuild”: “sed -ire ‘/ios-deploy/d’ package.json;mv heroku/app.config.ts src/app/app.config.ts;mv heroku/ionic.config.json ./”,ビルドコマンドも記載しておきます。
“ionic:serve”: “ionic-app-scripts serve”,
“postinstall”: “ionic-app-scripts build”,Heroku側はNode.jsとして設定しているので、package.jsonにexpressをインストールします。（もちろんexpress以外でもOKです）
npm i --save expressプロジェクトルートにsever.jsファイルを作っておきます。
名前判断しているか忘れましたが、Herokuでよしなに見てくれます。
内容はざっくりでこんな感じでOKです。
var express = require(‘express’);
var path = require(‘path’);
var app = express();
app.use(express.static(path.resolve(__dirname, “www”)));
app.set(‘port’, process.env.PORT || 8100);
app.listen(app.get(‘port’), function() {
console.log(“listening to Port”, app.get(“port”));
});これらを設定してpushしておけばReviewAppが生成されます！
所感
Webでサクッとプルリクエストの内容を見られるのは、プルリクエストを作ったエンジニアも見る人も安心できるので導入をおすすめします！
ただIonicのようなハイブリッドアプリはWebとスマホネイティブの両方でReviewAppsが見たいはず。スマホネイティブでのReviewAppsができたら、またここで報告します！
