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="
"
--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="
"
-e REACT_APP_BACKEND_V2_GET_URL="
"
-e REACT_APP_BACKEND_V2_POST_URL="
"
--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
.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' '
' 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' '
' 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
.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 — это программное обеспечение с открытым исходным кодом, которое позволяет создать собственное высокопроизводительное объектное хранилище данных