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_STAGING
DATABASE_URL
Ton 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 postgresql
virgile
/ react_router_7
)DATABASE_URL
dans .env.production
migrate 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 ?