Allez directement au contenu principal
CI/CD

Automatic build and release app with Github actions

Créez votre propre pipeline CI/CD avec les actions de Github gratuitement, déployez votre application Ionic Capacitor JS à chaque fois que vous poussez vers main.

Crédits de l'article

Martin Donadieu

Écrivain

Valeria

Relecteur

Jordan

Éditeur

Application de build et de mise à jour automatique avec Github actions

Cet article se concentre sur l'hébergement GitHub, mais vous pouvez l'adapter avec quelques ajustements pour n'importe quel autre plateforme CI/CD.

Avant-propos

Be sure you have added your Capacitor app first to Capgo, this tutorial just focuses on the upload phase. If you need to add your app to Capgo, you can follow this Tutoriel

Convention de commit

Premièrement, vous devez commencer à suivre la convention de commit commit conventionnel ` cela aidera les outils à comprendre comment mettre à jour le numéro de version, ce sera de 5 minutes à l'apprendre.

commit conventionnel

GitHub actions pour tag

Ensuite, vous devez créer votre première action GitHub pour construire automatiquement et créer un tag.

Créez un fichier à cette emplacement : .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@v6
        with:
          fetch-depth: 0
          filter: blob:none
          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 branch principale. Et ajoutera une entrée de changelog pour chaque commit dans la branch principale dans CHANGELOG.md.

N'ayez pas peur si vous n'avez pas ce fichier, il sera créé pour vous.

Pour que cela fonctionne, créez un Mot de passe d'accès personnel et ajoutez-l’à votre GitHub secrets comme PERSONAL_ACCESS_TOKEN.

Cela est nécessaire pour permettre au CI de soumettre le changelog.

Lorsque vous créez le jeton, choisissez l'expiration comme never et le champ d'application comme repo.

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

Cela n'est nécessaire que la première fois, puis les outils maintiendront à jour.

Vous pouvez maintenant soumettre ces deux fichiers et voir votre premier tag apparaitre dans GitHub!

Les deux plateformes Native et Web auront le numéro de version incrémenté après chaque commit.

GitHub actions de construction

Créez un fichier à cet emplacement : .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@v6
      - 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 }} # Example 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 installe et construit votre dépendance avant de l'envoyer à Capgo.

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

Pour que cela fonctionne, vous devez obtenir votre clé API pour Capgo, puis l'ajouter dans le le secret de votre GitHub répertoire as CAPGO_TOKEN.

Vous devriez ajouter vos tests dans l'étape de construction pour vous assurer que GitHub fonctionne.

Ajoutez le commit, ce qui générera une nouvelle build pour le canal de production.

Vous devez ajouter vos tests dans l'étape de build pour vous assurer que votre code fonctionne.

Allez sur votre tableau de bord Capgo et vérifiez votre build qui vient d'apparaître, vous disposez maintenant de votre système CI/CD.

Si vous souhaitez que tous vos utilisateurs reçoivent la mise à jour dès qu'elle est disponible, allez dans votre canal et définissez-le sur public.

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

Continuez de Automatic build and release app avec Github actions

Si vous utilisez Automatic build and release app avec Github actions pour planifier l'automatisation CI/CD, connectez-l’avec Capgo CI/CD pour le flux de travail du produit dans Capgo CI/CD, Capgo Builds natifs pour le flux de travail du produit dans Capgo Builds natifs, Capgo Intégrations pour le flux de travail du produit dans Capgo Intégrations, Intégration CI/CD pour les détails d'implémentation dans Intégration CI/CD, et GitHub Intégration d'Actions pour les détails d'implémentation dans GitHub Intégration d'Actions.

Mises à jour instantanées pour les applications Capacitor

Mettez à jour les applications Capgo en direct sans attendre des jours d'approbation des magasins d'applications. Les utilisateurs reçoivent la mise à jour en arrière-plan tandis que les modifications natives restent dans le chemin de revue normal.

Dernières actualités de notre Blog

Capgo vous offre les meilleures informations dont vous avez besoin pour créer une application mobile vraiment professionnelle.