Zum Hauptinhalt springen
CI/CD

Automatisches Build- und Release-App mit Github-Aktionen

Erstellen Sie Ihre eigene CI/CD-Pipeline mit Github-Aktionen kostenlos und deployen Sie Ihre Ionic Capacitor-JS-Anwendung bei jedem Push auf main.

Artikelcredits

Martin Donadieu

Schreiber

Valeria

Rezensent

Jordan

Redakteur

Automatischer Build und Release-App mit Github-Aktionen

Dieses Tutorial konzentriert sich auf die GitHub-Hosting, aber Sie können es mit wenigen Anpassungen auf jede andere CI/CD-Plattform anwenden.

Vorwort

Stellen Sie sicher, dass Sie Ihre Capacitor-App zuerst in Capgo hinzugefügt haben, da dieses Tutorial nur auf die Upload-Phase fokussiert ist. Wenn Sie Ihre App in Capgo hinzufügen müssen, können Sie diesem Tutorial folgen. Tutorial

Commit-Konvention

Zuerst müssen Sie die Commit-Konvention befolgen konventionelle Commits` dies hilft den Werkzeugen zu verstehen, wie die Versionsnummer zu aktualisieren ist, es dauert 5 Minuten, um es zu lernen

Konventionelle Commits

` GitHub Aktionen für die Etikettierung

Dann müssen Sie Ihre erste GitHub Aktion erstellen, um automatisch zu bauen und eine Etikettierung zu erstellen

Eine Datei erstellen unter diesem Pfad: .github/workflows/bump_version.yml

mit diesem Inhalt:

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

Dies wird für jeden Commit in Ihrer Hauptzweig eine Etikettierung freigeben. Und eine Änderungsprotokoll-Eintrag für jeden Commit in der Hauptzweig hinzufügen CHANGELOG.md.

Keine Sorge, wenn Sie diese Datei nicht haben, sie wird für Sie erstellt

Um dies zu ermöglichen, erstellen Sie ein Persönlicher Zugriffstoken und fügen Sie es Ihrem GitHub hinzu Geheimnisse als PERSONAL_ACCESS_TOKEN.

Dies ist erforderlich, damit der CI-Server die Änderungsliste committet.

Wenn Sie den Token erstellen, wählen Sie die Ablaufzeit als never und den Umfang als repo.

Zuletzt setzen Sie die Version in Ihrem package.json Datei, synchronisiere sie mit deiner Native Version, die es erleichtern wird, dann der nächste Schritt.

Dies ist nur erforderlich zum ersten Mal, dann werden die Werkzeuge es selbstständig aktualisieren.

Sie können jetzt diese beiden Dateien committieren und sehen, wie Ihr erster Tag in GitHub erscheint!

Beide native und Web-Plattformen werden die Versionsnummer nach jedem Commit erhöhen.

Aktionen für die GitHub-Erstellung

Erstellen Sie ein Datei an diesem Pfad: .github/workflows/build.yml

Mit diesem Inhalt:

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

Dies installiert und baut Ihre Abhängigkeit vor der Übermittlung an die Capgo.

Wenn Ihre Befehl für die Erstellung anders ist, können Sie ihn im Schritt ändern. build_code step.

Um dies zu ermöglichen, benötigen Sie Ihren API-Schlüssel für Capgo, fügen Sie ihn in der Geheimnis deines GitHub-Repositories as CAPGO_TOKEN.

Sie können diese beiden Dateien jetzt committen und sehen, wie Ihre erste Tag in GitHub erscheint!

Fügen Sie dem Commit hinzu, um eine neue Buildversion für den Produktionskanal zu generieren.

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

Gehe zu deinem Capgo-Dashboard und überprüfe deine gerade erstellte Build, jetzt hast du dein CI/CD-System.

Wenn du allen deinen Benutzern ermöglichen möchtest, das Update so schnell wie möglich zu erhalten, gehe zu deinem Channel und setze es auf public.

Du kannst auch die native Build deiner Ionic Capacitor-JavaScript-App hinzufügen, indem du diese Anleitung befolgst 👇

Fahre fort mit der Anwendung "Automatische Build und Release" mit Github-Aktionen

Wenn Sie GitHub Actions verwenden Automatische Build und Release mit Github-Aktionen um die Automatisierung von CI/CD zu planen, verbinde es mit Capgo-CI/CD für den Produktworkflow in Capgo-CI/CD Capgo-Native Builds für den Produktworkflow in Capgo-Native Builds Capgo-Integrations zur Produktworkflow in Capgo Integrations, CI/CD-Integration zur Implementierungsdetail in CI/CD-Integration, und GitHub Actions-Integration zur Implementierungsdetail in GitHub Actions-Integration.

Live-Updates für Capacitor-Apps

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

Neueste von unserem Blog

Capgo bietet Ihnen die besten Einblicke, die Sie benötigen, um eine wirklich professionelle mobile App zu erstellen.