النشر على Vercel

المشروع الذي لا يعمل إلا على localhost:5173 غير مرئي لأي أحد آخر، بمن فيهم من يقرّرون توظيفك. الـ deploy (النشر) يحوّل Watchlist إلى رابط تضعه في سيرتك الذاتية، وترسله إلى صديق، وتفتحه على هاتفك. لتطبيق Vite على Vercel يستغرق ذلك بضع دقائق، وبعد إعداده، كل git push ينشر تلقائيًا.

ما الذي تنشره

يحوّل npm run build مشروعك إلى مجلد من الملفات الثابتة: dist/index.html، وحزمة JavaScript أو اثنتين، وملف CSS، بأسماء ملفات فيها hash مثل index-B3f9xk2a.js لتستطيع المتصفّحات تخزينها مؤقّتًا إلى الأبد. لا يوجد كود خادم. أي استضافة ثابتة تستطيع تقديمه؛ وVercel شائع لأنه يكتشف إطار العمل، ويبني مع كل push، ويعطيك روابط معاينة مجانًا في خطة Hobby.

قبل النشر، افحص نسخة الإنتاج محليًا:

npm run build
npm run preview

يقدّم preview المجلد dist/ على http://localhost:4173. إذا انكسر شيء في الإنتاج فقط، مثل مسار ملف خاطئ أو متغيّر بيئة مفقود، فستكتشفه هنا بدل الموقع الحيّ.

الخيار 1: الاستيراد من GitHub (الموصى به)

1. ارفع مشروعك إلى مستودع على GitHub. إذا عملت commit في درس بناء Watchlist، فأنشئ مستودعًا فارغًا على GitHub واتبع تعليماته لتنفيذ git remote add origin … وgit push -u origin main.
2. سجّل الدخول إلى Vercel بحساب GitHub واختر Add New… → Project.
3. استورد المستودع watchlist. يكتشف Vercel Vite ويملأ أمر البناء (vite build، وهو ما يشغّله npm run build) ومجلد المخرجات (dist). اتركهما كما هما.
4. انقر Deploy. في غضون دقيقة تحصل على رابط إنتاج مثل watchlist-yourname.vercel.app.

من الآن فصاعدًا، المستودع هو من يقود النشر:

• كل push إلى main يُبنى ويُنشر إلى الإنتاج.
• كل push إلى branch آخر، وكل pull request، يحصل على preview deployment (نسخة معاينة) خاصة به برابط فريد، يُنشر كتعليق على الـ pull request.

نُسخ المعاينة تغيّر طريقة عملك. تعيد تنسيق شريط الفلترة على branch، وتفتح pull request، وتنقر رابط المعاينة على هاتفك قبل الـ merge. ولا يرى الإنتاج أي عمل غير مكتمل.

الخيار 2: Vercel CLI

إن كنت تفضّل النشر من الطرفية، أو لم يكن الكود على GitHub بعد:

npm install -g vercel
vercel          # first run: log in, link the project, deploy a preview
vercel --prod   # deploy to production

أول تشغيل لـ vercel يطرح بضعة أسئلة (النطاق، واسم المشروع، والمجلد) ويكتشف Vite بالطريقة نفسها. وينشئ مجلد .vercel يربط مجلدك بالمشروع؛ أبقِه خارج Git. الـ CLI مفيد للتجارب السريعة. أمّا للمشروع الذي ستواصل العمل عليه، فالتكامل مع Git أفضل، لأن النشر يحدث من دون أن يحتاج أحد إلى تذكّر تشغيل أمر.

متغيّرات البيئة

عاجلًا أم آجلًا ستحتاج إلى إعدادات، مثل الرابط الأساسي لـ API. لا يكشف Vite متغيّرات البيئة لكودك إلا إذا بدأت بـ VITE_:

const apiUrl = import.meta.env.VITE_API_URL;

محليًا، ضعها في ملف .env.local (مستثنى من Git أصلًا في قالب Vite). وعلى Vercel، أضفها من Project Settings → Environment Variables، ثم أعد النشر، لأن Vite يضمّن القيم حين يبني.

التوجيه على استضافة ثابتة

لـ Watchlist صفحة واحدة، فكل طلب هو لـ / ويقدّم Vercel الملف index.html. لكن إن أضفت لاحقًا توجيهًا في جهة المتصفّح باستخدام React Router، فإن رابطًا مثل /watched لا يوجد إلا داخل JavaScript الخاص بك. وتحديث الصفحة عليه يطلب من الخادم ملفًا اسمه /watched غير موجود، فتحصل على 404. والإصلاح rewrite يقدّم هيكل التطبيق لأي مسار:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

الملفات الحقيقية في dist/، مثل ملفات JavaScript وCSS، ما زالت تُقدَّم بشكل طبيعي؛ والـ rewrite لا يُطبَّق إلا حين لا يطابق أي ملف.

صار Watchlist حيًّا على الإنترنت. في الدرس الأخير تنظر إلى ما تعلّمته، وتخطّط لما تتعلّمه بعد ذلك.