انتقل إلى المقال
Aniq-UI

Dashboard 2انشره على الإنترنت

انشره على الإنترنت

انشر لوحة التحكم وواجهة API على خادم باستخدام Docker، أو لوحة التحكم على Vercel أو أي استضافة Node.js.

لحزمة واجهة + خلفية

قبل النشر

قبل الإطلاق. كل seed (yarn seed وyarn seed:prod والتشغيل الأول في Docker) ينشئ مشرفين نموذجيين تظهر كلمات مرورهم في الأدلة. غيّر كلمات مرورهم أو احذفهم، واضبط JWT_SECRET الخاص بك، قبل أن يصبح بإمكان أي شخص آخر الوصول إلى لوحة التحكم.

  • شغّل واجهة API مع NODE_ENV=production وJWT_SECRET خاص بك، وضبط CORS_ORIGIN وFRONTEND_URL على العنوان العام للوحة التحكم. ترفض واجهة API في الإنتاج البدء من دون أول متغيرين.
  • خلف وكيل عكسي (Nginx أو Caddy أو موزّع أحمال)، اضبط TRUST_PROXY=1 ليحسب حد تسجيل الدخول الزوار بدلًا من الوكيل.
  • اترك DEMO_MODE وNEXT_PUBLIC_DEMO_MODE معطلين، إلا إذا كان النشر نسخة تجريبية عامة.

قبل النشر

عند البناء من دون عنوان واجهة API، تعمل لوحة التحكم على واجهتها التجريبية: الحسابات النموذجية موجودة في كود التطبيق ويجري التحقق منها في المتصفح، فيستطيع أي شخص قراءتها وتسجيل الدخول بها، ويبقى كل تغيير في متصفح الزائر. وجّهها إلى واجهة API الخاصة بك قبل أن يصل إليها مستخدمون حقيقيون أو بيانات حقيقية.

واجهة API التجريبية المدمجة

اترك NEXT_PUBLIC_DEMO_MODE معطلًا إلا إذا كان النشر نسخة تجريبية عامة.

التطبيقان على خادم واحد باستخدام Docker

ملف docker-compose.yml الذي يشغّل القالب محليًا يشغّله أيضًا على خادم. أعطِ كل تطبيق نطاقه الخاص خلف خادم ويب يضيف HTTPS، مثل Caddy أو Nginx، يوجّه نطاق لوحة التحكم إلى المنفذ 3030 ونطاق واجهة API إلى المنفذ 8000.

  1. حدّد العنوانين

    أنشئ .env في المجلد dashboard-2-full-stack بجوار docker-compose.yml. تضمّن لوحة التحكم عنوان واجهة API في كود JavaScript الخاص بها، وتسمح واجهة API بعنوان لوحة التحكم في CORS_ORIGIN وFRONTEND_URL، وكلاهما من هذين السطرين.

    dashboard-2-full-stack/.env
    DASHBOARD_URL=https://admin.your-domain.com
API_URL=https://api.your-domain.com

  2. أضف مفاتيحك

    تقرأ واجهة API أيضًا الملف back-end/.env إن وُجد، لمفاتيح مزوّدي الذكاء الاصطناعي وR2 ومفتاح MCP. أنشئه من .env.example وأضف TRUST_PROXY=1 خلف خادم الويب. يضبط ملف compose قاعدة البيانات والمنفذ وNODE_ENV=production بنفسه، وتولّد واجهة API قيمة JWT_SECRET داخل وحدة تخزين البيانات إذا لم تحدد واحدة.

    الطرفيةفي dashboard-2-full-stack
    cp back-end/.env.example back-end/.env

  3. شغّلها في الخلفية

    الطرفيةفي dashboard-2-full-stack
    docker compose up --build -d

    النتيجة المتوقعة: يجيب https://api.your-domain.com/api/health بـ "status":"ok"، ويفتح نطاق لوحة التحكم صفحة تسجيل الدخول.

تُعاد الخدمات إلى العمل مع الخادم. تقع قاعدة البيانات في وحدة التخزين dashboard-2-data. بعد تغيير DASHBOARD_URL أو API_URL أو أحد المنافذ، نفّذ docker compose up --build -d مرة أخرى: فيجب بناء لوحة التحكم بالعنوان الجديد.

واجهة API وحدها

لـ back-end ملف Dockerfile خاص به، فيستطيع أي مستضيف يبني من Dockerfile تشغيل واجهة API وحدها. تحفظ الحاوية قاعدة بيانات SQLite في /data: اربط وحدة تخزين هناك، وإلا ضاعت البيانات مع الحاوية. وعلى وحدة تخزين جديدة تنشئ قاعدة البيانات بالبيانات النموذجية مرة واحدة.

