Tutoriel · pour débutants complets

Mettre ton site en ligne

Ton site ne marche que sur ton ordinateur. On va le déplacer sur un ordinateur allumé jour et nuit, pour que n'importe qui puisse le visiter avec une vraie adresse.

Tu vas copier-coller des commandes. Chacune est traduite en français juste en dessous — tu comprendras toujours ce que tu fais.
Étape 01 · Le vocabulaire

Les 6 mots que tu vas croiser

POURQUOIsi tu connais ces 6 mots, tout le reste du tuto devient simple
Serveur (ou VPS)

Un ordinateur que tu loues, allumé 24h/24.

Comme louer un local : il reste ouvert même quand tu dors.
SSH

Le tunnel qui te relie au serveur à distance.

Une télécommande : tu tapes chez toi, ça s'exécute là-bas.
Terminal

La fenêtre noire où on écrit des ordres.

Au lieu de cliquer sur des boutons, tu écris ce que tu veux.
Port

Une porte numérotée sur le serveur.

Le serveur est un immeuble ; ton site habite à la porte 3000.
DNS

L'annuaire qui traduit un nom en adresse.

Tu tapes un nom, il retrouve le numéro — comme un répertoire.
HTTPS

Le petit cadenas dans la barre d'adresse.

La carte d'identité du site : il prouve qu'il est bien lui.
À RETENIR Garde en tête l'image de l'immeuble: le serveur est l'immeuble, ton site occupe la porte 3000, les visiteurs sonnent toujours à la porte 80. Tout le tuto consiste à les amener de la porte 80 à la porte 3000.
Étape 02 · Le serveur

Louer un serveur et noter 2 choses

OBJECTIFobtenir une adresse IP et un mot de passe — c'est tout ce dont on a besoin
  1. 1Va chez un hébergeur (Hostinger, OVH, DigitalOcean…) et prends un VPS. Compte 5 à 10 € par mois.
  2. 2Quand il demande le système, choisis Ubuntu (la version la plus récente).
  3. 3Note les 2 informations qu'il te donne : l'adresse IP et le mot de passe.
1. L'adresse IP
46.202.173.91

Le numéro de ton serveur sur Internet. C'est son adresse postale, avant qu'il ait un nom.

2. Le mot de passe
••••••••••••

