CI/CD für TypeScript-Projekte: GitHub Actions

Einleitung: Warum CI/CD für TypeScript-Projekte entscheidend ist

Moderne TypeScript-Entwicklung erfordert nicht nur qualitativ hochwertigen Code, sondern auch einen zuverlässigen Prozess, um diesen an die Benutzer auszuliefern. Manuelles Ausführen von Tests, Build und Deployment ist nicht nur Routine, sondern auch eine Fehlerquelle. CI/CD (Continuous Integration / Continuous Deployment) löst dieses Problem, indem es jeden Schritt automatisiert.

In diesem Artikel werden wir einen vollständigen CI/CD-Pipeline für ein TypeScript-Projekt mit GitHub Actions einrichten. Sie erfahren, wie Sie Linting, Tests, Build und Deployment Ihrer Anwendung automatisieren und so Stunden an Arbeitszeit sparen.

Der Artikel wurde für die Plattform PythonLib geschrieben, aber alle Beispiele und Konzepte sind auf jedes TypeScript-Projekt anwendbar. Wir verwenden TypeScript 5.x und Node.js 20.

Hauptteil: Schritt-für-Schritt-Einrichtung von CI/CD

1. Projektstruktur und Vorbereitung

Bevor Sie den Workflow schreiben, stellen Sie sicher, dass Ihr TypeScript-Projekt korrekt eingerichtet ist. Hier ist die minimale Struktur:

my-typescript-app/├── src/│   └── index.ts├── tests/│   └── index.test.ts├── package.json├── tsconfig.json├── .eslintrc.json└── .github/    └── workflows/        └── ci.yml

Wichtig: In der package.json müssen Skripte für Tests und Build definiert sein.

{  "name": "my-typescript-app",  "version": "1.0.0",  "scripts": {    "build": "tsc",    "test": "jest",    "lint": "eslint src/**/*.ts",    "start": "node dist/index.js"  },  "devDependencies": {    "typescript": "^5.3.0",    "jest": "^29.7.0",    "@types/jest": "^29.5.0",    "ts-jest": "^29.1.0",    "eslint": "^8.50.0"  }}

Stellen Sie sicher, dass die tsconfig.json ein korrektes outDir (z.B. "./dist") und den strict-Modus enthält.

2. Erstellen eines GitHub Actions Workflows

GitHub Actions basiert auf YAML-Dateien im Verzeichnis .github/workflows/. Erstellen Sie eine Datei ci.yml mit folgendem Inhalt:

name: CI/CD 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:    - uses: actions/checkout@v4

    - name: Use Node.js ${{ matrix.node-version }}      uses: actions/setup-node@v4      with:        node-version: ${{ matrix.node-version }}        cache: 'npm'

    - name: Install dependencies      run: npm ci

    - name: Lint code      run: npm run lint

    - name: Build project      run: npm run build

    - name: Run tests      run: npm test

    - name: Upload build artifacts      uses: actions/upload-artifact@v4      with:        name: build-${{ matrix.node-version }}        path: dist/

Erläuterung der wichtigsten Punkte:

• on: Der Workflow wird bei Push und Pull Request in die Branches main und develop ausgelöst.
• matrix: Wir testen mit zwei Node.js-Versionen (18 und 20) für Kompatibilität.
• npm ci: Saubere Installation der Abhängigkeiten (schneller und zuverlässiger als npm install).
• upload-artifact: Speichert die gebauten Dateien für das spätere Deployment.

3. Hinzufügen einer Deployment-Phase

Nach erfolgreichem Build und Tests kann die Anwendung automatisch deployed werden. Wir betrachten das Deployment auf GitHub Pages (für statische Seiten) und auf einen VPS per SSH.

Variante A: Deployment auf GitHub Pages

deploy:  needs: build-and-test  runs-on: ubuntu-latest  if: github.ref == 'refs/heads/main'

  steps:  - uses: actions/download-artifact@v4    with:      name: build-20.x      path: dist/

  - name: Deploy to GitHub Pages    uses