Découvre comment installer PostgreSQL, sécuriser l’accès et connecter Prisma pour déployer efficacement ton app React Router 7.
avec React Router 7
Posez vos questions 24/7 à notre IA experte en React Router 7
Validez vos acquis avec des quiz personnalisés et un feedback instantané
Pour héberger ta base de donnée, tu as deux options :
Chez Algomax on a choisi la deuxième option pour toutes nos apps :
Bien sûr, si ton produit vise des millions d’utilisateurs tu migreras un
jour vers un service managé. Mais pour démarrer, rien ne bat la simplicité
d’un apt install postgresql.
1sudo apt update2sudo apt install postgresql -y
Vérifie la version :
1psql --version2# psql (PostgreSQL) 16.9
Le service est déjà démarré et tourne sous l’utilisateur système
postgres.
On ne travaille jamais avec l’utilisateur postgres en production ;
créons un compte applicatif.
1sudo -u postgres psql
1-- 1️⃣ créer le rôle2CREATE ROLE virgile WITH LOGIN PASSWORD 'MotDePasseUltraFort';3-- 2️⃣ créer la base4CREATE DATABASE react_router_7 OWNER virgile;5-- 3️⃣ quitter6\q
Nous avons :
virgile → login autorisé ;react_router_7 → base attribuée à ce rôle.Dans le fichier .env.production qui sera injecté à Docker :
1DATABASE_URL="postgresql://virgile:MotDePasseUltraFort@localhost:5432/react_router_7"
1npx prisma migrate deploy
Si tout est vert : félicitations, l’app et la base parlent déjà la même langue ! Sinon lis la suite, tu vas sûrement croiser ces messages 👇
Prisma CLI tourne sur ton ordinateur → il doit joindre le port 5432 de ton VPS :
1Action: ACCEPT, Protocol: TCP, Port: 5432, Source: <ton-IP>
0.0.0.0/0 en production.Par défaut, le service ne répond qu’en interne. Modifie :
1listen_addresses = '*'
et :
1host all all 0.0.0.0/0 md5
Puis :
1sudo systemctl restart postgresql
| Message | Cause | Solution rapide |
|---|---|---|
psql: FATAL : role "virgile" does not exist | rôle mal créé | CREATE ROLE virgile WITH LOGIN PASSWORD… |
permission denied for database | base sans owner | ALTER ROLE virgile WITH SUPERUSER; ou recrée la base avec OWNER virgile |
database URL is invalid | mot de passe ou port | vérifie .env.production |
could not connect to server | firewall ou listen | ouvre port 5432 + listen_addresses='*' |
1CREATE DATABASE react_router_7_staging OWNER virgile;
Dans GitHub Secrets :
DATABASE_URL_STAGINGDATABASE_URLTon workflow GitHub Actions pourra cibler l’un ou l’autre
(docker-compose.staging.yml ↔ docker-compose.prod.yml).
prisma migrate deploy dans l’image Docker1RUN npm ci --omit=dev2+RUN npx prisma generate && npx prisma migrate deploy3RUN npm run build
Grâce à ça, chaque déploiement applique les migrations avant de démarrer le serveur – fini les oublis.
SUPERUSER en prod : crée un rôle admin si besoin.127.0.0.1 (application sur le même VPS)pg_dump dans un cron + upload S3.apt install postgresqlvirgile / react_router_7)DATABASE_URL dans .env.productionmigrate deploy ajoutée au DockerfileTa base est désormais rapide, peu coûteuse et sous contrôle. Plus aucune raison d’attendre pour pousser le code sur staging puis sur production 🚀
Si tu décides plus tard de migrer vers un service managé,
le fichier .env.production sera la seule ligne à changer : Prisma
s’occupera du reste.
Quelle est la principale différence entre les composants client et serveur dans React ?
Quelle technique est recommandée pour éviter les rendus inutiles dans React ?
Quel hook permet de gérer les effets de bord dans un composant React ?
Comment implémenter la gestion des erreurs pour les requêtes API dans React ?
Quelle est la meilleure pratique pour déployer une application React en production ?