جاري التحميل...
جاري التحميل...
نشر المشروع على Vercel
النشر هو عملية جعل تطبيقك متاحًا للمستخدمين على الإنترنت. يغطي هذا الدرس النشر على Vercel وإعداد متغيرات البيئة وإعداد CI/CD.
💡 ما سنتعلمه:
النشر على Vercel، إعداد متغيرات البيئة، إعداد Supabase للإنتاج، إعداد النطاق المخصص، تحسين الأداء، CI/CD مع GitHub Actions.
قبل النشر، تأكد من أن مشروعك جاهز للإنتاج: قم بتشغيل lint و type-check والبناء بنجاح.
💡 قائمة التحقق قبل النشر:
قم بتشغيل npm run lint و npm run type-check و npm run build، تأكد من أن .gitignore يشمل الملفات الحساسة.
Vercel هو أسهل طريقة لنشر تطبيقات Next.js. ادفع إلى GitHub، اتصل بـ Vercel، اضبط متغيرات البيئة، وانشر.
💡 خطوات نشر Vercel:
1. ادفع إلى GitHub، 2. أنشئ حساب Vercel، 3. استورد المستودع، 4. اضبط متغيرات البيئة، 5. انشر.
تخزن متغيرات البيئة البيانات الحساسة مثل مفاتيح API. يجب إعدادها في لوحة تحكم Vercel، لا يتم ا_commit_ها أبدًا إلى Git.
💡 المتغيرات الرئيسية:
بادئة NEXT_PUBLIC_ للمتغيرات من جانب العميل، SUPABASE_SERVICE_ROLE_KEY للخادم فقط، مفاتيح Clerk للمصادقة.
اضبط سياسات RLS ودلو التخزين ودوال قاعدة البيانات للاستخدام في الإنتاج.
💡 قائمة التحقق للإنتاج:
فعّل RLS على جميع الجداول، أنشئ دلو التخزين مع السياسات، أضف دوال قاعدة البيانات، اختبر جميع العمليات.
اتصل نطاقًا مخصصًا بنشر Vercel مع إعداد DNS و SSL.
💡 إعداد النطاق:
اشترِ النطاق، أضفه إلى Vercel، اضبط سجلات DNS (A/CNAME)، SSL تلقائي.
حسّن بناء الإنتاج مع تحسين الصور وتحميل الخطوط والتخزين المؤقت وتقسيم الكود.
💡 نصائح التحسين:
استخدم next/image مع priority، حسّن الخطوط باستخدام next/font، استفد من التخزين المؤقت، استخدم الاستيراد الديناميكي.
أعد التكامل المستمر والنشر باستخدام GitHub Actions للاختبار والنشر التلقائي.
💡 فوائد CI/CD:
الاختبار التلقائي مع كل دفع، النشر التلقائي إلى الإنتاج، عملية بناء متسقة.
ما هو الهدف من متغيرات البيئة في الإنتاج؟
ماذا يضبط vercel.json؟
كيف يجب تخزين متغيرات البيئة الحساسة لـ GitHub Actions؟
ماذا يعني CI/CD؟
أنشئ vercel.json مع رؤوس الأمان، أعد إعداد سير عمل GitHub Actions، أنشئ نقطة نهاية لفحص الحالة، اضبط متغيرات البيئة في Vercel.
خطوات نشر Vercel:
الإعدادات الرئيسية:
vercel.json - الرؤوس، إعادة التوجيه، المهام المجدولةكيف تدير أخطاء المشروع؟
الإجابة:
اكتب اختبارات، استخدم linting، و راجع الكود باستمرار.
كيف تُحسّن أداء المشروع؟
الإجابة:
قلل الـ bundle size، استخدم lazy loading، وحسّن الصور.
استخدم Git branches
افصل كل ميزة في branch منفصل
اكتب tests
لا تنشر ميزة بدون اختبارات