Alojar Excalidraw en un VPS: pizarra colaborativa sin suscripción

Por qué autoalojar Excalidraw en lugar de usar la versión pública

Beneficios concretos

• Cero suscripción de software — los dos componentes (interfaz y servidor de colaboración) son MIT. Pagas el VPS, nada más.
• Confidencialidad de los mockups — las sesiones de dibujo permanecen en tu infraestructura. Ningún archivo de diseño transita por un tercero.
• Acceso bajo tu control — allowlist de IP, SSO OIDC o HTTP Basic Auth delante de nginx según el nivel de aislamiento requerido.
• Sesiones y miembros ilimitados — sin límite por plan; el único límite es la RAM del servidor, y excalidraw-room es un servicio Node.js ligero.
• Persistencia opcional — monta un volumen Docker o conecta un bucket S3 compatible para archivar pizarras exportadas como JSON.
• Integración en un stack autoalojado — una instancia de Excalidraw junto a Penpot, Mattermost o Docmost cierra el perímetro SaaS de una agencia completa.

Arquitectura: dos contenedores, roles distintos

Requisitos previos

Lista de comprobación de requisitos

• Un VPS con al menos 1 vCPU y 512 MB de RAM (1 GB recomendado para un equipo).
• Docker Engine y Docker Compose Plugin instalados (docker compose version para verificar).
• Un nombre de dominio apuntando a la IP del VPS — sin TLS los WebSockets quedan bloqueados en los navegadores modernos.
• Acceso SSH root o un usuario con derechos sudo.
• Un certificado TLS válido — ServOrbit configura Let's Encrypt automáticamente.

Desplegar Excalidraw en 5 pasos

1. 01

   Crear el VPS e instalar Docker

   Aprovisiona un VPS Ubuntu 24.04 desde tu panel de ServOrbit. Una vez conectado por SSH, si Docker no está instalado aún, ejecuta:

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

   Verifica que Docker Compose Plugin responde antes de continuar:

   docker compose version

2. 02

   Construir la imagen con tu URL de colaboración

   Clona el repositorio oficial y construye la imagen sustituyendo tu dominio. Reemplaza collab.yourdomain.com con el subdominio que asignes a 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 .

   Este paso graba la URL del servidor WebSocket en el bundle JavaScript. Si cambias de dominio más adelante, tendrás que reconstruir la imagen.

3. 03

   Escribir el archivo docker-compose.yml

   Crea un directorio de trabajo y escribe el siguiente archivo. Ambos servicios escuchan internamente; nginx (siguiente paso) es el único punto de entrada público:

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

   Contenido del 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:

   Arranca el stack:

   docker compose up -d

4. 04

   Configurar nginx con las cabeceras WebSocket

   Este es el paso donde fallan en silencio la mayoría de los despliegues: sin las cabeceras Upgrade y Connection, el navegador abre una conexión HTTP normal en lugar de un WebSocket, y la colaboración parece no funcionar sin ningún mensaje de error visible.

   Bloque nginx para el frontend de Excalidraw (draw.yourdomain.com):

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

   Bloque nginx para el servidor de sala (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;
       }
   }

   Recarga nginx (nginx -s reload) tras colocar los bloques.

5. 05

   Probar la colaboración en tiempo real

   Abre https://draw.yourdomain.com en dos pestañas o dos navegadores distintos. En la barra de herramientas, haz clic en Live collaboration y crea una sesión. Copia el enlace de sesión en la segunda pestaña.

   Dibuja algo en la primera pestaña: el trazo debe aparecer en la segunda en tiempo real. Si no aparece, revisa primero las cabeceras WebSocket en nginx (las herramientas de red del navegador muestran si la conexión ascendió a 101 Switching Protocols).

Excalidraw autoalojado vs alternativas SaaS

Desplace la tabla

Más allá: SSO y listas de IPs permitidas

allow 203.0.113.0/24;
allow 198.51.100.42;
deny all;

Integración en un stack autoalojado