CI/CD für Node.js- und React-Apps mit GitHub

Schritt-für-Schritt-Anleitung: CI/CD für Node.js- und React-Apps mit GitHub Actions einrichten

In dieser Anleitung erfahren Sie, wie Sie mit GitHub Actions CI/CD-Pipelines für Ihre Node.js- oder React-Anwendungen einrichten, um Linting, Tests, Build und Deployment bei jedem Push oder Pull Request zu automatisieren.

1. Projektstruktur

Ihr Projekt könnte wie folgt aussehen:

my-app/
├── .github/
│   └── workflows/      ← GitHub Actions YAML-Dateien
├── src/                ← Quellcode der Anwendung
├── package.json
└── ...

2. GitHub Actions Workflow erstellen

Erstellen Sie im Ordner .github/workflows/ eine Datei mit dem Namen ci-cd.yml:

name: CI/CD Pipeline

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: npm ci

      - name: Lint
        run: npm run lint

      - name: Run Tests
        run: npm test

      - name: Build Project
        run: npm run build

      - name: Deploy
        if: github.ref == 'refs/heads/main'
        run: echo "Deploying..."

3. Linting und Formatierung

Stellen Sie sicher, dass Sie in Ihrer package.json Linting-Skripte definiert haben:

"scripts": {
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "format": "prettier --write .",
  "test": "jest",
  "build": "react-scripts build"
}

Dadurch wird sichergestellt, dass Ihr Code vor dem Testen und Bauen sauber ist.

4. Tests ausführen

Verwenden Sie jest oder Ihr bevorzugtes Test-Framework. Beispiel:

npm run test

Optional können Sie Coverage-Thresholds festlegen, um die Codequalität sicherzustellen.

5. Build und Deployment

Während der CI wird Ihre React- oder Node.js-App mit folgendem Befehl gebaut:

npm run build

Für das Deployment können Sie:

• Mit CLI zu Vercel/Netlify deployen
• FTP oder SSH verwenden, um Dateien auf Ihren Server hochzuladen
• Automatisiertes Deployment auf einem VPS mit rsync oder GitHub Actions durchführen

6. Secrets-Verwaltung

Nutzen Sie GitHub Secrets, um FTP-Zugangsdaten, API-Keys oder SSH-Keys sicher zu speichern und greifen Sie in Ihrem Workflow darauf zu:

env:
  DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}

7. Optional: Versionsnummer automatisch erhöhen

Sie können mit GitHub Actions oder dem npm version-Befehl in Kombination mit Git-Tags die package.json-Version nach erfolgreichem Deployment automatisch erhöhen.

Zusammenfassung

Mit diesem CI/CD-Setup für Node.js- und React-Projekte stellen Sie sicher, dass Ihre Anwendung automatisch bei jedem Push gelintet, getestet, gebaut und deployed wird, wodurch sich die Codequalität verbessert und die Bereitstellung beschleunigt wird.