Vercel: استيراد في دقيقة
الدرس 13 من 26 في دورة «البرمجة بالإحساس». مجاني، مع رسوم متحركة واختبار.
Vercel وNext.js
Vercel خدمة استضافة يحبها مطورو الواجهات الأمامية بشكل خاص. الشركة نفسها تطوّر Next.js، وهو إطار عمل شائع، أي هيكل جاهز لمواقع JavaScript. كثير من أدوات البناء بالذكاء الاصطناعي والوكلاء ينشئون المشروع افتراضيًا بـ Next.js. مثال: بنيتَ في أداة بناء معرض أعمالك للتقديم إلى كلية التصميم ونقلت الكود إلى GitHub. مشروع كهذا تفهمه Vercel فورًا.
الاستيراد من GitHub في ثلاث خطوات
المسار في المخطط من اليسار إلى اليمين. الاستيراد: تدخل بحساب GitHub وتختار مستودع معرض الأعمال. الإعدادات مكتشفة: تحدد Vercel بنفسها إطار العمل وأمر البناء ومجلد الملفات الجاهزة، وعادةً لا تحتاج لتغيير شيء. Deploy: تبدأ فيجري البناء. في النهاية تحصل على رابط للموقع يمكنك إرساله لأصدقائك. أما اسم موقعك الخاص فتربطه لاحقًا في درس النطاقات.
معاينة لكل Pull Request
الباقي كما في درس النشر: push إلى main يحدّث الموقع الحي. وكل Pull Request يحصل على رابط معاينة خاص، وهو الشريحة في المخطط. مثال: أعاد وكيلٌ في فرعٍ تصميم صفحة الأعمال. تفتح المعاينة على هاتفك وتفحصها. في Vercel يمكنك ترك تعليق فوق صفحة المعاينة مباشرة: «هذه الصورة مقصوصة». هل تم الإصلاح؟ تعمل merge.
متغيرات البيئة
متغيرات البيئة (env vars) إعدادات ومفاتيح تمررها الاستضافة إلى الكود عند تشغيله، بدل حفظها في المستودع. في Vercel تُضبط بشكل منفصل لثلاث بيئات، وهي اللوحة في المخطط. Production: الموقع الحي. Preview: روابط المعاينة. Development: التشغيل على حاسوبك. مثال: في Preview مفتاح دفع تجريبي، وفي Production المفتاح الحقيقي. غيّرت متغيرًا؟ اعمل نشرًا جديدًا.
التراجع بنقرة واحدة
كل عملية نشر تبقى في قائمة، وهي الصف أسفل المخطط. مثال: عملتَ merge فاختفت كل أعمالك من الموقع الحي. لا تطلب من الذكاء الاصطناعي إصلاحًا متسرعًا مباشرة في main. اضغط Rollback عند آخر نشر كان يعمل، فيعود هو الموقع الحي فورًا تقريبًا، دون بناء جديد. ثم ابحث عن الخطأ بهدوء في فرع. باختصار: التراجع أولًا، ثم الإصلاح.
Vercel أم Cloudflare؟
للموقع الأول يصلح الاثنان: تربط GitHub فتحصل على البناء والمعاينات والموقع الحي، كما في المخطط. Vercel هي الخيار الافتراضي لمشاريع Next.js التي تنشئها أدوات البناء كثيرًا. Cloudflare أقوى في DNS والحماية وWorkers. لست متأكدًا؟ اختر التي بُني فيها مشروعك دون مشاكل. توجد عادةً خطة مجانية، وراجع الحدود على موقعها. تحقق من توفر الخدمة في بلدك. تدرّب في محاكي Vercel.
اختبر نفسك
- ماذا تفعل Vercel مباشرة بعد استيراد المستودع؟
الإجابة الصحيحة: تكتشف بنفسها إطار العمل وإعدادات البناء. تتعرّف Vercel على إطار العمل وأمر البناء ومجلد الإخراج. أما النطاق فيُربط منفصلًا متى أردت. - نسخة جديدة عطّلت الموقع الحي. ماذا تفعل أولًا؟
الإجابة الصحيحة: التراجع إلى آخر نشر كان يعمل. الـ Rollback يعيد النسخة العاملة فورًا تقريبًا دون بناء جديد. أصلِح لاحقًا بهدوء في فرع. - لماذا تضبط متغيرات بيئة مختلفة لـ Production وPreview؟
الإجابة الصحيحة: كي لا تمس المعاينات المفاتيح الحقيقية. يمكن وضع مفاتيح تجريبية في Preview والحقيقية في Production فقط. هكذا لا يمس الاختبار في الفرع أموالًا أو بيانات حقيقية.