CI/CD-Pipeline für TypeScript: Einrichtung von Grund auf mit PythonLib

CI/CD-Pipeline für TypeScript: Einrichtung von Grund auf – Schritt-für-Schritt-Anleitung

Sie haben ein cooles Projekt in TypeScript geschrieben. Der Code ist schön, die Typen sind streng, die Logik ist ausgefeilt. Aber jedes Mal, wenn Sie ein Update auf den Server einspielen müssen, starten Sie manuell den Build, überprüfen, ob nichts kaputt gegangen ist, und beten, dass die Produktion nicht abstürzt. Kommt Ihnen das bekannt vor?

Es ist Zeit, das zu ändern. Ein CI/CD-Pipeline ist keine Magie für Senioren mit zwanzig Jahren Erfahrung. Es ist ein Werkzeug, das die Routine automatisiert: Linting, Tests, Build und Deployment. Ein Commit in den Branch – und alles fliegt automatisch in die Produktion, ohne Nervenflattern.

In diesem Artikel richten wir von Grund auf einen vollwertigen CI/CD-Pipeline für ein TypeScript-Projekt ein. Am Beispiel von GitHub Actions – einem kostenlosen und leistungsstarken Tool. Sie lernen:

\n
• Automatisches Linting und Formatierung hinzuzufügen
\n
• Unit-Tests auszuführen und Typen zu überprüfen
\n
• Die Anwendung zu bauen und auf einem entfernten Server zu deployen
\n
• Typische Fehler bei der CI/CD-Einrichtung zu vermeiden
\n

Bereit? Los geht's!

Warum CI/CD für ein TypeScript-Projekt kritisch wichtig ist

TypeScript ist eine streng typisierte Sprache, die zu JavaScript kompiliert wird. Auf den ersten Blick vermittelt dies eine Illusion von Sicherheit: Wenn der Code kompiliert wurde, funktioniert er. Aber in der Praxis fängt die Kompilierung keine logischen Fehler, Probleme mit APIs oder kaputte Abhängigkeiten.

CI/CD (Continuous Integration / Continuous Deployment) löst dieses Problem:

\n
• Automatische Überprüfung: Jeder Commit durchläuft die Pipeline – Linting, Tests, Kompilierung. Wenn etwas kaputt ist, erfahren Sie es in einer Minute, nicht in einer Woche.
\n
• Einheitlicher Standard: Das gesamte Team arbeitet nach denselben Regeln. Niemand vergisst, vor dem Push die Tests auszuführen.
\n
• Schnelles Deployment: Keine manuellen Befehle auf dem Server mehr. Ein Merge in main – und das Update ist bereits auf der Live-Seite.
\n

Für TypeScript ist CI/CD besonders wichtig, da Typfehler nur zur Laufzeit auftreten können, wenn die Kompilierung nicht richtig konfiguriert ist. Die Pipeline verhindert dies.

Schritt 1: Vorbereitung des TypeScript-Projekts

Bevor Sie CI/CD einrichten, stellen Sie sicher, dass das Projekt für die Automatisierung bereit ist. Hier ist die Mindestausstattung:

\n
• package.json mit definierten Skripten
\n
• tsconfig.json – TypeScript-Konfiguration
\n
• ESLint und Prettier – für einheitlichen Code
\n
• Tests (Jest, Vitest oder Mocha)
\n

Angenommen, Sie haben ein einfaches Projekt. Die Struktur könnte so aussehen:

my-ts-project/\n├── src/\n│   ├── index.ts\n│   └── utils.ts\n├── tests/\n│   └── utils.test.ts\n├── .eslintrc.json\n├── .prettierrc\n├── tsconfig.json\n├── package.json\n└── README.md\n

Stellen Sie sicher, dass in der package.json die Skripte definiert sind:

{\n  "scripts": {\n    "lint": "eslint src/ tests/ --ext .ts",\n    "format": "prettier --check src/ tests/",\n    "type-check": "tsc --noEmit",\n    "test": "jest",\n    "build": "tsc",\n    "start": "node dist/index.js"\n  }\n}\n

Jetzt ist das Projekt bereit für CI/CD. Wenn etwas fehlt – fügen Sie es hinzu. Die Pipeline wird genau diese Befehle aufrufen.

Schritt 2: Auswahl der CI/CD-Plattform

Es gibt viele Optionen: Jenkins, GitLab CI, CircleCI, Travis CI. Aber für Anfänger und kleine Projekte ist GitHub Actions die beste Wahl:

\n
• In GitHub integriert – keine separate Einrichtung erforderlich
\n
• Kostenloses Kontingent: 2000 Minuten pro Monat (für private Repositories)
\n
• Riesiges Ökosystem an vorgefertigten Actions
\n
• Verständliche YAML-Syntax
\n

Wenn Ihr Code auf GitLab liegt – verwenden Sie GitLab CI (die Beschreibung ist fast identisch). Aber in diesem Artikel arbeiten wir mit GitHub.

Schritt 3: Erstellung der CI/CD-Pipeline – die erste Datei

Erstellen Sie im Stammverzeichnis des Projekts den Ordner .github/workflows/ und darin die Datei ci.y