{"slug": "comment-orchestrer-un-double-deploiement-automatique-sur-vercel-github-pages", "title": "Comment orchestrer un double déploiement automatique sur Vercel & GitHub Pages avec GitHub Actions", "summary": "A developer designed and implemented a CI/CD pipeline using GitHub Actions to automatically deploy a frontend web application to both Vercel and GitHub Pages. To avoid conflicts, the developer disabled Vercel's native auto-deployment by adding a vercel.json file. The pipeline uses npm ci for deterministic builds and sequential deployment steps.", "body_md": "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**.\n\nCette 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.\n\nDans 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 :\n\n| Critère | GitHub Pages | Vercel |\n|---|---|---|\nHébergement |\nStatique uniquement | Statique + SSR + Serverless |\nDomaine gratuit |\nusername.github.io | projet.vercel.app |\nCI/CD intégré |\nVia GitHub Actions | Natif + GitHub Actions |\nPerformance |\nBonne | Excellente (Edge Network) |\nPreviews PR |\nNon | Oui (automatique) |\nGratuit |\nOui (illimité) | Oui (avec limites) |\nCas d’usage |\nPortfolios, docs | Apps React/Next.js, SaaS |\n\n⚠️\n\nLe 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 fichier`vercel.json`\n\nà la racine contenant`\"git\": { \"deploymentEnabled\": false }`\n\n.\n\n`deploy.yml`\n\nVoici le code source du fichier de configuration de l'orchestrateur GitHub Actions (`.github/workflows/deploy.yml`\n\n). Ce script gère séquentiellement l'installation, le build et la publication vers nos deux cibles :\n\n```\nname: CI/CD -- Deploy to Vercel & GitHub Pages\n\n# Declenchement : uniquement sur push vers main\non:\n  push:\n    branches:\n      - main\n\njobs:\n  build-and-deploy:\n    runs-on: ubuntu-latest\n    permissions:\n      contents: write\n\n    steps:\n      # Etape 1 : Recuperer le code source\n      - name: Checkout repository\n        uses: actions/checkout@v6\n\n      # Etape 2 : Configurer Node.js\n      - name: Setup Node.js\n        uses: actions/setup-node@v6\n        with:\n          node-version: '24'\n          cache: 'npm'\n\n      # Etape 3 : Installer les dependances (mode CI)\n      - name: Install dependencies\n        run: npm ci\n\n      # Etape 4a : Build pour Vercel (base \"/\")\n      - name: Build application\n        run: npm run build\n\n      # Etape 5 : Deployer sur Vercel\n      - name: Deploy to Vercel\n        uses: amondnet/vercel-action@v42\n        with:\n          vercel-token: \\${{ secrets.VERCEL_TOKEN }}\n          vercel-org-id: \\${{ secrets.VERCEL_ORG_ID }}\n          vercel-project-id: \\${{ secrets.VERCEL_PROJECT_ID }}\n          vercel-args: '--prod'\n\n      # Etape 4b : Build pour GitHub Pages\n      - name: Build for GitHub Pages\n        run: npm run build:gh\n\n      # Etape 6 : Deployer sur GitHub Pages\n      - name: Deploy to GitHub Pages\n        uses: peaceiris/actions-gh-pages@v3\n        with:\n          github_token: \\${{ secrets.GITHUB_TOKEN }}\n          publish_dir: ./dist\n```\n\n`npm ci`\n\nau lieu de `npm install`\n\n:`package-lock.json`\n\nafin de garantir un build déterministe.", "url": "https://wpnews.pro/news/comment-orchestrer-un-double-deploiement-automatique-sur-vercel-github-pages", "canonical_source": "https://dev.to/beautero_kenne_2b7e9bfb01/comment-orchestrer-un-double-deploiement-automatique-sur-vercel-github-pages-avec-github-actions-1pni", "published_at": "2026-06-16 21:58:28+00:00", "updated_at": "2026-06-16 22:28:59.206326+00:00", "lang": "en", "topics": ["developer-tools", "mlops"], "entities": ["GitHub Actions", "Vercel", "GitHub Pages", "Node.js"], "alternates": {"html": "https://wpnews.pro/news/comment-orchestrer-un-double-deploiement-automatique-sur-vercel-github-pages", "markdown": "https://wpnews.pro/news/comment-orchestrer-un-double-deploiement-automatique-sur-vercel-github-pages.md", "text": "https://wpnews.pro/news/comment-orchestrer-un-double-deploiement-automatique-sur-vercel-github-pages.txt", "jsonld": "https://wpnews.pro/news/comment-orchestrer-un-double-deploiement-automatique-sur-vercel-github-pages.jsonld"}}