Saltar al contenido principal
CI/CD

Build y release automáticos de apps con Github actions

Crea tu propio pipeline de CI/CD con Github actions gratis y despliega tu app Ionic Capacitor JS cada vez que hagas push a main.

Ilustración del blog: build y release automáticos de la app con Github Actions Capgo

Este tutorial se centra en el hosting de GitHub, pero puedes adaptarlo con pequeños ajustes a cualquier otra plataforma de CI/CD.

Prefacio

Asegúrate de haber añadido primero tu app Capacitor a Capgo; este tutorial solo cubre la fase de upload. Si necesitas añadir tu app a Capgo, puedes seguir esta guía Tutorial

Convención de commits

Primero, debes empezar a seguir la convención de commits commits convencionales` esto ayudará a las herramientas a entender cómo actualizar el número de versión; se aprende en 5 min.

Commits convencionales

acciones de GitHub para tags

Luego, debes crear tu primera acción de GitHub para hacer el build y crear el tag automáticamente.

Crea un archivo en esta ruta: .github/workflows/bump_version.yml

con este contenido:

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

Esto publicará un tag por cada commit en tu rama main y añadirá una entrada al changelog por cada commit en la rama main en CHANGELOG.md.

No te preocupes si no tienes este archivo, se creará automáticamente.

Para que esto funcione, crea un TOKEN DE ACCESO PERSONAL y añadirlo a tu GitHub secretos como PERSONAL_ACCESS_TOKEN.

Esto es necesario para que la CI pueda hacer commit del changelog.

Al crear el token, elige la expiración como never y el scope como repo.

Por último, establece la versión en tu package.json archivo, sincronízalo con tu número de versión nativa para facilitar el siguiente paso.

Esto solo es necesario la primera vez; después, las herramientas lo mantendrán actualizado.

¡Ya puedes hacer commit de estos dos archivos y ver aparecer tu primer tag en GitHub!

Tanto la plataforma nativa como la web incrementarán el número de versión tras cada commit.

acciones de GitHub para el build

Crea un archivo en esta ruta: .github/workflows/build.yml

con este contenido:

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

Esto instalará y hará el build de tu dependencia antes de enviarla a Capgo.

Si tu comando de build es distinto, puedes cambiarlo en el build_code paso.

Para que esto funcione, necesitas obtener tu clave de API para Capgo y añadirla en el secret de tu repositorio de GitHub como CAPGO_TOKEN.

¡Ya puedes hacer commit de estos dos archivos y ver aparecer tu primer tag en GitHub!

Al hacer el commit se generará un nuevo build para el canal de producción.

Deberías añadir tus tests en el paso de build para asegurar que tu code funciona.

Ve a tu dashboard de Capgo y revisa el build que acaba de aparecer; ya tienes tu sistema CI/CD.

Si quieres que todos tus usuarios reciban la actualización en cuanto esté disponible, ve a tu canal y configúralo en public.

También puedes añadir el build nativo de tu app Ionic Capacitor en JavaScript siguiendo este tutorial 👇

Sigue con la publicación automática de la app con Github actions

Si estás usando Build y release automáticos de apps con Github actions para planificar la automatización de CI/CD, conéctalo con CI/CD de Capgo para el flujo de trabajo del producto en Capgo CI/CD, Native Builds de Capgo para el flujo de trabajo del producto en Capgo Native Builds, Integraciones de Capgo para el flujo de trabajo del producto en Capgo Integraciones, Integración CI/CD para los detalles de implementación de CI/CD Integration, y Integración con GitHub Actions para los detalles de implementación de GitHub Actions Integration.

Live updates para apps Capacitor

Cuando un bug de la capa web está en producción, publica el fix a través de Capgo en lugar de esperar días a la aprobación de la app store. Los usuarios reciben la actualización en segundo plano mientras los cambios nativos siguen el flujo de revisión habitual.

Lo último de nuestro blog

Capgo te da la información clave que necesitas para crear una app móvil realmente profesional.