Configurer un serveur VPS
Découvre comment configurer un VPS sécurisé avec Docker pour héberger ton application React Router 7. Guide simple et complet pour un hébergement performant.
Pourquoi un VPS et pas un PaaS ?
L’objectif de cette étape est simple : disposer d’une machine 100 % à toi pour exécuter Docker, PostgreSQL et autant d’applications React Router 7 que tu veux – le tout pour ± 7 €/mois. Contrairement à Vercel ou Netlify (excellents pour un seul projet), un VPS t’offre :
- un processeur dédié (2 vCPU) et 8 Go de RAM ;
- 100 Go de SSD pour plusieurs bases et conteneurs ;
- la liberté d’héberger un SMTP ou un cron sans surcoût.
C’est exactement ce que j’utilise pour le site d’Algomax et une dizaine de side-projects.
1 • Commander le serveur
- Va sur hostinger.com → Services → Hébergement VPS.
- Choisis le plan KVM 2 (2 vCPU / 8 Go RAM / 100 Go SSD).
- Clique sur « Installer » et suis le guide.
Important
Options retenues
| Étape | Choix |
|---|---|
| Emplacement | France (latence minimale pour les visiteurs FR) |
| OS | Ubuntu 24.04 (la doc Docker est la plus complète) |
| Scanner de logiciels | désactivé (inutile + économie de RAM) |
| Mot de passe root | généré dans Bitwarden, mais on ne l’utilisera presque plus |
2 • Créer un utilisateur non-root
On évite de se connecter en root : trop risqué.
1# connexion initiale en root2ssh root@<IP_VPS>34# ajoute un compte perso5adduser virgile6usermod -aG sudo virgile # lui donner les privilèges admin
Warning
Les scripts d’auto-déploiement (GitHub Actions) refuseront d’exécuter des commandes sous root.
3 • Générer et installer une clé SSH
1# sur ta machine locale2ssh-keygen -t ed25519 -f ~/.ssh/hostinger -C "Mac Studio Algomax"
Laisse la passphrase vide ⇒ pas de mot de passe à chaque connexion.
1# toujours local2cat ~/.ssh/hostinger.pub
1# dans la session root du VPS2su - virgile3mkdir -p ~/.ssh4nano ~/.ssh/authorized_keys
Colle la clé, Ctrl + X, y, sortie.
La prochaine connexion se fera sans mot de passe.
4 • Mettre à jour Ubuntu
1sudo apt update -y2sudo apt full-upgrade -y # kernel + libs
Redémarrage (optionnel) :
1sudo reboot
Reconnecte-toi :
1ssh virgile@<IP_VPS>
5 • Installer Docker + Docker Compose
1curl -fsSL https://get.docker.com | sudo bash2sudo apt install docker-compose-plugin -y
Test rapide :
1docker run --rm hello-world
Donner l’accès à Docker à ton user
1sudo usermod -aG docker virgile2exit # quitte la session3ssh virgile@<IP_VPS> # reconnecte-toi4docker ps # plus de “permission denied”
6 • Vérifier la santé du serveur
1htop
Tu dois voir 2 cœurs, ~ 7 Go libres, 100 Go de disque.
Tip
“Optimisez du temps avec un terminal personnalisé”.
7 • Sécuriser encore (optionnel mais conseillé)
- Édite
sshd_configpour interdire root et le login par mot de passe.Terminal1sudo nano /etc/ssh/sshd_config2# …3PermitRootLogin no4PasswordAuthentication no - Redémarre le service :
sudo systemctl restart sshd. - Teste dans un nouvel onglet :
ssh virgile@<IP_VPS>– si ça marche, bravo, ton VPS n’accepte plus que ta clé.
8 • Check-list avant déploiement
| ✔︎ | État |
|---|---|
| 🟢 | Accès SSH sans mot de passe (virgile) |
| 🟢 | sudo fonctionne (mise à jour système) |
| 🟢 | docker run hello-world passe |
| 🟢 | docker ps sans sudo (groupe docker) |
| 🟢 | Root et login par mot de passe désactivés (optionnel fort) |
9 • Ce que nous venons de faire
- Louer un VPS (Hostinger KVM 2)
- Créer un utilisateur admin non-root
- Installer une clé SSH pour les connexions automatiques
- Mettre à jour Ubuntu, installer Docker & Compose
- Tester le fonctionnement avec
hello-world - Sécuriser la machine (login SSH + groupes)
Important
10 • Et maintenant ?
Dans la prochaine leçon nous allons :
- écrire le
Dockerfilede production pour React Router 7 + Prisma ; - configurer Caddy en reverse-proxy HTTPS automatique ;
- lier le nom de domaine à l’adresse IP du VPS.
À tout de suite !
Comprendre les concepts fondamentaux
Quelle est la principale différence entre les composants client et serveur dans React ?
Optimisation des performances
Quelle technique est recommandée pour éviter les rendus inutiles dans React ?
Architecture des données
Quel hook permet de gérer les effets de bord dans un composant React ?