Celui du serveur (pas celui de ton compte chez l'hébergeur). Garde-le, tu vas t'en servir juste après.

À RETENIR Un VPS neuf est vide: il n'y a rien dessus, même pas les outils pour faire tourner ton site. C'est normal — on va tout installer nous-mêmes aux étapes suivantes.
Étape 03 · La connexion

Entrer dans le serveur

OBJECTIFouvrir une fenêtre qui te permet de commander le serveur à distancedeux façons — clique sur les onglets
le site de ton hébergeur › VPS
Menu
Vue d'ensemble
Terminal navigateur
Paramètres
Sauvegardes
Ton serveur
46.202.173.91en marche
clique ici

Ouvre une fenêtre noire directement dans ton navigateur. Rien à installer, et tu es connecté automatiquement — pas de mot de passe à taper.

Terminal navigateur

c'est la façon la plus simple quand on débute

TU TAPES SURTON ORDINATEUR
$ssh root@46.202.173.91
→Ouvre la connexion vers le serveur. Remplace les chiffres par ton adresse IP. root est le nom du compte qui a tous les droits.
Important : il te demande le mot de passe, mais rien ne s'affiche quand tu tapes— pas d'étoiles, pas de points. C'est normal, c'est une sécurité. Tape-le et appuie sur Entrée.
À RETENIR Une fois connecté, tout ce que tu écris s'exécute sur le serveur, plus sur ton ordinateur. C'est le point qui perd le plus de débutants : dans la suite du tuto, un bandeau te dira toujours sur quelle machine tu tapes.
Étape 04 · Se rassurer

Une commande, ça se lit

POURQUOIce n'est pas du charabia : chaque mot a un rôle précis
$aptinstall-ynginx
aptLe magasin d'applications du serveur. C'est lui qui installe les logiciels.
installL'action qu'on veut faire : installer. (Il existe aussi update, remove…)
-y« Réponds oui à toutes les questions. » Ça évite d'avoir à confirmer à la main.
nginxLe nom du logiciel qu'on veut. Ici, le concierge dont on parlera à l'étape 09.
À RETENIR Le $au début n'est pas à taper : c'est juste le symbole qui dit « ici commence une commande ». Tu peux copier-coller sans crainte, puis appuyer sur Entrée. Si tu te trompes, rien n'est cassé définitivement — on peut toujours réinstaller.
Étape 05 · L'outillage

Installer les 3 outils nécessaires

OBJECTIFle serveur est vide : on lui donne le moteur, le veilleur et le concierge
TU TAPES SURLE SERVEUR
$apt update && apt upgrade -y
→Met le serveur à jour, comme les mises à jour de ton téléphone. À faire en premier, toujours.
$curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
→Prépare l'installation de Node. Cette ligne va juste chercher la bonne source sur Internet.
$apt install -y nodejs
→Installe Node : c'est le moteur qui fait tourner ton site.
$npm install -g pm2
→Installe pm2 : le veilleur de nuit qui garde ton site allumé (étape 08).
$apt install -y nginx
→Installe nginx : le concierge qui accueille les visiteurs (étape 09).
À RETENIR Lance-les une par une, dans l'ordre, en attendant que chacune se termine. Beaucoup de texte va défiler : c'est normal, c'est le serveur qui raconte ce qu'il fait. Tant que tu ne vois pas le mot error en rouge, tout va bien.
Étape 06 · Le transfert

Envoyer ton site sur le serveur

OBJECTIFcopier le dossier de ton projet vers le serveur
Ton ordinateur
le dossier du projet
→
Le serveur
/var/www/thotiq
TU TAPES SURTON ORDINATEUR
$rsync -avz --exclude node_modules --exclude .next ./ root@46.202.173.91:/var/www/thotiq/
→Copie ton dossier vers le serveur. rsync est un outil de copie ; --exclude veut dire « n'envoie pas ces deux dossiers », car ils sont énormes et seront recréés sur place.
Attention : cette commande se tape sur ton ordinateur, pas sur le serveur. Si tu es connecté en SSH, écris d'abord exit pour en sortir.
À RETENIR C'est la seule étape qui part de ton ordinateur. Une alternative très courante en équipe : mettre le projet sur GitHub, puis le récupérer depuis le serveur avec git clone.
Étape 07 · La préparation

Préparer le site pour les visiteurs

OBJECTIFinstaller les pièces manquantes, puis fabriquer la version rapide du site
TU TAPES SURLE SERVEUR
$cd /var/www/thotiq/thotiq-platform
→cd veut dire « entre dans ce dossier ». Tu te places là où se trouve ton site.
$npm ci
→Télécharge toutes les librairies dont le site a besoin (le dossier qu'on n'avait pas envoyé). Ça peut prendre quelques minutes.
$nano .env.local
→Ouvre un éditeur de texte pour y coller tes clés API. Pour enregistrer : Ctrl+O puis Entrée. Pour sortir : Ctrl+X.
$npm run build
→Fabrique la version optimisée du site. C'est ce qui le rend rapide. Attends le message Compiled successfully.
À RETENIR Sans le fichier .env.local, le site démarre quand même mais les fonctions qui utilisent l'IA ne répondront pas. C'est le fichier qui contient tes clés — il reste sur le serveur et n'est jamais public.
Étape 08 · Le veilleur de nuit

Garder le site allumé

LE PROBLÈMEsi tu lances le site à la main, il s'éteint dès que tu fermes la fenêtre
TU TAPES SURLE SERVEUR
$pm2 start npm --name thotiq -- run start
→Démarre ton site et le confie à pm2. --name thotiq lui donne un nom, pour pouvoir le retrouver après.
$pm2 save && pm2 startup
→Mémorise la configuration : si le serveur redémarre en pleine nuit, ton site se rallume tout seul.
$pm2 list
→Affiche l'état. Tu dois voir ton site avec la mention online (en vert).
À RETENIR À ce stade, ton site tourne — mais personne ne peut encore le voir : il est derrière la porte 3000, une porte intérieure. Les deux prochaines étapes servent à amener les visiteurs jusqu'à elle. Commande utile en cas de souci : pm2 logs thotiq.
Étape 09 · Le concierge

Amener les visiteurs à la bonne porte

LE PROBLÈMEles visiteurs sonnent à la porte 80, mais ton site est derrière la porte 3000
Le visiteur
sonne à la porte 80
→
nginx
le concierge
→
Ton site
habite porte 3000
TU TAPES SURLE SERVEUR
$nano /etc/nginx/sites-available/thotiq
→Crée la fiche d'instructions du concierge. Colle dedans le texte ci-dessous, puis Ctrl+O, Entrée, Ctrl+X.
server {
listen 80;← écoute la porte d'entrée
server_name app.mon-domaine.com;← ton futur nom
location / {
proxy_pass http://127.0.0.1:3000;← emmène à la porte 3000
}
}
$ln -s /etc/nginx/sites-available/thotiq /etc/nginx/sites-enabled/
→Active la fiche. (Elle existait, elle est maintenant utilisée.)
$nginx -t && systemctl reload nginx
→Vérifie qu'il n'y a pas de faute, puis applique. Fais-le toujours dans cet ordre.
À RETENIR Ce rôle de concierge porte un nom technique : reverse proxy. Retiens simplement l'image : il attend à l'entrée et accompagne chaque visiteur jusqu'à la bonne porte.
Étape 10 · Le nom

Remplacer les chiffres par un vrai nom

OBJECTIFque les gens tapent un nom, pas une suite de chiffres
  1. 1Va là où tu as acheté ton domaine, dans la section Zone DNS.
  2. 2Clique sur Ajouter un enregistrement et recopie exactement le tableau ci-dessous.
  3. 3Patiente : entre quelques minutes et 1 heure pour que tout Internet soit au courant.
là où tu as acheté ton domaine › Zone DNS
Ajouter un enregistrement
TypeAA veut dire « adresse ». On garde A.
Nomappdonnera app.mon-domaine.com
Pointe vers46.202.173.91l'adresse IP de ton serveur
TTL3600laisse la valeur par défaut
Enregistrerpuis patiente quelques minutes
À RETENIR Le DNSest l'annuaire d'Internet : il retient que app.mon-domaine.com correspond à 46.202.173.91. Ne passe pas à l'étape suivante tant que ton nom n'affiche pas encore le site— l'étape du cadenas échouerait.
Étape 11 · Le cadenas

Ajouter le cadenas (gratuit)

OBJECTIFenlever le « Non sécurisé » que le navigateur affiche aujourd'hui
!http://app.mon-domaine.com
Avant : le navigateur méfie
https://app.mon-domaine.com
Après : cadenas, site de confiance
TU TAPES SURLE SERVEUR
$apt install -y certbot python3-certbot-nginx
→Installe certbot, l'outil qui fabrique le cadenas gratuitement.
$certbot --nginx -d app.mon-domaine.com
→Fabrique et installe le cadenas. Il pose 2 questions : ton email, puis s'il faut rediriger vers HTTPS — réponds 2 (oui).
À RETENIR Le certificat est valable 90 jours et se renouvelle tout seul. Une seule condition : le nom doit déjàpointer vers le serveur (étape 10). Et sache qu'on ne peut pas obtenir de cadenas pour une simple adresse IP — il faut un nom.
Étape 12 · Le videur

Réserver l'accès par mot de passe

OBJECTIFen ligne, mais visible seulement par ceux à qui tu donnes le code
TU TAPES SURLE SERVEUR
$apt install -y apache2-utils
→Installe le petit outil qui fabrique les mots de passe.
$htpasswd -c /etc/nginx/.htpasswd thotiq
→Crée l'identifiant thotiq. Il te demande alors de choisir un mot de passe (deux fois).
$nano /etc/nginx/sites-available/thotiq
→Rouvre la fiche du concierge pour y ajouter les 2 lignes ci-dessous, dans le bloc location /.
app.mon-domaine.com
Connexion requise

Ce site demande un identifiant.

thotiq
••••••••••
AnnulerSe connecter

ce que voient les visiteurs sans le code

auth_basic "Accès réservé";
auth_basic_user_file /etc/nginx/.htpasswd;
À RETENIR Puis relance nginx -t && systemctl reload nginx. Piège classique : mets le mot de passe aprèsavoir fait le cadenas (étape 11) — dans l'autre sens, la fabrication du cadenas est bloquée par le mot de passe et échoue.
C'est en ligne

Récapitulatif et dépannage

Ce que tu as fait
  1. 1Loué un ordinateur allumé 24h/24
  2. 2Ouvert une fenêtre pour le commander
  3. 3Installé le moteur, le veilleur, le concierge
  4. 4Envoyé ton site dessus
  5. 5Fabriqué la version rapide du site
  6. 6Confié le site au veilleur de nuit
  7. 7Placé un concierge à l'entrée
  8. 8Donné un vrai nom au site
  9. 9Ajouté le cadenas de confiance
  10. 10Réservé l'accès par mot de passe
Si quelque chose ne marche pas
  • pm2 logs thotiq
    Le site ne s'affiche pas : regarde ici, l'erreur y est écrite.
  • pm2 restart thotiq
    Redémarre le site s'il s'est bloqué.
  • nginx -t
    Te dit si tu as fait une faute dans la fiche du concierge.
Modifier le site plus tard

Renvoie-le, refabrique-le, redémarre :

rsync -avz ./ root@TON_IP:/var/www/thotiq/
cd /var/www/thotiq/thotiq-platform
npm ci && npm run build
pm2 restart thotiq
À RETENIRLa logique est toujours la même, quel que soit l'hébergeur : un ordinateur allumé, un site qui tourne, un concierge qui oriente, un annuaire qui donne le nom, un cadenas. Tu sais maintenant mettre n'importe quel site en ligne.