ローカルでビルドしない Ionic 2開発

When

2016/11/21

At

ng-sake #6

---

今回のGitHubリポジトリ

ovrmrw/dreamhouse-ionic

リポジトリにデモサイトへのリンクがあります。

===

話す内容

• Ionicでモバイルアプリが作れる。
• Local → Circle CI → Deploy Gate → Mobile で楽ちん配信。
• Macで開発していないのでAndroidを前提に話をします。

---

自己紹介

ちきさん
(Tomohiro Noguchi)

twitter: @ovrmrw

ただのSIer。

Angular Japan User Group (ng-japan)スタッフ。

---

アカウントIDの由来

1. the day after tomorrow
2. overmorrow(俗語)
3. 略して
4. ovrmrw
5. 「先を見据えて」よりさらに先を、みたいな感じです。

(よく聞かれるので)

---

Ionic 2

• Ionic 2
• Angularでモバイルアプリが作れるフレームワーク。
• 専用CLIがあるなど開発陣はかなり本気。
• Angular 2がalphaの頃から追随するなど開発陣はかなりガチ勢。
• cordova.....
• 一時期バンドラーにrollupを使うなど御乱心だったが今はwebpackになり全体的に安定してきている。

---

「モバイルアプリのビルドって時間かかるんですよ。ノートPC非力だからやりたくないんですよ。そもそもビルドが通らないんですよ。」

---

「Local → Circle CI → Deploy Gate → Mobile」

---

Cordovaビルド問題

• Android Platform Guide
• 何回も読んだけどよくわからなかった。
• 最終的にローカル環境でビルドできるようにはなったけど時間がかかることには変わらない。
• ビルド後にスマホに転送するのめんどくさい。

---

なんかこうよしなにやってくれるのないの？

参考にしたサイト → CircleCIとDeployGateで、IonicのAndroidアプリを自動デプロイ

1. GitHubにpush。
2. Circle CIでビルド。
3. Deploy Gateに送られる。
4. モバイル端末にインストールしてあるDeploy Gateアプリでビルドしたアプリをインストールできる。
5. カンタンだ！

---

GitHubにpush

• Circle CIにGitHubリポジトリを連動させる。
• リポジトリにpushするとCircle CIが動き出す。
• デプロイ用のブランチはmasterとは別にしたい。

こういうコードを書いたら別ブランチにpushするのが楽ちんになった。

deploy-to-android.js

const execSync = require('child_process').execSync;

const DEPLOY_BRANCH = 'deploy-android';

const check = execSync('git add -n -A').toString();
if (check) {
  console.log('$ git add -n -A  ===>\n', check);
  console.error('========================================');
  console.error('** Commit file changes before deploy! **');
  console.error('========================================');
  return;
}

const commands = [
  'git branch ' + DEPLOY_BRANCH,
  'git checkout ' + DEPLOY_BRANCH,
  'git rebase master',
  'git add -A',
  'git commit -m "deploy"',
  'git push origin ' + DEPLOY_BRANCH + ' -f',
  'git checkout master',
  'git branch -D ' + DEPLOY_BRANCH,
];

commands.forEach(command => {
  console.log('='.repeat(20), command);
  try {
    const result = execSync(command).toString();
    console.log('result:', result);
  } catch (err) {
    console.error('error:', err.Error);
  }
});

---

Circle CIでビルド

• Circle CI
• Build Environment
  • OSが**Ubuntu 14.04 (Trusty)**になっていることを確認する。
• Enviroment Variables
  • DEPLOYGATE_TOKEN: (Deploy GateのAPI Key)
  • DEPLOYGATE_USER: (Deploy GateのログインID)

circle.yml記述例。

circle.yml

machine:
  node:
    # version: 4.5.0

dependencies:
  pre:
    - echo y | android update sdk --no-ui --all --filter "android-24,build-tools-24.0.3"
  post:
    - npm install -g cordova ionic
    - ionic state restore

test:
  override:
    - echo "do nothing"

deployment:
  android:
    branch: deploy-android # このブランチにpushするとビルド後に下記のコマンドが実行される。
    commands:
      - ionic build android
      - curl -F "file=@platforms/android/build/outputs/apk/android-debug.apk" -F "token=$DEPLOYGATE_TOKEN" -F "message=sample" https://deploygate.com/api/users/$DEPLOYGATE_USER/apps

---

Circle CI ---> (ビルドしたapkファイル) ---> Deploy Gate

---

Deploy Gate

• Deploy Gate
• モバイルアプリ配信プラットフォーム？なの？
• モバイル端末にDeploy GateアプリをインストールしておくとDeploy Gateから配信を受けられる。
• よくわからないけどDeploy Gateアプリを通して任意のアプリをインストールする仕組み。

---

「Local → Circle CI → Deploy Gate → Mobile」

---

非力なノートPCでもモバイアルアプリ開発ができる！

---

Thanks!