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

E-Commerceشغّل المتجر محليًا

شغّل المتجر محليًا

شغّل حزمتك على جهازك باستخدام Docker.

لحزمة الحزمة الكاملة

Dockerموصى بهالتثبيت اليدوي

قبل أن تبدأ: ثبّت Docker Desktop وافتحه، أو Docker Engine مع Compose.

اطّلع على المتطلبات

  1. نزّل قالبك

    افتح صفحة «قوالبي» ونزّل ملف ZIP الخاص بحزمتك.

    النتيجة المتوقعة: يظهر في مجلد التنزيلات ملف باسم مثل e-commerce-1-main-….zip.

  2. فك الضغط وافتح المجلد

    فك ضغط ملف ZIP وافتح طرفية داخل المجلد e-commerce-1. على Windows، فك الضغط في مستكشف الملفات، ثم افتح طرفية داخل المجلد.

    الطرفية
    unzip e-commerce-1-*.zip
cd e-commerce-1

    النتيجة المتوقعة: يحتوي المجلد على admin-dashboard وback-end وstorefront وdocker-compose.yml.

    تواجه مشكلة؟

  3. شغّل التطبيقات

    ابنِ واجهة API والمتجر ولوحة الإدارة وشغّلها. لا تحتاج إلى ضبط أي شيء مسبقًا. في التشغيل الأول تُبنى ثلاث صور وتُملأ قاعدة البيانات بالمتجر التجريبي، وهذا يستغرق بضع دقائق؛ أما مرات التشغيل اللاحقة فتستغرق ثوانيَ.

    الطرفيةفي e-commerce-1
    docker compose up --build

    المنفذ مستخدم بالفعل؟

    إذا توقف التشغيل برسالة ports are not available ... address already in use فهناك برنامج آخر يستخدم 3030 أو 3031 أو 8000. إما أن توقفه، أو أن تنشئ ملفًا باسم .env داخل المجلد e-commerce-1 يحدد المنفذ الذي تحتاجه، مثل ADMIN_PORT=3041 (وSITE_PORT للمتجر، وAPI_PORT لواجهة API). ثم شغّل docker compose up --build من جديد وافتح التطبيق على منفذه الجديد.

    المنفذ مستخدم بالفعل

    النتيجة المتوقعة: تبقى الخدمات الثلاث قيد التشغيل ويتوقف السجل عن التمرير. اترك هذه الطرفية مفتوحة.

    تواجه مشكلة؟

  4. افتح المتجر

    افتح localhost:3030محلي. لتسجيل الدخول كعميل تجريبي، استخدم john.doe@example.com مع كلمة المرور password123. النسخة العربية على /ar.

    النتيجة المتوقعة: يفتح المتجر على صفحته الرئيسية مع الكتالوج التجريبي.

    تواجه مشكلة؟

  5. سجّل الدخول إلى لوحة الإدارة

    افتح localhost:3031محلي. النموذج معبّأ مسبقًا ببيانات المدير العام (Super Admin)، أي admin@example.com مع كلمة المرور Admin@123. غيّرها بعد أول تسجيل دخول.

    النتيجة المتوقعة: تفتح لوحة الإدارة على صفحة النظرة العامة.

    تواجه مشكلة؟

جولة سريعة

هكذا يبدو المتجر التجريبي عندما يعمل كل شيء.

الحسابيسجّل الدخول علىالبريد الإلكترونيكلمة المرور
المدير العام (Super Admin)لوحة الإدارةadmin@example.comAdmin@123
موظف، بدور Viewer للقراءة فقطلوحة الإدارةjohn.smith@admin.comadmin123
العميلالمتجرjohn.doe@example.compassword123

توجد عشرة حسابات موظفين أخرى على @admin.com بكلمة المرور admin123، وأربعة عشر عميلًا آخر على @example.com بكلمة المرور password123. هذه حسابات تجريبية محلية فقط.

أوقف التطبيقات وأعد تشغيلها

اضغط Ctrl+C في الطرفية لإيقاف التطبيقات، أو شغّل هذا الأمر من المجلد e-commerce-1. تبقى بياناتك محفوظة في وحدة التخزين ecommerce-data.

الطرفيةفي e-commerce-1
docker compose down

أعد التشغيل بالأمر نفسه في الخطوة 3. من دون --build يعيد استخدام الصور التي بنيتها مسبقًا.

الطرفيةفي e-commerce-1
docker compose up

حافظ على بياناتك

يحذف docker compose down -v وحدة تخزين قاعدة البيانات أيضًا. في التشغيل التالي تُنشأ نسخة جديدة من المتجر التجريبي، ويضيع كل ما أنشأته.

شغّل المتجر

هذه الحزمة هي المتجر وحده. يعمل على متجر نموذجي مدمج إلى أن توجّهه إلى واجهة API الخاصة بالقالب. واجهة API حزمة منفصلة وليست ضمن هذا التنزيل.

  1. نزّل قالبك

    افتح صفحة «قوالبي» ونزّل ملف ZIP الخاص بالمتجر.

  2. فك الضغط وافتح المجلد

    الطرفية
    unzip storefront-*.zip
