MonacaのアプリをCircleCIとDeployGateで自動デプロイした話
背景
Monacaで作成中のアプリの試験的配布を自動化したかった
↓
そんな中CircleCIとDeployGateでアプリのリリース自動化という記事を色々見つけた
↓
そこに検索ワードとしてMonacaやCordovaを足したらそれっぽい記事が見つからなかった....
↓
ので頑張った
(作った後にMonaca CIの存在に気付いた...)
目的
Vue.jsにて開発しているMonacaアプリについて
ローカルで作成して
GitHubにpushして
CircleCIでビルドして
DeployGateでデバッガに配布したい
......とりあえずAndroid版だけ
内容
端的に言えば
CircleCIとDeployGateのアカウントを無料のでいいので取得し、GitHubと連携
後はリリースしたいリポジトリに下記ファイルを置けば動く
最後の行の[トークン]と[ユーザー名]は自分のDeployGateの情報にて書き換える
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 [email protected]
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でも変わらないかと
Author And Source
この問題について(MonacaのアプリをCircleCIとDeployGateで自動デプロイした話), 我々は、より多くの情報をここで見つけました https://qiita.com/TomokazuTE/items/b6c7c741a4605c580a1c著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .