CI/CD für TypeScript-Projekte: GitHub Actions von Grund auf einrichten

Einführung in CI/CD für TypeScript-Projekte

Moderne Softwareentwicklung ist ohne Automatisierung nicht denkbar. CI/CD (Continuous Integration / Continuous Delivery) ist eine Praxis, die es Entwicklungsteams ermöglicht, Änderungen schnell und sicher in die Produktion zu bringen. Für Projekte mit TypeScript, insbesondere im Node.js-Ökosystem, wird die Einrichtung einer CI/CD-Pipeline zu einer kritischen Aufgabe.

In diesem Artikel werden wir durchgehen, wie man eine vollständige CI/CD-Pipeline für ein TypeScript-Projekt mit GitHub Actions einrichtet. Sie erfahren, wie Sie das Ausführen von Tests, den Projekt-Build und das Deployment auf das Hosting automatisieren können. Das Material richtet sich an Entwickler, die bereits mit TypeScript vertraut sind und moderne DevOps-Praktiken einführen möchten.

Was ist GitHub Actions und warum ist es praktisch für TypeScript

GitHub Actions ist ein integriertes CI/CD-System, mit dem Sie automatisierte Workflows direkt in Ihrem GitHub-Repository erstellen können. Hauptvorteile:

• Kostenloses Kontingent — für öffentliche Repositories sind 2000 Build-Minuten pro Monat verfügbar.
• Integration mit GitHub — keine Einrichtung von Drittanbieterdiensten erforderlich.
• Flexibilität — unterstützt alle Sprachen, einschließlich TypeScript, durch die Ausführung von Shell-Befehlen.
• Großes Ökosystem — vorgefertigte Actions für das Deployment auf AWS, Vercel, Netlify und andere Plattformen.

Für TypeScript-Projekte ist GitHub Actions ideal geeignet, da es das einfache Ausführen von npm- oder yarn-Befehlen, die Verwendung von Dependency-Caching und parallelen Aufgaben ermöglicht.

Grundlegende Struktur einer Workflow-Datei

Ein Workflow in GitHub Actions wird in YAML-Dateien beschrieben, die im Verzeichnis .github/workflows/ gespeichert werden. Betrachten wir eine minimale Konfiguration für ein TypeScript-Projekt.

Erstellen Sie die Datei .github/workflows/ci.yml:

name: CI Pipeline

on:  push:    branches: [ main, develop ]  pull_request:    branches: [ main ]

jobs:  build-and-test:    runs-on: ubuntu-latest

    strategy:      matrix:        node-version: [18.x, 20.x]

    steps:      - name: Checkout repository        uses: actions/checkout@v4

      - name: Setup Node.js ${{ matrix.node-version }}        uses: actions/setup-node@v4        with:          node-version: ${{ matrix.node-version }}

      - name: Install dependencies        run: npm ci

      - name: Lint check        run: npm run lint

      - name: Type check        run: npx tsc --noEmit

      - name: Run tests        run: npm test

      - name: Build project        run: npm run build

Erläuterung der Schlüsselelemente:

• on — Auslöser für den Start (push in main/develop, pull request).
• runs-on — Betriebssystem für die Ausführung (ubuntu-latest).
• matrix — parallele Ausführung mit verschiedenen Node.js-Versionen (18 und 20).
• actions/checkout — Standard-Action zum Klonen des Repositories.
• actions/setup-node — Installation der angegebenen Node.js-Version.
• npm ci — saubere Installation der Abhängigkeiten aus der Lock-Datei (schneller und zuverlässiger als npm install).

Caching hinzufügen, um den Build zu beschleunigen

Um Abhängigkeiten nicht jedes Mal herunterladen zu müssen, fügen Sie Caching hinzu:

      - name: Cache Node.js modules        uses: actions/cache@v3        with:          path: ~/.npm          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}          restore-keys: |            ${{ runner.os }}-node-

Dieser Schritt cached ~/.npm basierend auf dem Hash der package-lock.json. Bei einem erneuten Lauf, wenn sich die Abhängigkeiten nicht geändert haben, wird der Cache wiederhergestellt, was 30-60 Sekunden spart.