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

Einführung in CI/CD und GitHub Actions für JavaScript

Die moderne JavaScript-Entwicklung mit Node.js erfordert nicht nur qualitativ hochwertigen Code, sondern auch einen zuverlässigen Prozess zur Auslieferung an die Benutzer. CI/CD (Continuous Integration / Continuous Deployment) ist eine Sammlung von Praktiken, die das Erstellen, Testen und Bereitstellen von Code automatisieren. Eines der beliebtesten Werkzeuge zur Implementierung von CI/CD ist GitHub Actions — ein integriertes Workflow-Automatisierungssystem auf der GitHub-Plattform.

In diesem Artikel werden wir uns ausführlich damit befassen, wie man CI/CD für ein JavaScript (Node.js)-Projekt mit GitHub Actions einrichtet. Sie lernen, wie Sie Pipelines erstellen, Tests ausführen, Linting durchführen, das Projekt bauen und automatisch auf einem Server oder in der Cloud bereitstellen. Das Material wird sowohl für Anfänger als auch für erfahrene Entwickler nützlich sein, die den Entwicklungsprozess optimieren möchten.

GitHub Actions Grundlagen: Struktur und Syntax

GitHub Actions basiert auf YAML-Dateien, die im Verzeichnis .github/workflows Ihres Repositorys gespeichert sind. Jede solche Datei definiert einen oder mehrere Workflows, die durch bestimmte Ereignisse ausgelöst werden: Push, Pull-Request, Release-Erstellung usw.

Die grundlegende Struktur eines Workflows umfasst:

• name — der Name der Pipeline;
• on — das Ereignis, das die Ausführung auslöst;
• jobs — eine Reihe von Aufgaben, die nacheinander oder parallel ausgeführt werden;
• steps — Schritte innerhalb jedes Jobs (Befehle, Aktionen).

Schauen wir uns ein minimales Beispiel für ein Node.js-Projekt an:

name: Node.js CI

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

jobs:  build:    runs-on: ubuntu-latest

    steps:      - uses: actions/checkout@v4      - name: Setup Node.js        uses: actions/setup-node@v4        with:          node-version: '20'      - run: npm ci      - run: npm test

In diesem Beispiel verwenden wir integrierte Aktionen: actions/checkout zum Klonen des Repositorys und actions/setup-node zur Installation der erforderlichen Node.js-Version. Der Befehl npm ci installiert Abhängigkeiten strikt gemäß package-lock.json, und npm test führt die Tests aus.

Einrichtung von Tests und Linting

Eine hochwertige CI/CD-Pipeline für ein JavaScript-Projekt sollte Code-Konformitätsprüfungen und automatisierte Tests umfassen. Schauen wir uns ein erweitertes Beispiel mit gängigen Werkzeugen an: ESLint für Linting, Jest für Tests und Prettier für die Formatierung.

Fügen Sie die erforderlichen Abhängigkeiten zum Projekt hinzu:

npm install --save-dev eslint jest prettier eslint-config-prettier

Erstellen Sie eine Konfigurationsdatei .eslintrc.json:

{  "env": {    "node": true,    "es2021": true,    "jest": true  },  "extends": ["eslint:recommended", "prettier"],  "parserOptions": {    "ecmaVersion": "latest",    "sourceType": "module"  },  "rules": {    "no-console": "warn",    "semi": ["error", "always"]  }}

Aktualisieren Sie nun die Workflow-Datei:

name: Lint and Test

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

jobs:  quality:    runs-on: ubuntu-latest

    steps:      - uses: actions/checkout@v4      - uses: actions/setup-node@v4        with:          node-version: '20'          cache: 'npm'

      - name: Install dependencies        run: npm ci

      - name: Run linter        run: npx eslint .

      - name: Check formatting        run: npx prettier --check .

      - name: Run tests        run: npm test

      - name: Upload test coverage