Сайт + excalidraw (интерактивная доска)

Бюджет: 5 000
59.38 $ – 51.72 €
1. Запустил на виртуальном сервере сайт – работает исправно!
2. Подключил excalidraw (интерактивная доску – board.world.su) – РАБОТАЕТ, но есть нюансы:
- когда в комнате модератор на интерактивной доске, что то рисует или печатает у гостей это тоже отображается в реальном времени, но
когда модератор прикрепляет картинку png или любую jpeg, то у модератора её видно, а у гостей только селуэт пропорции этой картинки, сама она не загружается.
Задача: Реализовать возможность чтобы картинки были видны как у модератора, так и у гостей комнаты. Чтобы само собой все сервисы были на сервере без внешних каких либо источников тем более платных. (сайт + excalidraw  + MinIO)

Мои предположения и черновики: 
1. После того как модератор кидает картинку на доску, она должна загружаться либо в облако или на сервер и потом скачиваться на доску к гостью! 

# Запуск MinIO (Хранилище картинок)
docker run -d 
  --name excalidraw-minio 
  --network excalidraw-net 
  -p 127.0.0.1:9000:9000 
  -p 127.0.0.1:9001:9001 
  -e MINIO_ROOT_USER="excalidrawUser" 
  -e MINIO_ROOT_PASSWORD="excalidrawPassword123" 
  -e MINIO_BROWSER_REDIRECT_URL="board.world.su
  --restart always 
  quay.io/minio/minio:RELEASE.2024-01-28T22-35-53Z server /data --console-address ":9001"

# Запуск бэкенда комнат (Синхронизация линий и курсоров)
docker run -d 
  --name excalidraw-backend 
  --network excalidraw-net 
  -p 127.0.0.1:8090:80 
  --restart always 
  excalidraw/excalidraw-room:latest

# Запуск фронтенда (Интерфейс доски)Контейнер сразу компилируется с адресами вашего домена:
docker run -d 
  --name excalidraw-frontend 
  --network excalidraw-net 
  -p 127.0.0.1:8081:80 
  -e REACT_APP_WS_SERVER_URL="board.world.su
  -e REACT_APP_BACKEND_V2_GET_URL="board.world.su
  -e REACT_APP_BACKEND_V2_POST_URL="board.world.su
  --restart always 
  excalidraw/excalidraw:latest

server {
    listen 80;
    server_name board.world.su;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name board.world.su;

    ssl_certificate /etc/letsencrypt/live/board.world.su/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/board.world.su/privkey.pem;

    client_max_body_size 50M;

    # 1. Работа самой интерактивной доски (Excalidraw Backend)
    location / {
        proxy_pass 127.0.0.1:8090;
        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;

        # Разрешаем браузерам гостей скачивать элементы с доски (CORS)
        add_header 'Access-Control-Allow-Origin' 'class.world.su' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
        add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type,Origin' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;

        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'class.world.su' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
            add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type,Origin' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            add_header 'Content-Length' 0;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            return 204;
        }

        # Поддержка веб-сокетов (чтобы линии рисовались в реальном времени)
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        proxy_read_timeout 86400;
        proxy_send_timeout 86400;
    }

    # 2. НОВОЕ: Проброс картинок доски напрямую в наше локальное хранилище MinIO
    location /images/ {
        proxy_pass 127.0.0;
        proxy_set_header Host $http_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;
        
        # Разрешаем CORS со стороны хранилища картинок
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header Cache-Control "public, max-age=604800";
    }
}

MinIO — это программное обеспечение с открытым исходным кодом, которое позволяет создать собственное высокопроизводительное объектное хранилище данных
Опубликован 21.09.2026 в 09:03 Последнее изменение: 21.09.2026 в 09:12

Выберите способ верификации:

Обновите страницу после прохождения верификации.