📚 Ressources & Cheatsheets

Référence rapide pour toutes les plateformes et outils de déploiement.

🐙 GitHub Pages

🌿 Netlify

▲ Vercel

🏠 Hostinger VPS

🌐 DNS & Domaines

⚡ CI/CD Actions

CLI — gh-pages package

Commande	Description
`npm install -D gh-pages`	Installer gh-pages en dev dependency
`npx gh-pages -d dist`	Déployer le dossier dist/ sur la branche gh-pages
`npx gh-pages -d dist -b main`	Déployer sur une branche custom

package.json scripts

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

predeploy s'exécute automatiquement avant deploy — garantit un build frais.

GitHub Actions — méthode Pages API

name: Deploy GitHub Pages
on:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist/

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/deploy-pages@v4
        id: deployment

Domaine custom — fichier CNAME

monsite.fr

Créez le fichier CNAME dans public/ (Vite le copie automatiquement dans dist/). Contient uniquement le nom de domaine, sans https://.

Enregistrements DNS pour GitHub Pages

Type	Nom	Valeur
A	@	185.199.108.153
A	@	185.199.109.153
A	@	185.199.110.153
A	@	185.199.111.153
CNAME	www	username.github.io

CLI Netlify

Commande	Description
`npm install -g netlify-cli`	Installer la CLI globalement
`netlify login`	Authentification OAuth
`netlify init`	Lier le dossier à un site Netlify
`netlify deploy --dir=dist`	Déploiement preview
`netlify deploy --dir=dist --prod`	Déploiement production
`netlify status`	Informations du site lié
`netlify env:set NOM VALEUR`	Ajouter une variable d'environnement
`netlify env:list`	Lister les variables
`netlify open`	Ouvrir le dashboard dans le navigateur

