Como instalar o Excalidraw em um VPS

Importante: Este guia implanta o editor Excalidraw como uma aplicação para um único usuário. A imagem oficial do Docker serve uma SPA estática, sem servidor WebSocket, sem serviço de sincronização e sem colaboração em tempo real. Recursos como links compartilháveis, cursores de presença e criptografia de ponta a ponta (disponíveis em excalidraw.com) exigem um projeto Firebase próprio ou uma assinatura do Excalidraw+. Este guia cobre apenas o editor.

Pré-requisitos

• VPS com Ubuntu 22.04 ou 24.04, acesso SSH e IP público
• Um domínio (por exemplo, whiteboard.example.com) apontando para seu VPS
• Docker instalado (abordado na Etapa 2)
• Familiaridade básica com a linha de comando

O editor é leve. Uma instância com 1 GB de RAM e 1 vCPU é mais do que suficiente para uso pessoal.

Etapa 1, Conectar e preparar o servidor

ssh root@SERVER_IP
apt update && apt upgrade -y
apt install -y ca-certificates curl

Etapa 2, Instalar o Docker

Instale o Docker Engine pelo repositório oficial:

curl -fsSL https://get.docker.com | sh
systemctl enable --now docker
docker --version

Etapa 3, Executar o Excalidraw com Docker

A imagem oficial do Excalidraw é excalidraw/excalidraw:latest. Execute-a vinculada a uma porta local para que não fique diretamente exposta à internet:

docker run -d \
  --name excalidraw \
  --restart unless-stopped \
  -p 127.0.0.1:8080:80 \
  excalidraw/excalidraw:latest

Isso baixa a imagem e inicia o editor na porta 8080 da interface de loopback. O contêiner serve apenas o editor estático, sem banco de dados, WebSocket ou colaboração.

Para verificar se o contêiner está em execução:

docker ps --filter name=excalidraw

Etapa 4, Configurar o proxy reverso

Direcione seu domínio ao contêiner local com Nginx ou Caddy e obtenha um certificado TLS. Diferentemente de aplicações de chat ou ferramentas colaborativas, não são necessários cabeçalhos de atualização WebSocket: o canal de colaboração do Excalidraw se conecta diretamente ao Firebase (ou ao serviço de back-end configurado), não passa pelo seu servidor.

Exemplo de configuração para Nginx:

server {
    listen 443 ssl;
    server_name whiteboard.example.com;

    ssl_certificate /etc/letsencrypt/live/whiteboard.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/whiteboard.example.com/privkey.pem;

    location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Se usar Caddy, basta uma linha no Caddyfile:

whiteboard.example.com {
    reverse_proxy 127.0.0.1:8080
}

O Caddy configura o TLS automaticamente.

Etapa 5, Primeiro acesso

Abra https://whiteboard.example.com no navegador. Você deverá ver o editor Excalidraw.

Desenhe algo e recarregue a página. O desenho terá desaparecido. Esse comportamento é esperado: o editor armazena os dados no armazenamento local do navegador. Fechar a aba ou limpar os dados do navegador faz com que o trabalho não salvo seja perdido. Sempre exporte os desenhos importantes:

• Use o botão Exportar para salvar como .excalidraw (pode ser reaberto) ou como PNG/SVG.
• Use a opção Salvar no disco para manter uma cópia local.

Se precisar de armazenamento persistente, considere configurar um projeto Firebase próprio ou usar o Excalidraw+.

Manutenção

Fixe a tag da imagem em uma versão específica, em vez de usar latest, para evitar mudanças inesperadas que interrompam o funcionamento:

docker pull excalidraw/excalidraw:latest
docker inspect excalidraw/excalidraw:latest | grep -i "org.opencontainers.image.version"

Depois de identificar uma versão funcional, atualize o contêiner:

docker stop excalidraw
docker rm excalidraw
docker run -d \
  --name excalidraw \
  --restart unless-stopped \
  -p 127.0.0.1:8080:80 \
  excalidraw/excalidraw:TAGGED_VERSION

Monitore os logs do contêiner para detectar erros de inicialização:

docker logs excalidraw