دليل عملي

استضافة Excalidraw على VPS: لوح تعاوني مفتوح المصدر

الاستضافة الذاتية8 دقائق للقراءةعدد الخطوات: 5

Miro وFigJam وLucidspark: تفرض أدوات اللوح الأبيض SaaS رسوماً بالمقعد، وتخزّن نماذجك على خوادمها، وتحدّ من عدد الأعضاء وفق الخطة. Excalidraw هو البديل مفتوح المصدر (MIT): لوح تعاون في الوقت الفعلي يشبه الرسم اليدوي، مكوّن من عنصرين — واجهة React وخادم WebSocket — يمكن استضافتهما ذاتياً على VPS في حاويتَي Docker. يوضح هذا الدليل كيفية نشرهما وضبط nginx لـ WebSocket وتفعيل استمرارية اللوحات.

المحتويات· لماذا تستضيف Excalidraw بنفسك بدلاً من النسخة العامة1/10
  1. 01لماذا تستضيف Excalidraw بنفسك بدلاً من النسخة العامة
  2. 02الفوائد الملموسة
  3. 03البنية: حاويتان بأدوار مختلفة
  4. 04المتطلبات الأساسية
  5. 05قائمة التحقق من المتطلبات
  6. 06نشر Excalidraw في 5 خطوات
  7. 07استمرارية اللوحات: نهجان
  8. 08Excalidraw المستضاف ذاتياً مقابل بدائل SaaS
  9. 09للمزيد: SSO وقوائم IP المسموح بها
  10. 10التكامل مع مجموعة الأدوات المستضافة ذاتياً

لماذا تستضيف Excalidraw بنفسك بدلاً من النسخة العامة

تعمل النسخة العامة على ‎excalidraw.com بشكل جيد للرسم السريع الفردي. إلا أنها تُمرّر جلسات التعاون في الوقت الفعلي عبر خادم تديره شركة Excalidraw‏ s.r.o. قد يكون ذلك مقبولاً لجلسة عصف ذهني عابرة، لكنه أقل قبولاً حين تحتوي اللوحات على نماذج تدفق العملاء أو مخططات البنية الداخلية أو واجهات مشاريع مشمولة بالسرية.

استضافة Excalidraw ذاتياً تنقل حدود التحكم إلى بنيتك التحتية الخاصة. تمر الجلسات عبر خادمك WebSocket على نطاقك الخاص دون المرور بطرف ثالث. أنت من يقرر من يتصل — عبر قائمة IP المسموح بها أو SSO‏ OIDC أو HTTP Basic Auth أمام nginx. وبما أن المكوّنَين منشوران بموجب رخصة MIT، لا توجد قيود تجارية بصرف النظر عن عدد العملاء أو المتعاونين.

الفوائد الملموسة

  • لا رسوم برمجية — المكوّنان (الواجهة وخادم التعاون) برخصة MIT. تدفع مقابل VPS فقط.
  • سرية النماذج — تبقى جلسات الرسم على بنيتك التحتية ولا يمر أي ملف تصميم عبر طرف ثالث.
  • التحكم في الوصول — قائمة IP أو SSO‏ OIDC أو HTTP Basic Auth أمام nginx حسب مستوى العزل المطلوب.
  • جلسات وأعضاء غير محدودين — لا سقف يفرضه الخطة؛ الحد الوحيد هو ذاكرة RAM للخادم، وخادم excalidraw-room خفيف الوزن.
  • استمرارية اختيارية — ربط وحدة تخزين Docker أو حاوية S3 متوافقة لأرشفة اللوحات المصدَّرة بصيغة JSON.
  • التكامل مع مجموعة الأدوات المستضافة ذاتياً — Excalidraw إلى جانب Penpot وMattermost وDocmost يُغلق محيط SaaS لوكالة بأكملها.

البنية: حاويتان بأدوار مختلفة

يفصل Excalidraw ما يعتبره معظم الناس أداةً واحدةً إلى مكوّنَين مستقلَّين:

- excalidraw/excalidraw — الواجهة المُجمَّعة بـ React، تُقدَّم كموقع ثابت عبر nginx داخل الحاوية. لا تشغّل خادماً تطبيقياً. قيدها الوحيد هو المتغير VITE_APP_WS_SERVER_URL الذي يجب أن يشير إلى خادم الغرفة وقت البناء. هذا المتغير مدمج في حزمة JavaScript: تغييره على حاوية قيد التشغيل لا يُحدث أي أثر.

