CI/CD

Githubアクションによるアプリの自動ビルドとリリース

Github actionsを使用して無料でCI/CDパイプラインを作成し、mainにプッシュするたびにIonic Capacitor JSアプリをデプロイしましょう。

Martin Donadieu

Martin Donadieu

コンテンツマーケター

Githubアクションによるアプリの自動ビルドとリリース

このチュートリアルはGitHubホスティングに焦点を当てていますが、少しの調整で他のCI/CDプラットフォームにも適用できます。

はじめに

まず、CapacitorアプリをCapgoに追加していることを確認してください。このチュートリアルはアップロード段階のみに焦点を当てています。 Capgoにアプリを追加する必要がある場合は、このチュートリアルに従ってください。

コミット規約

最初にconventional commitsのコミット規約に従う必要があります。これによりツールがバージョン番号をどのように更新するかを理解するのに役立ちます。学ぶのに5分もかかりません。

Conventional commits

タグ用のGitHubアクション

次に、自動的にビルドしてタグを作成する最初のGitHubアクションを作成する必要があります。

以下のパスにファイルを作成してください:.github/workflows/bump_version.yml

以下の内容で:

name: Bump version
on:
push:
branches:
- main
jobs:
bump-version:
if: "!startsWith(github.event.head_commit.message, 'chore(release):')"
runs-on: ubuntu-latest
name: "Bump version and create changelog with standard version"
steps:
- name: Check out
uses: actions/checkout@v4
with:
fetch-depth: 0
token: '${{ secrets.PERSONAL_ACCESS_TOKEN }}'
- name: Git config
run: |
git config --local user.name "github-actions[bot]"
git config --local user.email "github-actions[bot]@users.noreply.github.com"
- name: Create bump and changelog
run: npx capacitor-standard-version
- name: Push to origin
run: |
CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD)
remote_repo="https://${GITHUB_ACTOR}:${{ secrets.PERSONAL_ACCESS_TOKEN }}@github.com/${GITHUB_REPOSITORY}.git"
git pull $remote_repo $CURRENT_BRANCH
git push $remote_repo HEAD:$CURRENT_BRANCH --follow-tags --tags

これにより、メインブランチの各コミットに対してタグがリリースされ、CHANGELOG.mdにメインブランチの各コミットのチェンジログエントリが追加されます。

このファイルがなくても心配ありません。自動的に作成されます。

これを機能させるために、PERSONAL_ACCESSトークンを作成し、GitHubシークレットPERSONAL_ACCESS_TOKENとして設定してください。

これはCIがチェンジログをコミットできるようにするために必要です。

トークンを作成する際は、有効期限をneverに、スコープをrepoに設定してください。

最後に、package.jsonファイルのバージョンを設定し、次のステップを容易にするためにネイティブバージョン番号と同期させてください。

これは最初の1回だけ必要で、その後はツールが自動的に更新を維持します。

これら2つのファイルをコミットすると、GitHubに最初のタグが表示されます!

ネイティブとウェブの両プラットフォームは、各コミット後にバージョン番号が更新されます。

ビルド用のGitHubアクション

以下のパスにファイルを作成してください:.github/workflows/build.yml

以下の内容で:

name: Build source code and send to Capgo
on:
push:
tags:
- '*'
jobs:
deploy:
runs-on: ubuntu-latest
name: "Build code and release"
steps:
- name: Check out
uses: actions/checkout@v4
- name: Install dependencies
id: install_code
run: npm i
- name: Build
id: build_code
run: npm run build
env: # Remove both lines if you don't need it
FIREBASE_CONFIG: ${{ secrets.FIREBASE_CONFIG }} # Exemple of env var coming from a secret
- name: Create Release
id: create_release
run: npx @capgo/cli@latest bundle upload -a ${{ secrets.CAPGO_TOKEN }} -c production

これにより、依存関係がインストールされビルドされてからCapgoに送信されます。

ビルドコマンドが異なる場合は、build_codeステップで変更できます。

これを機能させるために、CapgoのAPIキーを取得し、GitHubリポジトリのシークレットCAPGO_TOKENとして追加する必要があります。

これら2つのファイルをコミットすると、GitHubに最初のタグが表示されます!

コミットを追加すると、プロダクションチャンネル用の新しいビルドが生成されます。

コードが正しく動作することを確認するために、ビルドステップにテストを追加する必要があります。

Capgoダッシュボードに移動して、表示されたばかりのビルドを確認してください。これでCI/CDシステムが整いました。

すべてのユーザーが更新可能になったときに更新を取得できるようにしたい場合は、チャンネルに移動してpublicに設定してください。

また、以下のチュートリアルに従って、Ionic Capacitor JavaScriptアプリのネイティブビルドを追加することもできます 👇

CapacitorJSアプリのための即時更新

CapacitorJSアプリに即座に更新、修正、機能をプッシュし、アプリストアの遅延を回避します。Capgoでシームレスな統合、エンドツーエンドの暗号化、リアルタイムの更新を体験してください。

今すぐ始めよう

最新のニュース

Capgoは、真にプロフェッショナルなモバイルアプリを作成するために必要な最高のインサイトを提供します。