Site statique : du fichier au domaine

Le parcours complet pour une landing page ou un build React ou Vue : envoyer les fichiers sur un VPS, les servir avec un serveur web, lier un domaine, et mettre à jour sans interruption.

Mis à jour le 23 août 2026

Un site statique est un ensemble de fichiers prêts à l'emploi : HTML, CSS, images, un build frontend. Il n'a besoin ni de PHP ni de base de données, il tourne donc confortablement même sur un VDS-1 et supporte un trafic notable : jusqu'à 500 Mbit/s.

Où placer les fichiers

Créez un répertoire distinct pour chaque site :

mkdir -p /var/www/example.ru
chown -R www-data:www-data /var/www/example.ru

Téléversez depuis votre machine locale avec scp ou rsync :

scp -r ./dist/* root@YOUR_ADDRESS:/var/www/example.ru/
rsync -avz --delete ./dist/ root@YOUR_ADDRESS:/var/www/example.ru/

rsync --delete supprime sur le serveur les fichiers qui ne sont plus dans le build. Sans cette option, les anciens chunks JS s'accumulent pendant des années.

Diffusion via le serveur web

Configuration Nginx minimale :

server {
    listen 80;
    server_name example.ru;
    root /var/www/example.ru;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(js|css|png|jpg|svg|woff2)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

La ligne try_files ... /index.html est nécessaire pour les applications monopage construites sur React, Vue et Svelte : sans elle, un accès direct à /about renvoie une 404.

Vient ensuite un certificat Let's Encrypt, et le site s'ouvre en HTTPS.

Domaine

Dans le panneau des domaines, créez un enregistrement A pointant vers l'adresse publique de la machine (onglet « Overview » dans /hosting/vds/m/<id>) et le même enregistrement pour www. Vérifiez :

dig +short example.ru

La propagation des enregistrements peut prendre plusieurs heures. En attendant, le site est accessible à l'adresse de la machine.

Mise à jour sans interruption

Ne téléversez pas les fichiers par-dessus un répertoire en production — un visiteur peut tomber sur un site à moitié construit. Construisez à côté et basculez le lien symbolique :

rsync -avz ./dist/ /var/www/releases/$(date +%s)/
ln -sfn /var/www/releases/1724400000 /var/www/example.ru-current
systemctl reload nginx

Le root de la configuration pointe alors vers /var/www/example.ru-current.

Erreurs courantes

Symptôme	Cause
Page blanche, 404 sur les JS dans la console	Les fichiers ont été construits avec un mauvais `base` — vérifiez les réglages de votre bundler
Ancienne version chez certains visiteurs	Cache du navigateur — utilisez des noms de fichiers avec hash
403 sur tout	Le répertoire n'est pas lisible par l'utilisateur du serveur web
Seule la page d'accueil fonctionne	Absence de `try_files` pour une application monopage

Il vaut mieux construire le frontend en local et téléverser le dist terminé. Sur un VDS-1 avec 2 Go de mémoire, la construction d'un gros projet peut échouer par manque de mémoire.