- excalidraw/excalidraw-room — خادم Node.js‏/Socket.IO يُعيد توجيه أحداث الرسم في الذاكرة بين المشاركين في الجلسة ذاتها. إنه عديم الحالة: لا يُخزّن شيئاً وينسى كل شيء عند إعادة التشغيل. الرسومات تعيش في localStorage المتصفح أو تُصدَّر يدوياً.

النتيجة العملية: الصورة الرسمية لـ Docker تُضمّن عنوان خادم التعاون الخاص بـ Excalidraw. لإعادة التوجيه نحو excalidraw-room الخاص بك، تحتاج إلى بناء صورتك الخاصة مع تعيين VITE_APP_WS_SERVER_URL على نطاقك.

المتطلبات الأساسية

يغطي VPS Start من ServOrbit (2 نواة، 4 GB RAM) الحالة العادية: الواجهة الثابتة شبه خالية من الحمل، ويستهلك excalidraw-room أقل من 256 ميغابايت في الظروف العادية. مع عشرة متعاونين متزامنين ستبقى بعيداً عن نصف الذاكرة المتاحة.

ما تحتاجه قبل البدء:

قائمة التحقق من المتطلبات

  • خادم VPS بما لا يقل عن 1 نواة و512 ميغابايت RAM (يُوصى بـ 1 غيغابايت للفريق).
  • Docker Engine وإضافة Docker Compose مثبَّتان (للتحقق: docker compose version).
  • اسم نطاق مُوجَّه نحو IP الخادم — بدون TLS تُحجب WebSockets في المتصفحات الحديثة.
  • وصول SSH بصلاحيات root أو مستخدم بصلاحيات sudo.
  • شهادة TLS صالحة — يهيئ ServOrbit Let's Encrypt تلقائياً.

نشر Excalidraw في 5 خطوات

  1. إنشاء VPS وتثبيت Docker

    شغّل VPS Ubuntu 24.04 من لوحة تحكم ServOrbit. بعد الاتصال عبر SSH، إن لم يكن Docker مثبتاً بعد، شغّل:

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

    تحقق من استجابة Docker Compose Plugin قبل المتابعة:

    docker compose version
  2. بناء الصورة مع رابط التعاون الخاص بك

    انسخ المستودع الرسمي ثم ابنِ الصورة مع استبدال نطاقك. استبدل collab.yourdomain.com بالنطاق الفرعي الذي تخصصه لـ 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 .

    تُدمج هذه الخطوة عنوان خادم WebSocket في حزمة JavaScript. إن غيّرت النطاق لاحقاً ستحتاج إلى إعادة البناء.

  3. كتابة ملف docker-compose.yml

    أنشئ مجلد عمل وضع الملف التالي. تستمع الخدمتان داخلياً؛ nginx (الخطوة التالية) هو نقطة الدخول العامة الوحيدة:

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

    محتوى 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:

    شغّل المجموعة:

    docker compose up -d
  4. إعداد nginx مع ترويسات WebSocket

    هذه الخطوة هي المكان الذي تفشل فيه معظم عمليات النشر بصمت: بدون ترويستَي Upgrade وConnection، يفتح المتصفح اتصالاً HTTP عادياً بدلاً من WebSocket، وتبدو ميزة التعاون كأنها لا تعمل دون أي رسالة خطأ.

    كتلة nginx للواجهة الأمامية لـ ‎Excalidraw (draw.yourdomain.com):

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

    كتلة nginx لخادم الغرفة (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;
        }
    }

    أعِد تحميل nginx (nginx -s reload) بعد وضع الكتل.

  5. اختبار التعاون في الوقت الفعلي

    افتح https://draw.yourdomain.com في علامتَي تبويب أو متصفحَين مختلفَين. انقر على Live collaboration في شريط الأدوات وأنشئ جلسة. انسخ رابط الجلسة في علامة التبويب الثانية.

    ارسم شيئاً في علامة التبويب الأولى: يجب أن تظهر اللمسة في الثانية فوراً. إن لم تظهر، تحقق أولاً من ترويسات WebSocket في nginx (تُظهر أدوات الشبكة في المتصفح إن كان الاتصال قد ارتقى إلى 101 Switching Protocols).

استمرارية اللوحات: نهجان

