نشر تطبيق React خطوة بخطوة على Vercel و Netlify و GitHub Pages
بعد بناء التطبيق، تأتي الخطوة التي ينتظرها الجميع: نشره للعالم. في هذا الدرس سننشر تطبيق React على ثلاث منصات مشهورة: Vercel، Netlify، و GitHub Pages.
قبل النشر: إنشاء نسخة الإنتاج
npm run build
هذا الأمر ينشئ مجلد dist (في Vite) أو build (في CRA).
النشر على Vercel
- ارفع مشروعك على GitHub.
- اذهب إلى Vercel واختر "New Project".
- اربط المستودع وسيتم النشر تلقائيًا.
ميزة: مناسب جدًا لمشاريع Next.js و يدعم نشر تلقائي مع كل تحديث.
النشر على Netlify
- ارفع مشروعك على GitHub.
- في Netlify اضغط "Add new site".
- حدد أمر البناء:
npm run build. - حدد مجلد النشر:
dist(Vite) أوbuild(CRA).
تنبيه: تأكد من تحديد المجلد الصحيح وإلا لن تظهر الصفحة.
النشر على GitHub Pages
npm install gh-pages --save-dev
// package.json
"homepage": "https://USERNAME.github.io/REPO"
// package.json (scripts)
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
npm run deploy
بعد ذلك اذهب إلى إعدادات المستودع في GitHub واختر Pages لتأكيد الرابط.
متى أختار أي منصة؟
- Vercel: أفضل خيار لـ Next.js والتطبيقات الديناميكية.
- Netlify: ممتاز للنشر السريع ومواقع static.
- GitHub Pages: مناسب للمشاريع الصغيرة والعروض التجريبية.
أفضل الممارسات
- تأكد من أن المشروع يعمل محليًا قبل النشر.
- استخدم اسم دومين واضح للمشروع (حتى لو مجاني).
- فعّل النشر التلقائي عند كل تحديث.
نصيحة: إذا واجهت مشكلة في المسارات، تحقق من إعداد base في Vite.
الأسئلة الشائعة — FAQ
ما أفضل طريقة لنشر تطبيق React؟
Vercel و Netlify أسهل الخيارات للمبتدئين.
هل أحتاج دومين مدفوع؟
لا، المنصات توفر دومين مجاني.
ما هو أمر build في React؟
الأمر هو npm run build لإنشاء نسخة جاهزة للنشر.
هل يمكن نشر مشروع Vite على GitHub Pages؟
نعم، لكن يجب ضبط base في Vite.
ما الفرق بين Vercel و Netlify؟
كلاهما ممتاز، Vercel مميز لـ Next.js و Netlify للنشر السريع.
التالي: هذا كان آخر درس في المسار، يمكنك العودة للمقدمة أو مشاريع أخرى.