Routeur d\'application - Configuration de votre base de données

Avant de pouvoir continuer à travailler sur votre tableau de bord, vous aurez besoin de données. Dans ce chapitre, vous allez configurer une base de données PostgreSQL à partir d'une des intégrations du marketplace Vercel. Si vous êtes déjà familier avec PostgreSQL et préférez utiliser votre propre fournisseur de base de données, vous pouvez sauter ce chapitre et la configurer vous-même. Sinon, continuons !

Créer un dépôt GitHub

Pour commencer, poussons votre dépôt vers GitHub si ce n'est pas déjà fait. Cela facilitera la configuration de votre base de données et le déploiement.

Si vous avez besoin d'aide pour configurer votre dépôt, consultez ce guide sur GitHub.

Bon à savoir :

Vous pouvez également utiliser d'autres fournisseurs git comme GitLab ou Bitbucket.

Si vous débutez avec GitHub, nous recommandons l'application GitHub Desktop pour un flux de développement simplifié.

Créer un compte Vercel

Visitez vercel.com/signup pour créer un compte. Choisissez le plan gratuit "hobby". Sélectionnez Continuer avec GitHub pour connecter vos comptes GitHub et Vercel.

Connecter et déployer votre projet

Ensuite, vous serez redirigé vers cet écran où vous pourrez sélectionner et importer le dépôt GitHub que vous venez de créer :

Capture d'écran du tableau de bord Vercel, montrant l'écran d'importation de projet avec une liste des dépôts GitHub de l'utilisateur

Nommez votre projet et cliquez sur Déployer.

Écran de déploiement montrant le champ de nom du projet et un bouton de déploiement

Hourra ! 🎉 Votre projet est maintenant déployé.

Écran de vue d'ensemble du projet montrant le nom du projet, le domaine et l'état du déploiement

En connectant votre dépôt GitHub, chaque fois que vous pousserez des modifications vers la branche main, Vercel redéploiera automatiquement votre application sans configuration nécessaire. Lors de l'ouverture de pull requests, vous aurez également accès à des URLs de prévisualisation instantanée qui vous permettront de détecter les erreurs de déploiement tôt et de partager un aperçu de votre projet avec les membres de l'équipe pour obtenir des retours.

Créer une base de données Postgres

Ensuite, pour configurer une base de données, cliquez sur Continuer vers le tableau de bord et sélectionnez l'onglet Stockage depuis votre tableau de bord de projet. Sélectionnez Créer une base de données. Selon la date de création de votre compte Vercel, vous pourriez voir des options comme Neon ou Supabase. Choisissez votre fournisseur préféré et cliquez sur Continuer.

Écran Connecter un stockage montrant l'option Postgres avec KV, Blob et Edge Config

Choisissez votre région et votre plan de stockage, si nécessaire. La région par défaut pour tous les projets Vercel est Washington D.C (iad1), et nous recommandons de choisir celle-ci si disponible pour réduire la latence des requêtes de données.

Modal de création de base de données montrant le nom de la base de données et la région

Une fois connecté, naviguez vers l'onglet .env.local, cliquez sur Afficher le secret et Copier l'extrait. Assurez-vous de révéler les secrets avant de les copier.

L'onglet .env.local montrant les secrets cachés de la base de données

Naviguez vers votre éditeur de code et renommez le fichier .env.example en .env. Collez-y le contenu copié depuis Vercel.

Important : Allez dans votre fichier .gitignore et assurez-vous que .env est dans les fichiers ignorés pour éviter que vos secrets de base de données ne soient exposés lorsque vous poussez vers GitHub.

Initialiser votre base de données

Maintenant que votre base de données a été créée, initialisons-la avec des données de départ.

Nous avons inclus une API accessible depuis votre navigateur, qui exécutera un script d'initialisation pour peupler la base de données avec un jeu de données initial.

Le script utilise SQL pour créer les tables, et les données du fichier placeholder-data.ts pour les remplir après leur création.

Assurez-vous que votre serveur de développement local est en cours d'exécution avec pnpm run dev et naviguez vers localhost:3000/seed dans votre navigateur. Une fois terminé, vous verrez un message "Base de données initialisée avec succès" dans le navigateur. Une fois terminé, vous pouvez supprimer ce fichier.

Dépannage :

Assurez-vous de révéler vos secrets de base de données avant de les copier dans votre fichier .env.

Le script utilise bcrypt pour hacher les mots de passe des utilisateurs. Si bcrypt n'est pas compatible avec votre environnement, vous pouvez mettre à jour le script pour utiliser bcryptjs à la place.

Si vous rencontrez des problèmes lors de l'initialisation de votre base de données et souhaitez réexécuter le script, vous pouvez supprimer les tables existantes en exécutant DROP TABLE nomdelatable dans votre interface de requête de base de données. Voir la section exécution de requêtes ci-dessous pour plus de détails. Mais soyez prudent, cette commande supprimera les tables et toutes leurs données. C'est acceptable pour cette application exemple puisque vous travaillez avec des données factices, mais vous ne devriez pas exécuter cette commande dans une application en production.

Exécution de requêtes

Exécutons une requête pour nous assurer que tout fonctionne comme prévu. Nous utiliserons un autre gestionnaire de route, app/query/route.ts, pour interroger la base de données. Dans ce fichier, vous trouverez une fonction listInvoices() qui contient la requête SQL suivante.

SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;

Décommentez le fichier, supprimez le bloc Response.json(), et naviguez vers localhost:3000/query dans votre navigateur. Vous devriez voir qu'un montant de facture et un nom sont retournés.