بشكل افتراضي، يكون excalidraw-room عديم الحالة تماماً. إن أُعيد تشغيل الخادم، تُفقد الجلسة الجارية — لكن كل مشارك يحتفظ محلياً بما رسمه في localStorage.

الخيار الأول — تصدير JSON تلقائي. اضبط مهمة cron أو سكريبتاً يستدعي واجهة تصدير Excalidraw ويحفظ ملفات ‎‎.excalidraw‎ في وحدة تخزين Docker. يمكن إعادة استيراد هذه الملفات في أي وقت من الواجهة.

الخيار الثاني — حاوية S3 متوافقة. يوفر ServOrbit تخزين كائنات متوافق مع S3. اربط حاوية التخزين كوجهة لأرشفة التصديرات؛ الاستعادة بعد عطل تتم بإعادة استيراد آخر ملف محفوظ.

Excalidraw المستضاف ذاتياً مقابل بدائل SaaS

مرّر الجدول أفقيًا

المعيارExcalidraw (ذاتي)MiroFigJam
التكلفة لكل مستخدملا شيء (VPS فقط)مدفوع بالمقعدمدفوع بالمقعد
استضافة البياناتبنيتك التحتية‎Miro Inc.‎‎Adobe / Figma‎
الأعضاء المتزامنونغير محدود (RAM فقط)محدود بالخطةمحدود بالخطة
رخصة البرنامجMIT (مفتوح المصدر)خاصةخاصة
قابل للاستضافة الذاتيةنعم، حاويتانلالا
التحكم في الوصولIP / SSO / Basic AuthSSO (خطط Pro)SSO (خطط Edu+)

للمزيد: SSO وقوائم IP المسموح بها

بالنسبة للوكالات ذات متطلبات سرية صارمة، قد لا يكون نشر Excalidraw على نطاق فرعي عام مقبولاً دائماً. ثمة إعدادان شائعان يُحكمان الوصول دون تعديل Excalidraw نفسه.

HTTP Basic Auth عبر nginx. أضف توجيه auth_basic أمام كتلة location / للواجهة الأمامية. يجب على أي شخص يحاول فتح الواجهة المصادقة قبل تحميل تطبيق React. سهل التطبيق وكافٍ للمشاريع الداخلية.

قائمة IP المسموح بها. إن اتصل المتعاونون من عناوين IP ثابتة أو شبكة VPN مؤسسية، تكفي كتلة allow/deny في nginx لإغلاق الوصول:

allow 203.0.113.0/24;
allow 198.51.100.42;
deny all;

SSO‏ OIDC عبر وكيل عكسي للمصادقة. للفرق التي تمتلك بالفعل مزود هوية (Keycloak أو Authelia أو Authentik)، يُفوَّض التحقق من الهوية إلى SSO الحالي عبر وكيل كـ Oauth2-Proxy أو Authelia أمام nginx. لا يحتاج Excalidraw إلى معرفة وجود طبقة المصادقة الإضافية.

التكامل مع مجموعة الأدوات المستضافة ذاتياً

يتكامل Excalidraw بشكل طبيعي مع مجموعة الأدوات المستضافة ذاتياً. إن نشرت Mattermost للتواصل الجماعي، يمكنك لصق رابط جلسة Excalidraw في قناة ودعوة المتعاونين للانضمام إلى اللوحة مباشرةً. وإن كان Penpot يغطي التصميم عالي الدقة، يتولى Excalidraw العمل الأولي — الواجهات السريعة ومخططات التدفق وجلسات العصف الذهني — قبل انتقال التصاميم إلى Penpot.

هذا التكامل هو الحجة الحقيقية في مواجهة SaaS: تبقى كل أداة في نطاق كفاءتها دون اشتراك منصة يفوتر عن ميزات لا تحتاجها.

منصة واحدة لـ VPS والنطاق والنسخ الاحتياطية

يجمع ServOrbit VPS والنطاق والنسخ الاحتياطية في مساحة وكالة واحدة: انشر Excalidraw لفريقك وأدِر بنية تحتية عملائك من لوحة تحكم واحدة.

بحاجة إلى مساعدة؟

تصفّح مركز المساعدة والأسئلة الشائعة، أو تواصل مع فريقنا — معاودة اتصال أو WhatsApp أو بريد إلكتروني. الدعم بـالعربية والفرنسية والإنجليزية.

راسلنا على WhatsAppيُفتح في علامة تبويب جديدة