الطرفيةفي back-end
docker build -t dashboard-api .
docker run -d --restart unless-stopped -p 8000:8000 -v dashboard-data:/data -e CORS_ORIGIN=https://admin.your-domain.com -e FRONTEND_URL=https://admin.your-domain.com dashboard-api

تعمل الصورة أصلًا مع NODE_ENV=production وملف SQLite في /data. مرّر فقط القيم التي تحتاج إليها، كلًّا منها بـ -e، مثل -e GOOGLE_API_KEY=.... وما زالت الطريقة المعتادة لتشغيل واجهة API هي docker compose up --build في جذر الحزمة، فيشغّلها مع لوحة التحكم.

على مستضيف Node.js من دون Docker، أمر البناء هو yarn build وأمر التشغيل yarn start:prod، ويُنفَّذ yarn seed:prod مرة واحدة لإنشاء الجداول. يحتاج ملف SQLite إلى قرص دائم هناك؛ وعلى مستضيف لا يوفره استخدم MySQL.

لوحة التحكم على Vercel

  1. ضع لوحة التحكم في مستودع Git خاص

    ادفع مجلد لوحة التحكم (front-end في الحزمة الكاملة، وdashboard-2-front-end في حزمة لوحة الإدارة) إلى مستودع خاص على GitHub أو GitLab أو Bitbucket. لا يسمح رخصتك بمشاركة الكود المصدري علنًا.

  2. استورده في Vercel

    أضف مشروعًا جديدًا من ذلك المستودع. يكتشف Vercel أن المشروع Next.js؛ فأبقِ إعدادات البناء الافتراضية. في مستودع الحزمة الكاملة، اضبط المجلد الجذر للمشروع على front-end.

  3. أضف متغيرات البيئة

    أضف ENABLE_EXPERIMENTAL_COREPACK بالقيمة 1، ليثبّت Vercel بإصدار Yarn الذي يحدده package.json. ثم NEXT_PUBLIC_API_BASE_URL (واجهة API مع /api) وNEXT_PUBLIC_WEBSOCKET_BASE_URL (العنوان نفسه من دون /api) وNEXT_PUBLIC_BASE_URL (عنوان لوحة التحكم نفسها). أما WEATHER_API_KEY فاختياري.

  4. انشر

    ابدأ النشر، ثم أضف نطاقك في إعدادات النطاقات (Domains) للمشروع، وأضف ذلك العنوان إلى CORS_ORIGIN وFRONTEND_URL في واجهة API.

    النتيجة المتوقعة: يفتح نطاقك صفحة تسجيل الدخول.

بعد تغيير أي متغير NEXT_PUBLIC_*، انشر مرة أخرى: فالتطبيق الذي يعمل يحتفظ بالقيم التي بُني بها.

لوحة التحكم على خادم Node.js

بعد ضبط إعداداتك في ملف .env الخاص بلوحة التحكم، ثبّت ثم ابنِ ثم شغّل:

الطرفية
corepack enable
yarn install
yarn build
yarn start

تجيب على المنفذ 3030، أو على PORT عندما تحدده الاستضافة. ضع خادم ويب أمامها لنطاقك وHTTPS، وأبقِ yarn start قيد التشغيل بمدير عمليات أو بخدمة نظام.

لوحة التحكم كصورة Docker

يبني Dockerfile الخاص بلوحة التحكم خادمًا مستقلًا على المنفذ 3030، ويعمل بمستخدم من دون صلاحيات إدارية. عنوان واجهة API وسيط بناء:

الطرفية
docker build -t dashboard-2 --build-arg NEXT_PUBLIC_API_BASE_URL=https://api.your-domain.com/api --build-arg NEXT_PUBLIC_WEBSOCKET_BASE_URL=https://api.your-domain.com --build-arg NEXT_PUBLIC_BASE_URL=https://admin.your-domain.com .
docker run -d --restart unless-stopped -p 3030:3030 dashboard-2

تُقرأ WEATHER_API_KEY عند تشغيل الحاوية: أضف -e WEATHER_API_KEY=... إلى docker run.

بعد أن يصبح على الإنترنت

  • سجّل الدخول على عنوان لوحة التحكم، مع /en و/ar، وتحقق من اللغتين.
  • تطلب كل صفحة من محركات البحث ألا تفهرسها، عبر ترويسة X-Robots-Tag: noindex, nofollow المضبوطة في next.config.js، لأن لوحة تحكم يُسجَّل الدخول إليها لا مكان لها في نتائج البحث.

توقفت عند خطوة؟

ابحث عن الحل قبل أن تبدأ من جديد.

حل المشكلات

تفضيلات ملفات تعريف الارتباط

نستخدم ملفات تعريف الارتباط لتعزيز تجربة التصفح الخاصة بك وتحليل حركة المرور على الموقع وتخصيص المحتوى. بالنقر على "قبول الكل"، فإنك توافق على استخدامنا لملفات تعريف الارتباط للتحليلات والإعلانات المخصصة.