Construction et déploiement automatiques de l'application avec GitHub Actions

Ce tutoriel se concentre sur l’hébergement GitHub, mais vous pouvez l’adapter avec peu de modifications à toute autre plateforme CI/CD

Préface

Assurez-vous d’avoir d’abord ajouté votre application Capacitor à Capgo, ce tutoriel se concentre uniquement sur la phase de téléchargement Si vous devez ajouter votre application à Capgo, vous pouvez suivre ce Tutoriel

Convention de commit

Tout d’abord, vous devez commencer à suivre la convention de commit conventional commits cela aidera les outils à comprendre comment mettre à jour le numéro de version, il faut 5 minutes pour l’apprendre

Actions GitHub pour les tags

Ensuite, vous devez créer votre première action GitHub pour automatiquement construire et créer des tags

Créez un fichier à ce chemin : .github/workflows/bump_version.yml

avec ce contenu :

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

Cela publiera un tag pour chaque commit dans votre branche principale et ajoutera une entrée de changelog pour chaque commit dans la branche principale dans CHANGELOG.md

Ne vous inquiétez pas si vous n’avez pas ce fichier, il sera créé pour vous

Pour que cela fonctionne, créez un PERSONAL_ACCESS dans vos secrets GitHub sous le nom PERSONAL_ACCESS_TOKEN

Ceci est nécessaire pour permettre à la CI de commiter le changelog

Lorsque vous créez le token, choisissez l’expiration comme never et la portée comme repo

Enfin, définissez la version dans votre fichier package.json, synchronisez-la avec votre numéro de version Native, ce qui facilitera l’étape suivante

Ceci n’est nécessaire que la première fois, ensuite les outils le garderont à jour

Vous pouvez maintenant commiter ces deux fichiers et voir votre premier tag apparaître sur GitHub !

Les plateformes native et web verront leur numéro de version augmenter après chaque commit

Actions GitHub pour la construction

Créez un fichier à ce chemin : .github/workflows/build.yml

avec ce contenu :

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

Cela installera et construira vos dépendances avant de les envoyer à Capgo

Si votre commande de construction est différente, vous pouvez la modifier dans l’étape build_code

Pour que cela fonctionne, vous devez obtenir votre clé API pour Capgo, ajoutez-la dans les secrets de votre dépôt GitHub sous le nom CAPGO_TOKEN

Vous pouvez maintenant commiter ces deux fichiers et voir votre premier tag apparaître sur GitHub !

Le commit générera une nouvelle construction pour le canal de production

Vous devriez ajouter vos tests dans l’étape de construction pour vous assurer que votre code fonctionne

Allez sur votre tableau de bord Capgo et vérifiez votre construction qui vient d’apparaître, vous avez maintenant votre système CI/CD

Si vous voulez permettre à tous vos utilisateurs d’obtenir la mise à jour dès qu’elle est disponible, allez dans votre canal et définissez-le comme public

Vous pouvez également ajouter la construction native de votre application JavaScript Ionic Capacitor en suivant ce tutoriel 👇