Aller directement au contenu principal
CI/CD

Créez automatiquement et déployez l'application avec des actions Github

Créez votre propre pipeline CI/CD avec des actions Github gratuites, déployez votre application Ionic Capacitor JS à chaque fois que vous poussez vers la branche principale.

Martin Donadieu

Martin Donadieu

Spécialiste du contenu

Application de build et de lancement automatique avec des actions Github

Cette étape de tutoriel 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

Assurez-vous d'avoir ajouté votre application Capacitor à Capgo en premier, car ce tutoriel se concentre uniquement sur la phase d'upload. Si vous avez besoin d'ajouter votre application à Capgo, vous pouvez suivre ce Tutoriel

Convention de commit

Tout d'abord, vous devez commencer à suivre la convention de commit commits conventionnels` cela vous aidera à comprendre comment mettre à jour le numéro de version, ce sera de 5 minutes à apprendre.

Commits conventionnels

GitHub actions pour tag

Créez ensuite votre première action GitHub pour construire automatiquement et créer un tag.

Créez un fichier à cet 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 de votre branché principale. Et ajoutera une entrée de changelog pour chaque commit de 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 PERSONAL ACCESS TOKEN et ajoutez-le à votre GitHub secrets Assez nécessaire pour permettre au CI de commettre le changelog. PERSONAL_ACCESS_TOKEN.

Lorsque vous créez le jeton, choisissez l'expiration comme

et le champ d'application comme never Enfin, définissez la version dans votre repo.

dossier, synchronisez-le avec votre numéro de version Native qui facilitera, puis la prochaine étape. package.json Ceci n'est nécessaire que la première fois, puis les outils maintiendront à jour.

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

You can now commit this both files and see your first tag appear in GitHub!

Actions __CAPGO_KEEP_0__ pour la construction

GitHub actions for build

avec ce contenu : .github/workflows/build.yml

with this content:

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

Cette commande 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 Pour que cela fonctionne, vous devez obtenir votre clé __CAPGO_KEEP_0__ pour __CAPGO_KEEP_1__, l'ajouter dans le secret de votre dépôt __CAPGO_KEEP_0__

To make this work, you need to get your API key for Capgo, add it in the Vous pouvez maintenant commiter ces deux fichiers et voir votre premier tag apparaitre dans GitHub ! L'ajout du commit générera un nouveau build pour le canal de production. CAPGO_TOKEN.

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

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

You should add your test in the build step to ensure your code is working.

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

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

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

Continuez à partir de l'application de construction et de mise en production automatique avec des actions Github

Si vous utilisez L'application de construction et de mise en production automatique avec des actions Github pour planifier l'automatisation CI/CD, connectez-la 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 Actions d'intégration de GitHub pour les détails d'implémentation dans les actions d'intégration de GitHub

Mises à jour en temps réel pour les applications Capacitor

Lorsqu'un bug de la couche web est en ligne, expédiez la correction par Capgo au lieu d'attendre des jours pour l'approbation de la boutique d'applications. Les utilisateurs reçoivent la mise à jour en arrière-plan tandis que les modifications natives restent dans la voie de revue normale.

Commencez dès maintenant

Dernières actualités de notre Blog

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