الفصل الأول: مقدمة إلى Netlify

المنصة المتكاملة لتطوير ونشر التطبيقات

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

1.1 ما هي Netlify؟

Netlify هي منصة "كل شيء في مكان واحد" (All-in-one Platform) مبنية من الأرض لأجل مطوري الويب الحديث. إنها ليست مجرد خدمة استضافة تقليدية، بل هي بيئة عمل متكاملة تجمع بين استضافة المواقع الساكنة (Static Sites)، والوظائف الخلفية بدون خادم (Serverless Functions)، وإدارة النماذج (Forms)، والمصادقة (Authentication)، والتكامل المستمر/النشر المستمر (CI/CD)، وأكثر من ذلك بكثير، في واجهة واحدة مبسطة.

الفلسفة الأساسية لـ Netlify هي إزالة التعقيدات المرتبطة بالبنية التحتية للخوادم، والتركيز على ما يهم حقًا: كتابة الكود وبناء التطبيقات. تتيح لك النشر مباشرة من مستودع Git (مثل GitHub أو GitLab أو Bitbucket) بنقرة واحدة، مع ضمان أن كل تغيير يمر عبر سير عمل آلي للبناء والاختبار والنشر.

1.2 المكونات الأساسية لمنصة Netlify

لفهم قوة Netlify، دعنا نفكك المكونات الرئيسية التي تشكل نواتها:

1.2.1 Netlify Build & Deploy (البناء والنشر)

هذه هي المحرك الأساسي. عند ربط مستودع Git، تقوم Netlify تلقائيًا ب:

• مراقبة أي دفع (push) إلى الفرع الرئيسي (مثل `main` أو `master`).
• تشغيل عملية بناء مخصصة (بناءً على إعداداتك) لتجميع تطبيقك (مثل تشغيل `npm run build` لتطبيق React).
• نشر الناتج (الملفات المبنية) على شبكة تسليم محتوى (CDN) عالمية فائقة السرعة.

يتم تعريف عملية البناء عبر ملف تكوين مركزي يسمى netlify.toml. إليك مثال أساسي:

# ملف netlify.toml
[build]
  # الأمر الذي يتم تنفيذه لبناء مشروعك
  command = "npm run build"
  # المجلد الذي يحتوي على ملفات الإنتاج الجاهزة للنشر بعد البناء
  publish = "dist"

# إعادة التوجيه (للتطبيقات ذات المسارات الواحدة - SPA)
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
    

في هذا المثال:

• command: يحدد الأمر الذي ستنفذه Netlify في بيئتها السحابية لبناء المشروع.
• publish: يحدد المجلد الذي يحتوي على الملفات النهائية (مثل `dist`, `build`, `public`).
• [[redirects]]: قاعدة إعادة توجيه ضرورية لتطبيقات الصفحة الواحدة (SPA) مثل تلك المبنية بـ React أو Vue، لضمان توجيه جميع المسارات إلى `index.html`.

1.2.2 Netlify Functions (الوظائف بدون خادم)

هذا هو المكون الذي يضيف الديناميكية. تسمح لك Netlify Functions بكتابة دوال خلفية (Backend) باستخدام JavaScript أو Go دون الحاجة لإدارة خادم. يتم تشغيلها عند الطلب (على غرار AWS Lambda). تخيل أنك تحتاج إلى معالجة بيانات نموذج، أو الاتصال بقاعدة بيانات، أو تنفيذ مهمة سرية. بدلاً من تشغيل خادم كامل، تكتب دالة واحدة.

يتم وضع هذه الدوال افتراضيًا في المجلد netlify/functions. إليك مثال لدالة بسيطة ترحب بالمستخدم:

// netlify/functions/hello.js
exports.handler = async function(event, context) {
  // event: يحتوي على معلومات الطلب (مثل body, headers, query parameters)
  // context: يحتوي على معلومات حول سياق تنفيذ الدالة (مثل user identity)

  const name = event.queryStringParameters.name || "زائر";

  return {
    statusCode: 200, // رمز حالة HTTP للنجاح
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      message: `مرحبًا ${name}! هذه دالة Netlify تعمل بنجاح.`,
      timestamp: new Date().toISOString()
    })
  };
};
    

بعد النشر، يمكنك الوصول إلى هذه الدالة عبر الرابط: https://your-site.netlify.app/.netlify/functions/hello?name=أحمد. ستستجيب الدالة برسالة ترحيب مخصصة.

1.2.3 Netlify Forms (النماذج)

تقدم Netlify خدمة مذهلة لإدارة إرسال النماذج من موقعك الساكن دون الحاجة لكتابة أي كود خلفي. كل ما عليك فعله هو إضافة سمة data-netlify="true" أو netlify إلى وسم `