CI/CD pour les projets TypeScript : GitHub Actions

Introduction : Pourquoi le CI/CD est crucial pour les projets TypeScript

Le développement moderne en TypeScript nécessite non seulement un code de qualité, mais aussi un processus fiable pour le livrer aux utilisateurs. Lancer manuellement les tests, la compilation et le déploiement n'est pas seulement une routine, mais aussi une source d'erreurs. Le CI/CD (Continuous Integration / Continuous Deployment) résout ce problème en automatisant chaque étape.

Dans cet article, nous allons voir comment configurer un pipeline CI/CD complet pour un projet TypeScript avec GitHub Actions. Vous apprendrez à automatiser le linting, les tests, la compilation et le déploiement de votre application, économisant ainsi des heures de travail.

Cet article est rédigé pour la plateforme PythonLib, mais tous les exemples et concepts sont applicables à n'importe quel projet TypeScript. Nous utiliserons TypeScript 5.x et Node.js 20.

Partie principale : Configuration pas à pas du CI/CD

1. Structure du projet et préparation

Avant d'écrire le workflow, assurez-vous que votre projet TypeScript est correctement configuré. Voici la structure minimale :

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

Important : dans package.json, les scripts pour les tests et la compilation doivent être définis.

{  "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"  }}

Assurez-vous que tsconfig.json inclut un outDir correct (par exemple, "./dist") et le mode strict.

2. Création du workflow GitHub Actions

GitHub Actions fonctionne avec des fichiers YAML dans le répertoire .github/workflows/. Créez un fichier ci.yml avec le contenu suivant :

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/

Analyse des points clés :

• on: Le workflow se déclenche sur push et pull request vers les branches main et develop.
• matrix: Nous testons sur deux versions de Node.js (18 et 20) pour la compatibilité.
• npm ci: Installation propre des dépendances (plus rapide et plus fiable que npm install).
• upload-artifact: Nous sauvegardons les fichiers compilés pour le déploiement ultérieur.

3. Ajout de l'étape de déploiement

Après une compilation et des tests réussis, vous pouvez déployer automatiquement l'application. Considérons le déploiement sur GitHub Pages (pour les sites statiques) et sur un VPS via SSH.

Option A : Déploiement sur 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