cd storefront

    النتيجة المتوقعة: يحتوي المجلد على Dockerfile وpackage.json.

    تواجه مشكلة؟

  3. ابنِ الصورة

    تُضمَّن قيم NEXT_PUBLIC_* داخل كود JavaScript الذي يحمّله المتصفح، لذلك فهي وسائط بناء. اتركها لتشغيل المتجر النموذجي؛ ولاستخدام واجهة API خاصة بك، مرّر عنوانها.

    الطرفيةفي storefront
    docker build -t ecommerce-storefront .

    مع واجهة API خاصة بك:

    الطرفيةفي storefront
    docker build -t ecommerce-storefront --build-arg NEXT_PUBLIC_API_BASE_URL=https://api.your-domain.com/api --build-arg NEXT_PUBLIC_SITE_URL=https://shop.your-domain.com .
    تواجه مشكلة؟

  4. شغّله

    إذا كان المنفذ 3030 مشغولًا، فغيّر الرقم الموجود على يسار -p، مثل -p 3041:3030، وافتح ذلك المنفذ بدلًا منه.

    الطرفيةفي storefront
    docker run -p 3030:3030 ecommerce-storefront

    النتيجة المتوقعة: يفتح localhost:3030محلي المتجر. من دون واجهة API، يظهر تنبيه «بيانات تجريبية» يوضح ذلك، وأي بريد إلكتروني وكلمة مرور يسجّلان دخولك كمتسوّق نموذجي.

    تواجه مشكلة؟

شغّل لوحة الإدارة

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

  1. نزّل قالبك

    افتح صفحة «قوالبي» ونزّل ملف ZIP الخاص بلوحة الإدارة.

  2. فك الضغط وافتح المجلد

    الطرفية
    unzip admin-dashboard-*.zip
cd admin-dashboard

    النتيجة المتوقعة: يحتوي المجلد على Dockerfile وpackage.json.

    تواجه مشكلة؟

  3. ابنِ الصورة

    من دون وسائط بناء تستخدم لوحة الإدارة متجرها النموذجي. لاستخدام واجهة API خاصة بك، مرّر عنوانها، وعنوان WebSocket الخاص بها (الخادم نفسه من دون /api)، وعنوان المتجر.

    الطرفيةفي admin-dashboard
    docker build -t ecommerce-admin .

    مع واجهة API خاصة بك:

    الطرفيةفي admin-dashboard
    docker build -t ecommerce-admin --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_STOREFRONT_URL=https://shop.your-domain.com .
    تواجه مشكلة؟

  4. شغّلها وسجّل الدخول

    إذا كان المنفذ 3031 مشغولًا، فغيّر الرقم الموجود على يسار -p، مثل -p 3041:3031، وافتح ذلك المنفذ بدلًا منه.

    الطرفيةفي admin-dashboard
    docker run -p 3031:3031 ecommerce-admin

    النتيجة المتوقعة: يفتح localhost:3031محلي نموذج تسجيل الدخول، معبّأً مسبقًا بـ admin@example.com وAdmin@123. على المتجر النموذجي، يسجّل دخولك كمدير عام أي بريد إلكتروني صالح مع كلمة مرور من 6 أحرف على الأقل.

    تواجه مشكلة؟

شغّل واجهة API

هذه الحزمة هي واجهة API المبنية على NestJS وحدها، على ملف SQLite محفوظ في وحدة تخزين Docker. المتجر ولوحة الإدارة حزمتان منفصلتان وليستا ضمن هذا التنزيل.

  1. نزّل قالبك

    افتح صفحة «قوالبي» ونزّل ملف ZIP الخاص بواجهة API.

  2. فك الضغط وأنشئ ملف البيئة

    يعمل .env.example كما هو للتشغيل المحلي. نسخة .env هي المكان الذي تضع فيه مفاتيحك لاحقًا.

    الطرفية
    unzip back-end-*.zip
cd back-end
cp .env.example .env
    تواجه مشكلة؟

  3. ابنِ الصورة

    الطرفيةفي back-end
    docker build -t ecommerce-api .
    تواجه مشكلة؟

  4. شغّلها مع المتجر التجريبي

    تحصل قاعدة البيانات الجديدة على جداول فارغة ما لم تطلب المتجر التجريبي. تحتفظ وحدة التخزين بقاعدة البيانات بين مرات التشغيل. إذا كان المنفذ 8000 مشغولًا، فغيّر الرقم الموجود على يسار -p، مثل -p 8010:8000، واستخدم ذلك العنوان: يجب عندها أن تشير واجهاتك الأمامية إلى http://localhost:8010/api.

    الطرفيةفي back-end
    docker run -p 8000:8000 -v ecommerce-data:/data -e SEED_DEMO_DATA=true ecommerce-api

    النتيجة المتوقعة: يجيب localhost:8000/api/healthمحلي بـ {"status":"ok"}.

    تواجه مشكلة؟

لا تقرأ الحاوية ملف .env إلا عندما تضيف --env-file .env إلى docker run؛ وبهذه الطريقة تصل إليها مفاتيح Stripe و R2 والذكاء الاصطناعي. من دون JWT_SECRET خاص بك، أو مع القيمة الموجودة في المثال، تولّد الحاوية سرًا وتحفظه في وحدة التخزين.

لا تتضمن الصورة نموذج إزالة الخلفية إلا إذا طلبته. لتضمينه، ابنِ الصورة بالأمر:

الطرفيةفي back-end
docker build --build-arg FETCH_BG_MODEL=true -t ecommerce-api .

التالي

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

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

حل المشكلات

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

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