Aller au contenu principal

Hébergement

Comment mettre son application Javascript en ligne chez Vercel, le créateur de Next.js ?

Hébergement Vercel

Notions théoriques​

Pourquoi utiliser Vercel ?​

Vercel est une plateforme gratuite (dans sa version de base) qui permet de :

  • Déployer facilement une application Next.js
  • Se connecter directement à GitHub
  • Mettre à jour automatiquement le site à chaque push
  • Obtenir une URL publique (ex: https://quiz-cyber.vercel.app)

Comment fonctionne le déploiement ?​

Voici les étapes du déploiment sur Vercel à partir de votre code sur GitHub :

  1. Vous poussez (push) votre code sur GitHub
  2. Vercel détecte le dépôt
  3. Vercel installe automatiquement les dépendances (npm install)
  4. Vercel construit automatiquement le projet (next build)
  5. Vercel met en place un hébergement pour votre site et le publie en ligne
  6. Vercel vous fournit une URL publique

Pour réussir le déploiement​

Pour réussir le déploiement sur Vercel, vous devez :

  • avoir un compte GitHub
  • avoir un projet Next.js fonctionnel
  • avoir poussé (push) votre projet sur GitHub
  • avoir un fichier .env.local contenant vos clés Supabase

Étapes globales du déploiement​

  1. Créer un compte sur vercel.com
  2. Connecter votre compte GitHub
  3. Importer votre projet
  4. Configurer les variables d’environnement
  5. Lancer le déploiement
  6. Tester votre site en ligne

TP pour réfléchir et résoudre des problèmes​

Vous allez mettre en ligne votre application QuizCyber sur Vercel.

Avant de commencer, vous devez :

  • avoir un compte GitHub
  • avoir un projet Next.js fonctionnel
  • avoir poussé (push) votre projet sur GitHub
  • avoir un fichier .env.local contenant vos clés Supabase

Étape 1 — Créer un compte Vercel​

  1. Rendez-vous sur https://vercel.com

    Signup Vercel

  2. Cliquez sur "Sign up" (en haut à droite)

    Signup with GitHub

  3. Choisissez "I'm working on personal projects"

  4. Saisissez votre nom dans le champ Your Name

  5. Cliquez sur le bouton "Continue"

    Signup with GitHub

  6. Choisissez "Continue with GitHub"

    Si vous n’êtes pas connecté à GitHub, une fenêtre s’ouvre pour vous demander vos identifiants GitHub. Signup with GitHub

  7. Pour autoriser Vercel à accéder à vos dépôts GitHub, veuillez cliquer sur "Authorize Vercel"

  8. Vous êtes maintenant sur le tableau de bord Vercel

    Vercel affiche la liste de vos dépôts GitHub Signup with GitHub

Étape 2 — Importer votre projet​

Importer votre projet GitHub quiz-cyber dans Vercel.

  1. Trouvez votre dépôt quiz-cyber dans la liste

    Signup with GitHub

  2. Cliquez sur le bouton "Import" à droite du nom du dépôt

Étape 3 — Détection du projet​

Vérifier la détection du projet et les paramètres de build.

  1. Vercel détecte automatiquement que c’est un projet Next.js

  2. Choisissez un nom pour votre projet (ex: quiz-cyber-prenom)

    attention

    Le nom du projet doit être unique sur Vercel.

    Si le nom est déjà pris, ajoutez votre prénom ou un numéro à la fin (ou choisissez un autre nom).

  3. Vérifiez que les paramètres sont corrects :

    • Framework Preset : Next.js

    • Root Directory : ./

      Signup with GitHub

  4. Cliquez sur "Build and Output Settings"

  5. Vérifiez que les paramètres de build sont corrects :

    • Build Command : next build

    • Output Directory : .next

    • Install Command : npm install

      Signup with GitHub

Étape 4 — Variables d’environnement​

Ajouter les variables d’environnement Supabase

remarque

Les variables d’environnement sont nécessaires pour que votre application puisse accéder à la base de données Supabase.

  1. Cliquez sur "Environment Variables"

  2. Ajoutez la première variable :

    • Name : NEXT_PUBLIC_SUPABASE_URL
    • Value : Copiez la valeur depuis votre fichier .env.local

  3. Cliquez sur "Add More"

  4. Ajoutez la deuxième variable :

    • Name : NEXT_PUBLIC_SUPABASE_ANON_KEY
    • Value : Copiez la valeur depuis votre fichier .env.local

  5. Vérifiez que les deux variables sont bien présentes

    Signup with GitHub

  6. Cliquez sur le bouton "Deploy"

    Signup with GitHub

Étape 5 — Attendre le déploiement​

  1. Vercel commence à installer les dépendances (npm install)
  2. Puis il construit le projet (next build)
  3. Enfin, il déploie le site

Cela prend environ 30 à 60 secondes

Une fois terminé, vous voyez un message de succès

Signup with GitHub

  1. Cliquez sur "Continue to Dashboard" pour aller sur le tableau de bord Vercel

Étape 6 — Tester l’URL publique​

  1. Une fois le déploiement terminé, Vercel vous affiche l'URL publique de l'application Web, par exemple :

    https://quiz-cyber.vercel.app

    Signup with GitHub

  2. Cliquez sur l’URL publique (dans le champ Domains).

  3. Vérifiez que le site s’ouvre dans le navigateur

  4. Vérifiez que :

    • Une question s’affiche
    • Les réponses sont visibles
    • L’image est visible
    • Le crédit de l’image est visible (nom + lien)
    • Le clic sur une réponse affiche l'explication
Bravo !

Si tout fonctionne, félicitations, votre application est en ligne !

Que faire si ça ne fonctionne pas ?

Si vous ne voyez pas la même version que sur votre machine locale, ou si vous avez des erreurs, essayez de :

  • Vérifier les variables d’environnement
  • Vérifier les logs de déploiement dans Vercel
  • Refaire un push sur GitHub pour relancer une nouvelle build 
    git add .
    git commit -m "Dernière fonctionnalité avant hébergement"
    git push
    Signup with GitHub

  1. Retournez sur Vercel et cliquez sur Deployments dans le menu du Dashboard

    Signup with GitHub

  2. Verifiez si le nouveau build se lance automatiquement Signup with GitHub

Résultat attendu​

À la fin de ce TP, vous devez avoir :

  • Une application en ligne accessible depuis une URL publique

  • Une connexion fonctionnelle avec Supabase

  • Un affichage correct des questions, images, réponses

  • Un déploiement automatique à chaque push GitHub

    Signup with GitHub