Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

by ovrmrw
1 / 17

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)スタッフ。

3a2512bb-aa72-4515-af42-1f1721252f39.jpg


アカウントIDの由来

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

(よく聞かれるので:innocent:)


Ionic 2

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

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


:wink:「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アプリを通して任意のアプリをインストールする仕組み。

:wink:「Local → Circle CI → Deploy Gate → Mobile」


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


Thanks!

ovrmrw
ちきさんです。ただのWebエンジニアです。
http://overmorrow.hatenablog.com/
opt
"INNOVATION AGENCY" を標榜するインターネット広告代理店。エンジニア組織 "Opt Techonologies" を中心にアドテクetc...に取り組んでいます。
https://opt-technologies.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした