نشر التطبيقات على Heroku: دليل شامل لنقل مشروعك للإنتاج بكفاءة

عندما يتعلق الأمر بنشر التطبيقات (Deployment)، عادةً ما يواجه المطورون خيارين رئيسيين: إما استخدام خادم افتراضي خاص (VPS) أو منصة كخدمة (PaaS - Platform as a Service). يقدم هذا المقال دليلاً عملياً ومفصلاً لنشر تطبيق ويب على بيئة إنتاج باستخدام منصة PaaS قوية ومرنة مثل Heroku، مما يسهل عليك عملية الانتقال من بيئة التطوير إلى العالم الحقيقي.

الخطوة الأولى: إعداد هيكل المشروع الأساسي

تتمثل الخطوة الأولى في بناء هيكل بسيط لمشروعنا يتضمن بعض الملفات الأساسية. سنقوم في هذا الدليل بإنشاء خادم تجريبي باستخدام بيئة التشغيل Node.js. ابدأ بإنشاء مجلد جديد للمشروع، ثم افتح الطرفية (Terminal) داخل هذا المجلد وقم بتشغيل الأمر التالي لتهيئة مشروع Node.js جديد:

npm init -y

سنقوم بكتابة الخادم الوهمي باستخدام إطار عمل Express الشهير، لذا نحتاج إلى تثبيت هذه الوحدة (module) بتشغيل الأمر التالي:

npm install express

بعد اكتمال تثبيت مكتبة Express، يمكننا إنشاء ملف جديد لمشروعنا باسم app.js. داخل هذا الملف، سنكتب الكود الخاص بخادمنا البسيط:

const app = require("express")();

const PORT = process.env.PORT || 3000;

app.get("/", (req, res) => {
  res.send("Hello world")
});

app.listen(PORT, () => {
  console.log(`App up at port ${PORT}`)
});

يمكننا الآن تشغيل التطبيق محلياً عن طريق تنفيذ الأمر node app.js في الطرفية. بعد ذلك، يمكنك زيارة الرابط http://localhost:3000 في متصفحك. في هذه المرحلة، يجب أن تشاهد الرسالة Hello World معروضة في المتصفح، مما يؤكد أن الخادم يعمل بشكل صحيح.

الخطوة الثانية: إعداد نظام التحكم بالإصدارات (VCS)

تتمثل الخطوة التالية في اختيار نظام للتحكم بالإصدارات ووضع الكود الخاص بنا في مستودع (repository) على منصة تطوير. يُعد نظام Git الأكثر شيوعاً، وبالاقتران مع منصة GitHub كبيئة تطوير، فإنه يوفر حلاً متكاملاً لإدارة الكود. سنستخدمهما في هذا الدليل. توجه إلى GitHub وقم بإنشاء مستودع جديد لتطبيقك، كما هو موضح في الصورة:

رفع الكود المحلي إلى المستودع

لرفع الكود المحلي الخاص بك إلى المستودع، تحتاج إلى تشغيل الأوامر التي تظهر لك على GitHub بعد النقر على زر Create repository:

ملاحظة هامة: قبل تنفيذ هذه الأوامر، يجب علينا تجاهل بعض الملفات. نريد فقط رفع الكود الذي كتبناه إلى المستودع، دون تضمين التبعيات (dependencies) أو الوحدات المثبتة (installed modules). لتحقيق ذلك، نحتاج إلى إنشاء ملف جديد باسم .gitignore وكتابة اسم الملف أو المجلد الذي نرغب في تجاهله بداخله. في حالتنا، سيكون المجلد node_modules:

الآن، يمكننا تنفيذ الأوامر المذكورة في الصورة أعلاه (تلك التي من GitHub). إذا قمت بتشغيل الأوامر بشكل صحيح، فسيظهر الكود الخاص بك على صفحة المستودع. عند تحديث الصفحة، يجب أن تشاهد ملفات مشروعك، باستثناء المجلد الذي تجاهلته صراحةً، وهو node_modules.

الخطوة الثالثة: ربط المستودع بتطبيق Heroku

في هذه الخطوة، سنقوم بربط المستودع الخاص بنا من GitHub بتطبيقنا على Heroku. أولاً، قم بإنشاء تطبيق جديد على Heroku واتبع الخطوات الموضحة على المنصة.

بمجرد إنشاء التطبيق بنجاح، ستظهر لك نافذة مشابهة لهذه:

ربط Heroku بـ GitHub

الآن، إذا نظرت إلى شريط التنقل العلوي، ستجد خيارات مثل Overview و Resources و Deploy و Metrics وغيرها. تأكد من تحديد تبويب Deploy. ثم في الصف الثاني، انقر على أيقونة GitHub.

ابحث عن التطبيق المطلوب، والذي هو demo-deploy-app-09 في حالتنا، ثم انقر على زر Connect.

نشر التطبيق

بمجرد ربط التطبيق بنجاح بحسابك على Heroku، يمكنك النقر على Deploy Branch لنشر تطبيقك. إذا أردت، يمكنك أيضاً تحديد خيار Enable Automatic Deploys، والذي سيقوم بسحب الكود تلقائياً من مستودع GitHub الخاص بك في كل مرة تقوم فيها بعملية دفع (push) إلى هذا المستودع. بعد نشر التطبيق، يمكنك النقر على View لفتح تطبيقك ومشاهدته.

الخطوة الرابعة: تهيئة Heroku لتشغيل التطبيق بشكل صحيح

إذا قمت بفتح التطبيق في هذه المرحلة، فمن المحتمل أن تشاهد شيئاً كهذا:

نعم، إنه خطأ! هذا يحدث لأن Heroku لا يعرف كيفية بدء تشغيل تطبيقنا. إذا تذكرت، قمنا بتشغيل الأمر node app.js لبدء تشغيل التطبيق محلياً. لا تملك Heroku طريقة لمعرفة الأوامر التي تحتاج إلى تشغيلها لبدء التطبيق، ولهذا السبب أظهرت خطأً.

حل مشكلة بدء التشغيل باستخدام Procfile

لحل هذه المشكلة، يجب علينا إنشاء ملف جديد باسم Procfile يتضمن المحتوى التالي:

web: node ./app.js

يقوم هذا الملف بإخبار Heroku بكيفية بدء تشغيل عملية الويب (web process) لتطبيقك. لتحديث تطبيقنا، كل ما نحتاجه هو دفع (push) التزام (commit) جديد إلى GitHub. إذا كنا قد فعلنا خيار Automatic Deploys، فسيتم سحب الكود تلقائياً إلى Heroku. وإلا، سنحتاج إلى النقر على Deploy Branch مرة أخرى يدوياً. بمجرد إعادة بناء التطبيق، يجب أن نراه يعمل بشكل صحيح كما يلي:

الخطوة الخامسة: إضافة الملحقات (Add-ons)

إحدى المزايا الرئيسية التي توفرها Heroku هي القدرة على إضافة موارد خارجية بسهولة إلى مشروعك في شكل “ملحقات” (add-ons). تأتي هذه الموارد في أشكال متنوعة مثل قواعد البيانات، وأدوات التسجيل والمراقبة، وأدوات التكامل المستمر والتسليم المستمر (CI/CD)، أو أدوات الاختبار. لنرى الآن كيفية إضافة مورد جديد إلى مشروعك. أولاً، سنتوجه إلى تبويب Resources، ومن هناك سنضيف أداة جديدة للاختبار.

البحث عن الملحقات وتثبيتها

انقر على Find more add-ons ثم ابحث عن Loadmill. تُعد Loadmill أداة اختبار ممتازة لاختبار الانحدار (regression testing) واختبار التحميل (load testing).

انقر على Install… ثم اختر التطبيق الذي ترغب في ربطه بالملحق.

في هذه الخطوة، ستقوم Heroku تلقائياً بإنشاء حساب جديد لك على المنصة المخصصة للملحق. في تبويب Resources، يمكنك رؤية المورد المضاف حديثاً:

إذا قمت بالوصول إلى هذا الملحق، يجب أن تشاهد لوحة التحكم الخاصة به مع دليل تمهيدي واختبار تجريبي تم إنشاؤه لك.

الخلاصة التقنية

تُعد Heroku منصة سحابية قوية ومثالية للمطورين الذين يسعون لنشر تطبيقاتهم بسرعة وكفاءة على خوادم الويب. إنها تبسط عملية النشر بشكل كبير، مما يقلل من التعقيد المرتبط بإدارة البنية التحتية. بالإضافة إلى ذلك، توفر Heroku مجموعة واسعة من الملحقات (add-ons) التي يمكن دمجها بسلاسة لتعزيز وظائف التطبيق، سواء كانت قواعد بيانات، أدوات مراقبة، أو حلول اختبار. في جوهرها، تتيح حلول PaaS مثل Heroku للمطورين التركيز على كتابة الكود بدلاً من قضاء الوقت في تهيئة الخوادم، مما يسرع من دورة التطوير مقارنةً بحلول VPS التي تتطلب إعداد كل شيء من الصفر.