CI/CD mit GitHub Actions für Laravel und Vue.js einrichten

CI/CD (Continuous Integration/Continuous Deployment) ist eine Methode der Softwareentwicklung, die den Prozess der Auslieferung von Updates und neuen Funktionen an Endnutzer vereinfachen und beschleunigen soll.

CI/CD-Grundlagen

CI (Continuous Integration)
Automatisiert das Zusammenführen von Codeänderungen aus verschiedenen Quellen in eine Hauptbranch. Beinhaltet automatische Tests zur Fehlererkennung.
CD (Continuous Deployment)
Automatisiert die Bereitstellung getesteten Codes in der Produktionsumgebung, sobald Tests erfolgreich sind.

Vorteile von CI/CD

Schnellere Markteinführung
Automatisierung verkürzt Entwicklungszyklen.
Höhere Codequalität
Regelmäßige Tests minimieren Fehlerrisiken.
Effizienzsteigerung
Entwickler konzentrieren sich auf Code, nicht auf manuelle Prozesse.
Schnelles Rollback
Bei Problemen kann einfach auf eine frühere Version zurückgesetzt werden.
Transparenz
Jede Änderung ist nachvollziehbar und zuweisbar.

CI/CD mit GitHub Actions konfigurieren

GitHub Actions ermöglicht die Automatisierung von Workflows direkt im Repository.

Schritt 1: Workflow-Datei erstellen

Erstellen Sie eine Datei .github/workflows/dev.yml mit folgendem Inhalt:

name: Continuous Integration and Deployment

on:
  push:
    branches: [dev]
  pull_request:
    branches: [dev]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Setup PHP
        uses: shivammathur/setup-php@v2
        with:
          php-version: '8.1'

      - name: Install Dependencies
        run: composer install --prefer-dist --no-progress --no-suggest

      - name: Setup Laravel
        run: |
          cp .env.example .env
          php artisan config:clear
          php artisan cache:clear
          php artisan key:generate

      - name: Composer Lint
        run: ./vendor/bin/phplint --no-cache

      - name: Composer Audit
        run: composer audit

      - name: Composer Validate
        run: composer validate --no-check-all --strict

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Install Node.js Dependencies
        run: npm install

      - name: Build Vue.js
        run: npm run build

      - name: Run PHPUnit Tests
        run: ./vendor/bin/phpunit --colors=always

      - name: Lint PHP Code
        run: ./vendor/bin/pint --test

      - name: PHPStan
        run: ./vendor/bin/phpstan analyse

  deploy:
    needs: [build]
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Setup PHP
        uses: shivammathur/setup-php@v2
        with:
          php-version: '8.1'

      - name: Install Dependencies
        run: composer install -q --no-ansi --no-interaction --no-scripts --no-progress --prefer-dist

      - name: Setup Environment File
        run: |
          cp .env.example .env
          sed -i 's/DB_USERNAME=root/DB_USERNAME=${{ secrets.DB_USERNAME }}/g' .env
          sed -i 's/DB_PASSWORD=/DB_PASSWORD=${{ secrets.DB_PASSWORD }}/g' .env
          sed -i 's|VTIGER_URL=http://localhost:8080|VTIGER_URL=${{ secrets.VTIGER_URL }}|g' .env
          sed -i 's/VTIGER_USERNAME=admin/VTIGER_USERNAME=${{ secrets.VTIGER_USERNAME }}/g' .env
          sed -i 's/VTIGER_ACCESS_KEY=1234567890/VTIGER_ACCESS_KEY=${{ secrets.VTIGER_ACCESS_KEY }}/g' .env

      - name: Setup Laravel
        run: |
          php artisan config:clear
          php artisan cache:clear
          php artisan key:generate
          php artisan storage:link

      - name: Permission setup
        run: |
          chmod -R 777 storage bootstrap/cache

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Install Node.js Dependencies
        run: npm install

      - name: Build Vue.js
        run: npm run build

      - name: Clean Up
        run: rm -rf node_modules

      - name: copy file via ssh key
        uses: appleboy/scp-action@v0.1.4
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USERNAME }}
          password: ${{ secrets.PASSWORD }}
          port: 22
          key: ${{ secrets.DEPLOY_KEY }}
          source: "./"
          target: "~/path_to_project"

      - name: Run laravel commands
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USERNAME }}
          key: ${{ secrets.DEPLOY_KEY }}
          port: 22
          script: |
            chown -R www-root ~/path_to_project
            cd ~/path_to_project
            php artisan cache:clear
            php artisan config:clear
            php artisan view:clear
            php artisan migrate

Schritt 2: Erklärung des Workflows

Trigger: Der Workflow startet bei push oder pull_request in der Branch dev.
Jobs:
Build: Installiert Abhängigkeiten, führt Tests durch und baut das Vue.js-Frontend.
Deploy: Überträgt Dateien per SCP auf den Server, aktualisiert Berechtigungen und führt Laravel-Befehle aus.

Sicherheit mit GitHub Secrets

Sensible Daten wie SSH-Keys oder Datenbankzugänge werden als GitHub Secrets gespeichert. Beispiele:

SERVER_IP
DB_USERNAME
VTIGER_ACCESS_KEY

Fazit

Dieses Setup automatisiert Testing, Linting und Deployment für Laravel- und Vue.js-Projekte. Passen Sie die Workflow-Schritte an Ihre Infrastruktur an (z. B. Docker-Unterstützung oder Notification-Integration).

🔗 Beispiel-Repository: GitHub-Link

Tipp: Nutzen Sie act (ein CLI-Tool), um Workflows lokal vor dem Push zu testen.

Entwickler, der außergewöhnliche CRM- und Laravel-Lösungen liefert