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

SaaS Landing Pageشغّل صفحة الهبوط محليًا

شغّل صفحة الهبوط محليًا

شغّل صفحة الهبوط على جهازك بأمرين من Docker.

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

قبل أن تبدأ: ثبّت Docker Desktop وافتحه، أو Docker Engine على Linux. لا تحتاج إلى أي شيء آخر.

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

  1. نزّل القالب

    افتح صفحة القالب على aniq-ui.com واضغط احصل عليه مجاناً. أدخل اسمك وبريدك الإلكتروني: تنتقل إلى لوحة التحكم، وتجد ملف ZIP في صفحة «قوالبي».

    النتيجة المتوقعة: يظهر في مجلد التنزيلات ملف باسم مثل landing-page-template-2-main-….zip.

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

    فك ضغط ملف ZIP وافتح طرفية داخل المجلد landing-page-template-2. على Windows، فك الضغط في مستكشف الملفات، ثم افتح طرفية داخل المجلد.

    الطرفية
    unzip landing-page-template-2-*.zip
cd landing-page-template-2

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

    تواجه مشكلة؟

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

    يثبّت Docker الاعتماديات ويبني الموقع داخل الصورة. يستغرق البناء الأول بضع دقائق ويحتاج إلى اتصال بالإنترنت؛ أما عمليات البناء اللاحقة فتعيد استخدام ما لم يتغير.

    الطرفيةفي landing-page-template-2
    docker build -t saas-landing .

    النتيجة المتوقعة: ينتهي البناء بسطر يذكر اسم الصورة saas-landing.

    تواجه مشكلة؟

  4. شغّله وافتح الصفحة

    شغّل حاوية من الصورة، ثم افتح localhost:3030محلي. اترك الطرفية مفتوحة ما دمت تستخدمه.

    الطرفيةفي landing-page-template-2
    docker run -p 3030:3030 saas-landing

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

    إذا توقف التشغيل بالرسالة ports are not available ... address already in use، فهناك برنامج آخر يستخدم المنفذ 3030. إما أن توقفه، أو تغيّر الرقم الأول بعد -p وتفتح ذلك المنفذ بدلًا منه: docker run -p 3041:3030 saas-landing، ثم localhost:3041محلي.

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

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

    تواجه مشكلة؟

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

اضغط Ctrl+C في الطرفية لإيقاف الموقع. إذا أغلقت تلك الطرفية، فابحث عن الحاوية وأوقفها:

الطرفية
docker ps
docker stop <container-id>

استخدم المعرّف الذي يعرضه docker ps لـ saas-landing. لإعادة التشغيل، شغّل أمر docker run نفسه؛ فالصورة مبنية بالفعل.

بعد أن تغيّر أي ملف، ابنِ الصورة مجددًا قبل تشغيلها. تحتوي الصورة على نسخة من الكود كما كان وقت بنائها.

إعداداتك الخاصة

يُضمَّن الإعدادان الاختياريان في الصفحة عند بناء الصورة، لذلك فهما وسيطا بناء، وليسا خيارين لـ docker run:

الطرفيةفي landing-page-template-2
docker build -t saas-landing --build-arg NEXT_PUBLIC_SITE_URL=https://www.your-domain.com .

التالي

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

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

حل المشكلات

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

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