MonacaのアプリをCircleCIとDeployGateで自動デプロイした話

背景

Monacaで作成中のアプリの試験的配布を自動化したかった
↓
そんな中CircleCIとDeployGateでアプリのリリース自動化という記事を色々見つけた
↓
そこに検索ワードとしてMonacaやCordovaを足したらそれっぽい記事が見つからなかった....
↓
ので頑張った
(作った後にMonaca CIの存在に気付いた...)

目的

Vue.jsにて開発しているMonacaアプリについて
ローカルで作成して
GitHubにpushして
CircleCIでビルドして
DeployGateでデバッガに配布したい

......とりあえずAndroid版だけ

内容

端的に言えば
CircleCIとDeployGateのアカウントを無料のでいいので取得し、GitHubと連携
後はリリースしたいリポジトリに下記ファイルを置けば動く
最後の行の[トークン]と[ユーザー名]は自分のDeployGateの情報にて書き換える

.circleci/config,yml

version: 2
jobs:
  build:
    docker:
      - image: circleci/android:api-28-alpha

    working_directory: ~/repo # 作業フォルダ

    steps:
      # ビルド環境構築
      - run:
          name: apt-get upgrade
          command: |
            sudo apt-get update
            sudo apt-get upgrade -y

      - run:
          name: Setup Node.js via nvm
          command: |
            curl --silent -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
            echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
            echo 'source "$NVM_DIR/nvm.sh" --no-use' >> $BASH_ENV 
            source $BASH_ENV
            nvm install v10.15.3 --no-progress
            nvm alias default v10.15.3
            sed -i -e 's/ --no-use//' $BASH_ENV

      - run:
          name: Install Cordova
          command: |
            npm install -g cordova
            sudo apt-get install gradle -y
            gradle -v

      - checkout

      # キャッシュがある場合はキャッシュから依存関係を復元
      - restore_cache:
          # 復元するキャッシュのkey
          keys:
            - v2-dependencies-{{ checksum "package-lock.json" }}
            - v2-dependencies-

      # Cordovaのビルド設定
      # この作業はチェックアウトしてCordovaのプロジェクトが出来てから行う必要がある
      - run:
          name: Setup Cordova to build as Android app
          command: |
            cordova platform add android@8.0.0
            gradle dependencies

      # 依存関係のインストール
      - run:
          name: Install dependencies
          command: npm install

      # ビルド
      - run:
          name: PreBuild
          command: npm run build

      # ビルドの確認
      - run:
          name: Check dist
          command: ls -la www

      # キャッシュの保存
      - save_cache:
          paths:
            - node_modules
          key: v2-dependencies-{{ checksum "package-lock.json" }}

      # ビルド
      - run:
          name: Cordova Build
          command: cordova build --debug --device

      # デプロイ
      - run:
          name: Upload to DeployGate
          command: |
            APK_PATH=platforms/android/app/build/outputs/apk/debug/app-debug.apk
            COMMIT_HASH=$(git log --format="%H" -n 1 | cut -c 1-8)
            curl -F "file=@${APK_PATH}" -F "token=[トークン]" -F "message=Test Build by CircleCI <${COMMIT_HASH}>" https://deploygate.com/api/users/[ユーザー名]/apps

まとめ・所感

これで手元のVSCodeからPushするだけでDeployGateからアプリ配布の通知が来てインストールできるので超便利になった

ビルドしたアプリがVue製のためタグにVueがとりあえず入っているけれど、ビルド環境の内容としてはReactでもAngularでも変わらないかと