عبدالله عبدالرحيم بن سنكر: النشر على Vercel من الكود إلى رابط شغّال

خلص المطوّر الموقع، واشتغل على جهازه، والحين السؤال: كيف يصير رابطاً يفتحه أي أحد في العالم؟ قبل سنوات كان هذا يعني خادماً تستأجره وتضبطه بنفسك. اليوم منصات مثل Vercel تختصر الطريق. عبدالله عبدالرحيم بن سنكر ينشر مشاريع منصة أزهل الرقمية على Vercel، ومنها موقع azhal.io نفسه المبني بـ Next.js. هذي الخطوات بالترتيب، مع الأشياء اللي تفرق بين نشر يشتغل ونشر يشتغل صح.

الخطوة الأولى: الكود في مستودع Git

الطريقة المعتادة في Vercel إنك تربطه بمستودعك على GitHub أو GitLab أو Bitbucket، بدل ما ترفع ملفات يدوياً. وهذا مو تعقيد، هذا أساس الفكرة كلها: كل تعديل يُدفع للمستودع يتحوّل تلقائياً لنسخة منشورة. فلو المشروع مو في مستودع بعد، هذي أول خطوة. وتأكد قبلها من شيئين: إن ملف .env ما انرفع، وإن المشروع يبني بنجاح على جهازك بنفس أمر البناء، لأن اللي يفشل عندك بيفشل هناك. والأفضل يكون المستودع باسم صاحب المشروع، والحساب في Vercel كذلك، عشان ما يصير الموقع كله معلّقاً بحساب شخص واحد في الفريق.

الخطوة الثانية: استيراد المشروع

من لوحة Vercel تختار إنشاء مشروع جديد، وتربط المستودع. المنصة تتعرف على الإطار تلقائياً في أغلب الحالات، وتقترح أمر البناء ومجلد المخرجات، وفي مشروع Next.js عادي ما تحتاج تغيّر شي. ولو المشروع في مجلد فرعي داخل المستودع، تحدد المجلد الجذر في الإعدادات. تضغط نشر، وتتابع سجل البناء سطراً سطراً، وبعد دقائق يطلع لك رابط على نطاق vercel.app.

وأول نشر يفشل أحياناً لأسباب ما تظهر على جهاز المطوّر. أشهرها حالة الأحرف في أسماء الملفات: ويندوز وماك يعاملون Header.tsx و header.tsx كملف واحد افتراضياً، وبيئة البناء على لينكس تفرّق بينهم، فاستيراد مكتوب بحرف كبير بدل صغير ينجح عندك ويفشل هناك. والسبب الثاني اختلاف إصدار Node بين جهازك وبيئة البناء، وتقدر تحدده في إعدادات المشروع عشان يتطابق الاثنان.

الخطوة الثالثة: متغيرات البيئة، المكان الصح للأسرار

أي مفتاح يحتاجه الموقع، مفتاح قاعدة بيانات، أو خدمة بريد، أو خدمة نماذج ذكاء اصطناعي مثل OpenRouter اللي يمر عبره شات موقع أزهل، مكانه إعدادات متغيرات البيئة، مو الكود. و Vercel يفصلها لثلاث بيئات: الإنتاج، والمعاينة، والتطوير، فتقدر تخلّي نسخ المعاينة تكلّم قاعدة بيانات تجريبية بدل الحقيقية.

• في Next.js، أي متغير يبدأ اسمه بـ NEXT_PUBLIC_ ينضمّن في كود المتصفح ويقدر يشوفه أي زائر. لا تحط فيه سراً أبداً.
• المفاتيح السرية تُقرأ في كود الخادم فقط: مسارات الـ API ومكوّنات الخادم.
• تعديل متغير ما يغيّر النسخة المنشورة حالياً، تحتاج نشراً جديداً عشان ينطبق.

الخطوة الرابعة: النطاق الخاص

رابط vercel.app للتجربة، أما عملاؤك فيشوفون نطاقك. تضيف النطاق في إعدادات المشروع، و Vercel يقول لك بالضبط وش السجلات المطلوبة في إعدادات DNS عند مزوّد النطاق: سجل A للنطاق الرئيسي، أو CNAME لنطاق فرعي مثل www، أو تنقل خوادم الأسماء بالكامل. وانتشار تغييرات DNS ممكن ياخذ من دقائق إلى ساعات. وشهادة HTTPS تنصدر وتتجدد تلقائياً، فما تحتاج تشتري شهادة أو تتذكر موعد تجديدها. وقرّر من البداية: النسخة الأساسية بـ www أو بدونها، والثانية تحوّل لها، عشان ما يشوف جوجل نسختين من نفس الموقع.

الخطوة الخامسة: النشر اليومي، وهو أهم ميزة

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

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

بصراحة: متى Vercel مو الخيار الأنسب؟

Vercel ممتاز لمواقع Next.js والواجهات الأمامية، لكنه مو مكان لكل شي. دوال الخادم فيه تشتغل عند الطلب ولها حد لمدة التشغيل، فالمهام الطويلة مثل معالجة فيديو أو عمليات تمتد لساعات تحتاج خدمة ثانية. وقاعدة البيانات نفسها غالباً تكون عند مزوّد مستقل. ومع الزيارات الكبيرة جداً، استهلاك الباقة يحتاج متابعة. هذا ما يقلل منه، بس يحدد مكانه: الموقع والواجهة على Vercel، والأشغال الثقيلة في المكان المصمم لها.

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

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