Héberger Excalidraw sur VPS : tableau blanc sans abonnement

Pourquoi auto-héberger Excalidraw plutôt que d'utiliser la version en ligne

Ce que vous gagnez concrètement

• Zéro abonnement logiciel — les deux composants (interface et serveur de collaboration) sont MIT. Vous payez le VPS, rien d'autre.
• Confidentialité des maquettes — les sessions de dessin restent sur votre infrastructure. Aucun fichier de conception ne transite par un tiers.
• Accès sous votre contrôle — allowlist d'IP, SSO OIDC ou HTTP Basic Auth devant nginx selon le niveau d'isolation requis.
• Sessions et membres sans quota imposés — pas de plafond par plan ; la seule limite est la RAM du serveur, et excalidraw-room est un service Node.js léger.
• Persistance optionnelle — montez un volume Docker ou branchez un bucket S3 compatible pour archiver les tableaux exportés en JSON.
• Intégration dans un parc self-hosted — une instance Excalidraw aux côtés de Penpot, Mattermost ou Docmost ferme le périmètre SaaS de toute une agence.

Architecture : deux conteneurs, rôles distincts

Prérequis

Checklist prérequis

• Un VPS avec au moins 1 vCPU et 512 Mo de RAM (1 Go recommandé pour une équipe).
• Docker Engine et Docker Compose Plugin installés (docker compose version pour vérifier).
• Un nom de domaine pointé vers l'IP du VPS — sans TLS les WebSockets sont bloqués par les navigateurs modernes.
• Accès SSH root ou un utilisateur avec droits sudo.
• Un certificat TLS valide — ServOrbit configure Let's Encrypt automatiquement.

Déployer Excalidraw en 5 étapes

1. 01

   Créer le VPS et installer Docker

   Provisionnez un VPS Ubuntu 24.04 depuis l'espace ServOrbit. Une fois connecté en SSH, si Docker n'est pas encore présent, installez-le en une passe :

   curl -fsSL https://get.docker.com | sh

   Vérifiez que Docker Compose Plugin répond avant de continuer :

   docker compose version

2. 02

   Builder l'image avec votre URL de collaboration

   Clonez le dépôt officiel, puis construisez l'image en substituant votre domaine. Remplacez collab.yourdomain.com par le sous-domaine que vous allouez à excalidraw-room :

   git clone https://github.com/excalidraw/excalidraw.git
   cd excalidraw
   docker build \
     --build-arg VITE_APP_WS_SERVER_URL=wss://collab.yourdomain.com \
     -t my-excalidraw:latest .

   Cette étape grave l'URL du serveur WebSocket dans le bundle JavaScript. Si vous changez de domaine plus tard, il faudra rebuilder. L'image officielle excalidraw/excalidraw convient pour les tests locaux, mais elle pointe sur le serveur public d'Excalidraw — inutilisable pour un déploiement souverain.

3. 03

   Écrire le fichier docker-compose.yml

   Créez un répertoire de travail et posez le fichier suivant. Les deux services écoutent en interne ; nginx (à l'étape suivante) est le seul point d'entrée public :

   mkdir ~/excalidraw-stack && cd ~/excalidraw-stack

   Contenu du docker-compose.yml :

   services:
     excalidraw:
       image: my-excalidraw:latest
       restart: unless-stopped
       networks:
         - excalidraw
   
     excalidraw-room:
       image: excalidraw/excalidraw-room:latest
       restart: unless-stopped
       networks:
         - excalidraw
   
   networks:
     excalidraw:

   Lancez la stack :

   docker compose up -d

4. 04

   Configurer nginx avec les en-têtes WebSocket

   C'est l'étape où la plupart des déploiements échouent en silence : sans les en-têtes Upgrade et Connection, le navigateur ouvre une connexion HTTP normale au lieu d'un WebSocket, et la collaboration semble ne pas démarrer sans aucun message d'erreur visible.

   Bloc nginx pour le frontend Excalidraw (draw.yourdomain.com) :

   server {
       listen 443 ssl;
       server_name draw.yourdomain.com;
   
       location / {
           proxy_pass http://excalidraw:80;
           proxy_set_header Host $host;
       }
   }

   Bloc nginx pour le serveur de salle (collab.yourdomain.com) :

   server {
       listen 443 ssl;
       server_name collab.yourdomain.com;
   
       location / {
           proxy_pass http://excalidraw-room:80;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "upgrade";
           proxy_set_header Host $host;
           proxy_read_timeout 86400s;
       }
   }

   Rechargez nginx (nginx -s reload) après avoir posé les blocs.

5. 05

   Tester la collaboration en temps réel

   Ouvrez https://draw.yourdomain.com dans deux onglets ou deux navigateurs différents. Dans la barre d'outils, cliquez sur Live collaboration et créez une session. Copiez le lien de session dans le second onglet.

   Dessinez quelque chose dans le premier onglet : le trait doit apparaître dans le second en temps réel. S'il n'apparaît pas, vérifiez d'abord les en-têtes WebSocket dans nginx (les devtools réseau du navigateur montrent si la connexion est passée en 101 Switching Protocols). Un status 200 sur la requête WebSocket indique que nginx n'a pas transmis les en-têtes Upgrade.

Excalidraw auto-hébergé vs alternatives SaaS

Faites défiler le tableau

Aller plus loin : SSO et allowlist d'IP

allow 203.0.113.0/24;
allow 198.51.100.42;
deny all;

Intégration dans un parc self-hosted