Dans le cadre de mon apprentissage des pratiques DevOps modernes, j’ai conçu et implémenté un pipeline CI/CD (Continuous Integration / Continuous Deployment) capable de déployer automatiquement une application web frontend sur deux environnements de production distincts : Vercel et GitHub Pages.
Cette mission constitue une application concrète des concepts fondamentaux du DevOps, notamment l’automatisation des processus, la réduction des interventions manuelles et la mise en place d’une chaîne de livraison logicielle fiable et reproductible.
Dans ce projet, le déploiement sur les deux plateformes n’est pas un doublon mais une démarche pédagogique et technique délibérée permettant de tester la flexibilité de l'orchestrateur. Voici comment elles se comparent :
| Critère | GitHub Pages | Vercel |
|---|---|---|
| Hébergement | ||
| Statique uniquement | Statique + SSR + Serverless | |
| Domaine gratuit | ||
| username.github.io | projet.vercel.app | |
| CI/CD intégré | ||
| Via GitHub Actions | Natif + GitHub Actions | |
| Performance | ||
| Bonne | Excellente (Edge Network) | |
| Previews PR | ||
| Non | Oui (automatique) | |
| Gratuit | ||
| Oui (illimité) | Oui (avec limites) | |
| Cas d’usage | ||
| Portfolios, docs | Apps React/Next.js, SaaS |
⚠️
Le problème du double déploiement :Laisser Vercel en mode automatique génère un conflit critique avec GitHub Actions. Pour éviter que deux builds s'exécutent en parallèle, j'ai désactivé le déploiement natif de Vercel en ajoutant un fichiervercel.json
à la racine contenant"git": { "deploymentEnabled": false }
.
deploy.yml
Voici le code source du fichier de configuration de l'orchestrateur GitHub Actions (.github/workflows/deploy.yml
). Ce script gère séquentiellement l'installation, le build et la publication vers nos deux cibles :
name: CI/CD -- Deploy to Vercel & GitHub Pages
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
permissions:
contents: write
steps:
- name: Checkout repository
uses: actions/checkout@v6
- name: Setup Node.js
uses: actions/setup-node@v6
with:
node-version: '24'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build application
run: npm run build
- name: Deploy to Vercel
uses: amondnet/vercel-action@v42
with:
vercel-token: \${{ secrets.VERCEL_TOKEN }}
vercel-org-id: \${{ secrets.VERCEL_ORG_ID }}
vercel-project-id: \${{ secrets.VERCEL_PROJECT_ID }}
vercel-args: '--prod'
- name: Build for GitHub Pages
run: npm run build:gh
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: \${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
npm ci
au lieu de npm install
:package-lock.json
afin de garantir un build déterministe.