Comment migrer un projet Vercel vers Hostinger

Updated 2 semaines ago

Si vous hébergez une application développée de A à Z ou créée avec v0 sur Vercel, vous pouvez la migrer vers Hostinger à tout moment.

Choisissez l’étape correspondant à votre situation :

  • Si vous avez créé votre application avec v0 et que vous ne l’avez pas encore connectée à GitHub, commencez à l’étape 1.
  • Si votre application est déjà sur GitHub, passez directement à l’étape 2.
  • Si vous préférez importer des fichiers de projet enregistrés en local, passez à l’étape 2.

Avant de commencer

  • Vérifiez que votre application fonctionne correctement avant la migration.
  • Notez toutes les variables d’environnement utilisées par votre projet. Vous devrez peut-être les saisir à nouveau dans Hostinger.
  • Si vous utilisez des fonctionnalités natives de Vercel telles que Edge Functions ou Vercel Blob Storage, trouvez des alternatives avant de débuter la migration.

Étape 1 : Exporter le projet vers GitHub

Remarque : ignorez cette étape si votre code est déjà sur GitHub.

Option 1 : Connecter l’application v0 à GitHub

  1. Ouvrez votre projet dans v0.
  2. Dans la barre latérale, cliquez sur la section Git.
  3. Cliquez sur Connect pour lancer le processus de connexion.
  4. Dans la fenêtre Create Repository, sélectionnez votre Git Scope (compte ou organisation GitHub) et donnez un nom au répertoire.
  5. Cliquez sur Create Repository pour lier votre projet à un nouveau dépôt GitHub privé.
    v0 enverra automatiquement votre code vers ce dépôt. Chaque modification effectuée dans v0 sera enregistrée dans une branche dédiée (par exemple, v0/main-abc123) pour protéger votre branche principale.
  6. Lorsque votre code est prêt, cliquez sur le bouton Publish (qui affiche une icône Pull Request lorsqu’il est connecté à GitHub).
  7. Sélectionnez Open PR pour créer une pull request (demande de tirage) de votre branche de travail vers la branche principale (main).
  8. Dans la fenêtre de publication, cliquez sur Merge PR pour fusionner vos modifications dans la branche principale.

Votre code est maintenant dans la branche principale et prêt à être déployé sur Hostinger.

Option 2 : Vérifier que l’application Vercel est sur GitHub

La plupart des projets Vercel sont déjà connectés à un dépôt GitHub. Pour le vérifier :

  1. Ouvrez votre projet dans le tableau de bord Vercel.
  2. Accédez à Settings → Git.
  3. Vérifiez qu’un dépôt GitHub est bien connecté et que la dernière version de votre code a été envoyée.

Si votre projet n’est pas connecté à GitHub, envoyez votre code vers un nouveau dépôt GitHub avant de continuer.

Étape 2 : Migrer le projet vers Hostinger

Avec Hostinger, deux méthodes de déploiement sont possibles. Utilisez GitHub si votre code est déjà dans un dépôt. C’est l’option la plus rapide et recommandée.

Si vous avez uniquement vos fichiers en local, vous pouvez les importer au format ZIP.

Option 1 : Migrer le projet depuis GitHub (recommandé)

Une fois votre code sur GitHub, la migration vers Hostinger est simple :

  1. Connectez-vous à hPanel.
  2. Sur la page des méthodes de création, choisissez Application web Node.js.
    Choisissez une méthode de migration : utiliser les identifiants ou importer les fichiers de sauvegarde.
  3. Connectez un nom de domaine personnalisé à votre application ou utilisez-en un temporaire.
  4. Sur la page suivante, sélectionnez Connectez-vous avec GitHub.
  5. Autorisez Hostinger à accéder à votre compte GitHub.
  6. Sélectionnez le dépôt contenant votre application v0.
  7. Choisissez la branche principale (main) ou toute autre branche contenant votre code finalisé.
  8. Vérifiez les paramètres et ajoutez les variables d’environnement nécessaires.
  9. Lancez le déploiement.

Hostinger va automatiquement créer et déployer votre application. Une fois le déploiement terminé, un aperçu confirmant que votre application est en ligne s’affichera.

Option 2 : Migrer le projet à partir d’un fichier ZIP

Si vos fichiers de projet sont stockés localement, vous pouvez migrer votre code à partir d’un fichier ZIP.

  1. Créez un fichier ZIP de votre projet sur votre ordinateur.
    1. Incluez package.json et tous les fichiers source nécessaires.
    2. Excluez les fichiers inutiles comme node_modules.
  2. Connectez-vous à hPanel.Options de migration vers Hostinger avec Vercel et un menu de sélection des projets à migrer
  3. Sur la page des méthodes de création, choisissez Application web Node.js.
  4. Sélectionnez l’option Importez des fichiers en cliquant sur Continuer.
  5. Importez le fichier ZIP de votre projet.
  6. Configurez les paramètres et ajoutez les variables d’environnement nécessaires.
  7. Lancez le déploiement.

Hostinger va automatiquement créer et déployer votre application. Une fois le déploiement terminé, un aperçu confirmant que votre application est en ligne s’affichera.

IMPORTANT :

  • Les applications créées avec v0 sont généralement des projets Next.js. Veillez à sélectionner la bonne version de Node.js dans les paramètres de déploiement Hostinger, en fonction des exigences de votre projet.
  • Ajoutez toutes les variables d’environnement (clés API, URL de base de données, etc.) lors de la configuration du déploiement. Les variables manquantes sont la cause la plus fréquente d’erreurs après migration.
  • Testez votre application sur Hostinger avant de pointer votre nom de domaine ou de rediriger le trafic de production vers la nouvelle URL.
  • Si vous continuez à modifier votre projet dans v0 après la migration, fusionnez les changements dans la branche principale sur GitHub, puis redéployez votre projet depuis hPanel afin de mettre votre application à jour sur Hostinger.