netlify.toml complet

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  for = "/static/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "/*"
  [headers.values]
    Strict-Transport-Security = "max-age=31536000; includeSubDomains"
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"

status = 200 (rewrite) est obligatoire pour les SPA. status = 301 ou 302 casserait la navigation client-side.

Netlify Function

// netlify/functions/hello.js
exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message: 'Hello from Netlify!' })
  };
};

CLI Vercel

Commande	Description
`npm install -g vercel`	Installer la CLI globalement
`vercel login`	Authentification
`vercel`	Déploiement preview
`vercel --prod`	Déploiement production
`vercel dev`	Serveur de développement local
`vercel ls`	Lister les déploiements
`vercel rollback`	Revenir au déploiement précédent
`vercel env add NOM production`	Ajouter une variable production
`vercel env pull`	Télécharger les variables en .env.local
`vercel domains add monsite.fr`	Ajouter un domaine custom

vercel.json

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "routes": [
    { "src": "/(.*)", "dest": "/index.html" }
  ],
  "headers": [
    {
      "source": "/static/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]
    }
  ]
}

Serverless Function Vercel

// api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Vercel!' });
}

Chaque fichier dans api/ devient une route : api/hello.js → /api/hello

Enregistrements DNS Vercel

Type	Nom	Valeur
A	@	76.76.21.21
CNAME	www	cname.vercel-dns.com

Configuration initiale

Commande	Description
`ssh root@IP`	Connexion SSH
`apt update && apt upgrade -y`	Mise à jour système
`curl -fsSL https://deb.nodesource.com/setup_20.x \| bash -`	Installer Node.js 20 via NodeSource
`apt install -y nodejs`	Installer Node.js
`npm install -g pm2`	Installer PM2
`apt install -y nginx`	Installer Nginx
`apt install -y certbot python3-certbot-nginx`	Installer Certbot

PM2

Commande	Description
`pm2 start server.js --name monapp`	Démarrer une application
`pm2 list`	Lister les processus
`pm2 logs monapp`	Afficher les logs en temps réel
`pm2 restart monapp`	Redémarrer
`pm2 stop monapp`	Arrêter
`pm2 delete monapp`	Supprimer de la liste
`pm2 save`	Sauvegarder la liste des processus
`pm2 startup`	Configurer le démarrage auto au boot

Nginx — configuration SPA + API

server {
    listen 80;
    server_name monsite.fr www.monsite.fr;

    root /var/www/monsite/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location ~* \.(js|css|png|jpg|svg|ico|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

Nginx — commandes

Commande	Description
`nginx -t`	Tester la syntaxe de la configuration
`systemctl reload nginx`	Recharger sans couper les connexions
`systemctl restart nginx`	Redémarrer complètement
`systemctl status nginx`	Vérifier le statut
`ln -s /etc/nginx/sites-available/site /etc/nginx/sites-enabled/`	Activer un site

Certbot (Let's Encrypt)

Commande	Description
`certbot --nginx -d monsite.fr -d www.monsite.fr`	Obtenir et configurer SSL automatiquement
`certbot renew --dry-run`	Tester le renouvellement automatique
`certbot certificates`	Lister les certificats installés

Types d'enregistrements DNS

Nom → IPv4 (ex: monsite.fr → 76.76.21.21)

AAAA

Nom → IPv6

CNAME

Alias → autre nom (ex: www → monsite.fr)

Serveur mail — avec priorité (10, 20...)

TXT

Texte libre : SPF, DKIM, vérification domaine

Name Server — délègue la gestion DNS

IPs par plateforme

Plateforme	Type	Valeur
Vercel	A	76.76.21.21
Vercel www	CNAME	cname.vercel-dns.com
Netlify	A	75.2.60.5
Netlify www	CNAME	monsite.netlify.app
GitHub Pages (×4)	A	185.199.108/109/110/111.153
GitHub Pages www	CNAME	username.github.io

Commandes de diagnostic DNS

Commande	Description
`nslookup monsite.fr`	Résolution DNS simple
`dig monsite.fr`	Résolution détaillée (Linux/Mac)
`dig monsite.fr +short`	Résolution courte — juste l'IP
`dig MX monsite.fr`	Enregistrements mail
`dig TXT monsite.fr`	Enregistrements texte

HTTPS & Sécurité

En-tête	Description
`Strict-Transport-Security`	HSTS — force HTTPS pour max-age secondes
`X-Frame-Options: DENY`	Empêche l'iframe (clickjacking)
`X-Content-Type-Options: nosniff`	Empêche le MIME sniffing
`Content-Security-Policy`	Contrôle les sources de contenu autorisées

TTL recommandé : 300s (5min) lors d'un changement DNS, puis 3600s (1h) ou 86400s (24h) en régime normal.

Anatomie d'un workflow GitHub Actions

name: Pipeline CI/CD           # Nom affiché dans l'onglet Actions

on:                            # Déclencheur(s)
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  ci:                          # Nom du job
    runs-on: ubuntu-latest     # Runner
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci             # Install reproductible
      - run: npm run lint
      - run: npm test
      - run: npm run build

  deploy:
    needs: ci                  # Dépend du job ci
    if: github.ref == 'refs/heads/main'  # Seulement sur main
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npx vercel --prod --token=${{ secrets.VERCEL_TOKEN }}

Conditions utiles

Condition	Description
`if: github.ref == 'refs/heads/main'`	Seulement sur la branche main
`if: github.event_name == 'push'`	Seulement sur push (pas PR)
`if: success()`	Si le job précédent a réussi (défaut)
`if: failure()`	Si le job précédent a échoué
`continue-on-error: true`	Continuer même si cette step échoue

Matrix strategy

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: [18, 20, 22]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node }}
      - run: npm ci && npm test

strategy.matrix crée un job parallèle par combinaison. 3 versions Node = 3 jobs simultanés.

Déploiement VPS via SSH

- name: Deploy via SSH
  uses: appleboy/ssh-action@master
  with:
    host: ${{ secrets.SERVER_IP }}
    username: ${{ secrets.SERVER_USER }}
    key: ${{ secrets.SSH_PRIVATE_KEY }}
    script: |
      cd /var/www/monsite
      git pull origin main
      npm ci --production
      pm2 restart monsite

Variables d'environnement

Syntaxe	Description
`${{ secrets.NOM_DU_SECRET }}`	Secret configuré dans Settings > Secrets
`${{ vars.NOM_VARIABLE }}`	Variable non-secrète configurée dans Settings > Variables
`env:\n NOM: valeur`	Variable locale à la step ou au job
`${{ github.sha }}`	SHA du commit en cours
`${{ github.actor }}`	Utilisateur qui a déclenché le workflow