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

الصورة أدناه توضح مكونات البنية:

إخلاء المسؤولية: أنا لا أحظى برعاية أي من الخدمات التي أذكرها هنا؛ أنا أسلط الضوء عليها ببساطة لأنني وجدتها مفيدة.

مستودع قاعدة بيانات المشروع

GitHub هو النظام الأساسي الأكثر شعبية لاستضافة قاعدة التعليمات البرمجية الخاصة بك مجانًا. لقد جربت أيضًا بدائل مثل Bitbucket وGitLab، وهي تعمل جيدًا أيضًا. بصراحة، أي من هذه الخيارات سوف يقوم بالمهمة، ما عليك سوى اختيار واحد والمضي قدمًا دون الإفراط في التفكير فيه.

تنسيق سير العمل في الواجهة الأمامية

في بيئة احترافية، ستعمل عادةً مباشرةً مع AWS أو أي مزود خدمة سحابية آخر، مما يمنحك التحكم الكامل في عمليات النشر والإشعارات والمراقبة. ومع ذلك، فإن هذا النهج يتطلب المزيد من الوقت والجهد. ولحسن الحظ، تعمل خدمات مثل Netlify وVercel على تبسيط هذه العملية عن طريق إزالة الكثير من الاحتكاك. إنها تسمح بعمليات نشر سريعة ولكنها تعتمد على نظامها البيئي. بمجرد أن يبدأ موقعك في تلقي عدد كبير من الزيارات (آلاف الزيارات)، فمن الجيد التحقق من حدود الطبقة المجانية لتجنب التكاليف غير المتوقعة. بالنسبة للمشاريع الشخصية، استخدمت هذه الخدمات عدة مرات دون أي مشاكل حتى الآن.

ومع ذلك، تقدم Netlify العديد من الميزات المبتكرة. في صورة البنية، يتم توفير ثلاثة من المكونات تلقائيًا بواسطة Netlify:

• تكامل واجهة المستخدم الرسومية:

تسمح لك واجهة المستخدم الرسومية الخاصة بـ Netlify بدمج مستودع قاعدة التعليمات البرمجية الخاص بك — GitHub، في حالتي. تتفهم Netlify الإعدادات الافتراضية لتطبيق Next.js وتستخدمها لنشر التعليمات البرمجية بسلاسة.

• استضافة المواقع الثابتة:

chicagomusiccompass.com هو تطبيق ويب ثابت، مما يعني عدم وجود خادم مشترك. عندما يتم تشغيل النشر، يقوم التطبيق بإنشاء أصول ثابتة (HTML وJS وCSS) يتم تخزينها في حاوية S3. تقوم Netlify بعد ذلك بالتعامل مع التكوين باستخدام CloudFront، مما يوفر لك عنوان URL جاهزًا للاستخدام.

• وظائف لامدا:

تحتاج المواقع الثابتة غالبًا إلى جلب البيانات من نطاقات أخرى. يتطلب هذا عادةً وكيلاً، يُعرف باسم "الواجهة الخلفية للواجهة الأمامية" (BFF). لا تتمتع تطبيقات العميل، افتراضيًا، بإمكانية الوصول إلى المجالات الأخرى ما لم يسمح الخادم بذلك صراحةً عبر CORS، وهي ليست ممارسة شائعة دائمًا. بالنسبة لهذا المشروع، أستخدم وكيلًا لسحب ملف JSON من نطاق مختلف.

تدير Netlify جميع عمليات النشر وتوفر عنوان URL (نطاق فرعي) يمكنك ربطه بالمجال الخاص بك للحصول على عنوان URL سهل الاستخدام.

على سبيل المثال، هذا هو عنوان URL الخاص بـ Netlify لمشروعي:

https://clinquant-chebakia-f64a5b.netlify.app/

قمت بعد ذلك بتكوين المجال الخاص بي باستخدام سجل CNAME لتوجيه www إلى عنوان URL الخاص بـ Netlify:

عندما يزور المستخدم https://www.chicagomusiccompass.com/، يقوم DNS بتحليل المجال إلى وجهته النهائية - عنوان URL الخاص بـ Netlify؟.

على الرغم من أن هناك الكثير مما يحدث هنا، إلا أنه يتم تكوين معظمه من خلال لوحات المعلومات (GUI). المفتاح هو فهم كيفية ترابط كل شيء؛ الباقي هو مجرد التنقل في واجهة المستخدم.

المهام المجدولة الآلية (وظائف كرون)

cron-job.org هي خدمة تتيح لك تشغيل وظائف cron مجانًا. إليك كيفية العمل في هذا الإعداد:

أ) خطاف نشر Netlify:
توفر Netlify خطاف ويب قابل للتكوين (نقطة نهاية URL) والذي، عند تشغيله، يعيد نشر الموقع. وهذا يضمن إمكانية تحديث موقع Chicagomusiccompass.com تلقائيًا عند الحاجة.

ب) تكامل cron-job.org:
باستخدام cron-job.org، يمكنك جدولة مهمة cron — في هذه الحالة، يتم ضبطها للتشغيل يوميًا. تؤدي المهمة ببساطة إلى تشغيل ربط نشر Netlify، مما يدفع Netlify إلى إعادة نشر (تحديث) الموقع كل يوم.

ملاحظة: على الرغم من أن موقع Chicagomusiccompass.com يحتوي أيضًا على مكونات خلفية، إلا أن هذا المنشور يركز فقط على بنية الواجهة الأمامية.

ملخص

chicagomusiccompass.com هو تطبيق Next.js الذي، عند إنشائه، يقوم بإنشاء موقع ثابت (بدون خادم) بالإضافة إلى وظيفتين من وظائف Lambda. تم دمج مستودع GitHub مع Netlify، لذا فإن كل دفعة إلى المستودع تؤدي إلى عملية نشر جديدة. تعمل هذه العملية على إنشاء إصدار جديد من الموقع الثابت وتحديث وظائف Lambda. تتولى Netlify نشر هذه الملفات وتوفر تلقائيًا البنية التحتية الضرورية للشبكة، مما يسمح بالوصول إلى تطبيق الويب عبر نطاق فرعي. بالإضافة إلى ذلك، قمت بتكوين المجال المخصص، Chicagomusiccompass.com، للإشارة إلى Netlify. يتم تحديث الموقع من خلال مهمة cron اليومية التي تؤدي إلى ربط نشر Netlify.

الموقع يعمل منذ بضعة أشهر ولا يتلقى حاليًا الكثير من الزيارات، ولكن فيما يتعلق بتكاليف البنية التحتية، فأنا لا أدفع سنتًا واحدًا.

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

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