BaliseTonSite

Déployer sur Cloudflare

Ton code passe les tests ? Parfait. Maintenant, envoie-le dans le cloud automatiquement.

Cloudflare Pages + GitHub

Le setup le plus simple : connecter ton repo GitHub à Cloudflare Pages. Chaque push sur la branche principale déclenche un build et un déploiement.

Configuration manuelle (Dashboard)

  1. Va sur Cloudflare Dashboard > Workers & Pages
  2. Clique "Create application" > "Pages"
  3. Connecte ton repo GitHub
  4. Configure :
    • Build command : npm run build
    • Build output directory : .next (pour Next.js)
    • Root directory : frontend (si monorepo)
  5. Cloudflare déploie automatiquement à chaque push

Déployer via GitHub Actions

Pour plus de contrôle, tu peux gérer le deploy depuis ton workflow GitHub Actions. Utile quand tu veux conditionner le deploy (seulement après les tests, seulement sur main, etc.).

Bashbash
# .github/workflows/deploy.yml
name: Deploy to Cloudflare

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
          cache-dependency-path: frontend/package-lock.json

      - name: Install
        run: npm ci
        working-directory: frontend

      - name: Build
        run: npm run build
        working-directory: frontend

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy frontend/.next --project-name=mon-site

Preview deployments

Un des super-pouvoirs de Cloudflare Pages : chaque Pull Request génère un preview deployment avec sa propre URL. Tu peux tester les changements avant de merger.

Bashbash
# Chaque PR reçoit une URL unique :
# https://abc123.mon-site.pages.dev

# Tu peux aussi déclencher un preview depuis GitHub Actions :
- name: Deploy Preview
  if: github.event_name == 'pull_request'
  uses: cloudflare/wrangler-action@v3
  with:
    apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
    accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
    command: pages deploy frontend/.next --project-name=mon-site --branch=preview-${{ github.event.pull_request.number }}

Pipeline complet : CI + CD

Bashbash
# Le workflow idéal : tout dans un seul fichier
name: CI/CD Pipeline

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  quality:
    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 lint
      - run: npx tsc --noEmit
      - run: npm run test
      - run: npm run build

  deploy:
    needs: quality               # Attend que quality soit OK
    if: github.ref == 'refs/heads/main'  # Seulement sur main
    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: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy .next --project-name=mon-site

Vérifier le déploiement

  • Status check : le badge GitHub passe au vert
  • Cloudflare Dashboard : voir les déploiements actifs et l'historique
  • Rollback : en un clic, revenir à un déploiement précédent
  • Custom domain : associer ton domaine au projet Pages

Ce que tu as débloqué

  • Connecter un repo GitHub à Cloudflare Pages
  • Déclencher un deploy automatique via GitHub Actions
  • Utiliser les preview deployments sur chaque PR
  • Construire un pipeline CI + CD complet
  • Faire un rollback en cas de problème

Verifie tes acquis

5 questions pour valider ce chapitre

1. Comment connecter un repo GitHub à Cloudflare Pages ?

Valide et sauvegarde ce chapitre

Ne perds pas le fil de ton apprentissage. Chaque QCM terminé sauvegarde ton score. Crée ton profil gratuitement pour débloquer toutes les évaluations du site et retrouver tes résultats plus tard.

Commencer l'aventure
Déjà membre ?Connecte-toi