في مقالنا السابق، قمنا ببناء تطبيق ذكاء اصطناعي متكامل (Full Stack) باستخدام بايثون وفلاسك. شعور رائع، أليس كذلك؟ لقد قمت بتشغيله على جهازك، ورأيته يعمل على `localhost:5000`.
لكن، هناك مشكلة واحدة: أنت الوحيد الذي يستطيع استخدامه!
إذا حاولت إرسال رابط `localhost` هذا إلى صديقك، فلن يعمل. تطبيقك لا يزال "سجيناً" على جهازك. لكي يراه العالم (ويراه مراجعو Google AdSense)، يجب عليك "نشره" (Deploy) على خادم حقيقي على الإنترنت.
في الماضي، كانت هذه العملية معقدة ومكلفة. لكن اليوم، بفضل منصات مثل Render، أصبح بإمكان أي مطور نشر تطبيقاته مجاناً. في هذا الدليل الشامل في KamalZone، سنقوم بنقل تطبيقنا خطوة بخطوة من "سجن `localhost`" إلى "رابط عالمي" مجاني.
لماذا "النشر" هو أهم مهارة للمطور؟
بصفتك مطوراً يهدف لبناء أدوات عملية، فإن كتابة الكود هي 50% فقط من العمل. الـ 50% الأخرى هي "النشر". لماذا؟
- يحول الهواية إلى منتج: الكود على جهازك هو "هواية". الكود على رابط حي هو "منتج" يمكن للناس استخدامه.
- أساسي للـ E-A-T و AdSense: عندما يراجعك AdSense، فإنه يزور "موقعك الحي". وجود أدوات حية وتفاعلية تعمل على الإنترنت هو أقوى إثبات لخبرتك (Expertise) وسلطتك (Authoritativeness).
- بناء معرض أعمال حقيقي: إرسال رابط GitHub جيد، لكن إرسال رابط لتطبيق "حي" يمكنك تجربته... هو ما يمنحك الوظيفة.
لماذا Render؟ (البديل المجاني والحديث لـ Heroku)
لسنوات، كانت Heroku هي الخيار الأول للنشر المجاني، لكنها ألغت الخطة المجانية. اليوم، "Render" هو البديل الأفضل للمشاريع الصغيرة والمتوسطة، للأسباب التالية:
- خطة مجانية حقيقية: يقدمون "خدمة ويب مجانية" (Free Web Service) كافية لتشغيل تطبيقاتنا البسيطة (مثل تطبيق Flask AI).
- سهولة مطلقة: يربط مباشرة بحسابك على GitHub. كل ما عليك فعله هو "الدفع" (Push) لتحديثاتك على GitHub، ويقوم Render بإعادة بناء ونشر التطبيق تلقائياً.
- يدعم كل شيء: يدعم Python, Node.js, Ruby, والمزيد.
خارطة طريق النشر: من `app.py` إلى `app.onrender.com`
لنجاح عملية النشر، لا يمكننا فقط رفع ملف `app.py`. نحن بحاجة لإخبار Render "كيف" يشغل مشروعنا. هذا يتم عبر 3 ملفات إضافية بسيطة.
الخطوة 1: تجهيز المشروع (الملفات السحرية الثلاثة)
في نفس مجلد مشروعك (بجانب `app.py`)، قم بإنشاء هذه الملفات:
أ. ملف `requirements.txt` (قائمة المكتبات)
يحتاج Render لمعرفة المكتبات التي استخدمتها. افتح الـ Terminal (أو CMD) في مجلد مشروعك واكتب هذا الأمر:
pip freeze > requirements.txt
سيقوم هذا بإنشاء ملف `requirements.txt` يحتوي على أسماء المكتبات (مثل `Flask`, `transformers`, `torch`, `flask-cors`).
ب. ملف `Procfile` (أمر البدء)
لا يمكننا استخدام خادم فلاسك التجريبي (`app.run()`) في الإنتاج. نحتاج إلى خادم ويب حقيقي. `gunicorn` هو الخيار الأشهر.
أولاً، قم بتثبيته: `pip install gunicorn` (ثم قم بتحديث ملف `requirements.txt` مرة أخرى).
ثانياً، أنشئ ملفاً جديداً باسم `Procfile` (بدون أي امتداد) واكتب فيه هذا السطر الوحيد:
web: gunicorn app:app
هذا يخبر Render: "عند تشغيل خدمة الويب، استخدم gunicorn لتشغيل الكائن `app` الموجود داخل الملف `app.py`".
ج. ملف `.gitignore` (للتنظيف)
لا نريد رفع ملفات ضخمة أو غير ضرورية إلى GitHub. أنشئ ملف `.gitignore` وأضف إليه الأشياء التي تريد تجاهلها (مهم جداً للنماذج الكبيرة إذا حملتها محلياً).
الخطوة 2: رفع المشروع إلى GitHub
الآن بعد أن أصبح مجلد مشروعك جاهزاً (يحتوي على `app.py`, `requirements.txt`, `Procfile`)، قم بإنشاء مستودع (Repository) جديد على GitHub وارفع إليه هذه الملفات.
(هذه هي الخطوة التي يقرأ منها Render الكود الخاص بك).
الخطوة 3: إعداد Render (الربط والنشر)
هذه هي الخطوة الأخيرة والممتعة:
- سجل دخولك إلى Render.com.
- في لوحة التحكم، اضغط "New +" ثم اختر "Web Service".
- اربط حسابك في GitHub واختر المستودع (Repository) الذي رفعت عليه الكود.
- سيطلب منك Render ملء بعض الحقول:
- Name: اختر اسماً لتطبيقك (مثال: `kamalzone-summarizer`).
- Region: اختر أقرب خادم (مثل Frankfurt (EU Central)).
- Branch: اتركه `main` (أو `master` حسب اسم الفرع في GitHub).
- Build Command: `pip install -r requirements.txt` (سيقوم Render بتشغيل هذا الأمر لتثبيت مكتباتك).
- Start Command: `gunicorn app:app` (سيقرأ هذا تلقائياً من ملف `Procfile`!).
- Plan (الخطة): تأكد من اختيار "Free" (مجاني).
اضغط "Create Web Service".
الخطوة 4: الانتظار... ومواجهة "خطأ الذاكرة"
الآن، سيحاول Render بناء تطبيقك. سيبدأ في تحميل كل المكتبات من `requirements.txt`. وهنا ستواجه مشكلتك الأولى...
المشكلة: نموذج الذكاء الاصطناعي `facebook/bart-large-cnn` الذي استخدمناه ضخم جداً (أكثر من 1.5 GB). الخطة المجانية في Render لها ذاكرة (RAM) محدودة (512MB). سيفشل البناء بسبب نفاد الذاكرة أثناء محاولة تحميل النموذج.
الحل؟ للمشاريع المجانية، يجب أن نكون أذكياء. سنستخدم نموذجاً "أخف" (Distilled model).
تعديل `app.py` للنموذج الخفيف
عد إلى كود `app.py` الخاص بك، واستبدل سطر تحميل النموذج:
# (الكود القديم)
# summarizer = pipeline("summarization", model="facebook/bart-large-cnn")
# (الكود الجديد الأخف)
# هذا النموذج أصغر بكثير (حوالي 400MB) وسيعمل على الخطة المجانية
summarizer = pipeline("summarization", model="sshleifer/distilbart-cnn-6-6")
الآن، قم بحفظ التعديل، وارفعه (Push) إلى GitHub. سيقوم Render تلقائياً باكتشاف التغيير وإعادة بناء التطبيق... وهذه المرة، سينجح!
الخطوة 5: تحديث الواجهة الأمامية (Frontend)
تطبيقك الآن يعمل! سيمنحك Render رابطاً عاماً، مثل: `https://kamalzone-summarizer.onrender.com`.
هل تتذكر كود JavaScript الخاص بنا؟ يجب أن نقوم بتحديثه ليتصل بالرابط الجديد بدلاً من الرابط المحلي.
// (الكود القديم في ملف index.html)
// const API_URL = 'http://127.0.0.1:5000/summarize';
// (الكود الجديد)
// استبدله بالرابط الذي أعطاه لك Render
const API_URL = 'https://kamalzone-summarizer.onrender.com/summarize';
بمجرد تحديث هذا الرابط في الواجهة الأمامية (سواء كانت في محرر الويب أو في ملف HTML لديك)، يصبح تطبيقك كاملاً وحياً ومتاحاً لأي شخص في العالم.
الخلاصة:
لقد انتقلت الآن من مبرمج يكتب أكواداً على جهازه، إلى مطور Full Stack حقيقي ينشر تطبيقات ذكاء اصطناعي على السحابة. هذه المهارة وحدها تضعك في مستوى متقدم جداً.
ما هو أول مشروع ستقوم بنشره على Render؟ شاركنا أفكارك (أو روابطك الحية!) في التعليقات!
✍️ كتب بواسطة KamalZone
