المشروع الذي لا يعمل إلا على localhost:5173 غير مرئي لأي أحد آخر، بمن فيهم من يقرّرون توظيفك. الـ deploy (النشر) يحوّل Watchlist إلى رابط تضعه في سيرتك الذاتية، وترسله إلى صديق، وتفتحه على هاتفك. لتطبيق Vite على Vercel يستغرق ذلك بضع دقائق، وبعد إعداده، كل git push ينشر تلقائيًا.
يحوّل npm run build مشروعك إلى مجلد من الملفات الثابتة: dist/index.html، وحزمة JavaScript أو اثنتين، وملف CSS، بأسماء ملفات فيها hash مثل index-B3f9xk2a.js لتستطيع المتصفّحات تخزينها مؤقّتًا إلى الأبد. لا يوجد كود خادم. أي استضافة ثابتة تستطيع تقديمه؛ وVercel شائع لأنه يكتشف إطار العمل، ويبني مع كل push، ويعطيك روابط معاينة مجانًا في خطة Hobby.
قبل النشر، افحص نسخة الإنتاج محليًا:
\nnpm run build\nnpm run previewيقدّم preview المجلد dist/ على http://localhost:4173. إذا انكسر شيء في الإنتاج فقط، مثل مسار ملف خاطئ أو متغيّر بيئة مفقود، فستكتشفه هنا بدل الموقع الحيّ.
git remote add origin … وgit push -u origin main.watchlist. يكتشف Vercel Vite ويملأ أمر البناء (vite build، وهو ما يشغّله npm run build) ومجلد المخرجات (dist). اتركهما كما هما.watchlist-yourname.vercel.app.من الآن فصاعدًا، المستودع هو من يقود النشر:
\nmain يُبنى ويُنشر إلى الإنتاج.نُسخ المعاينة تغيّر طريقة عملك. تعيد تنسيق شريط الفلترة على branch، وتفتح pull request، وتنقر رابط المعاينة على هاتفك قبل الـ merge. ولا يرى الإنتاج أي عمل غير مكتمل.
\nإن كنت تفضّل النشر من الطرفية، أو لم يكن الكود على GitHub بعد:
\nnpm install -g vercel\nvercel # first run: log in, link the project, deploy a preview\nvercel --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 يقدّم هيكل التطبيق لأي مسار:
{\n \"rewrites\": [{ \"source\": \"/(.*)\", \"destination\": \"/index.html\" }]\n}الملفات الحقيقية في dist/، مثل ملفات JavaScript وCSS، ما زالت تُقدَّم بشكل طبيعي؛ والـ rewrite لا يُطبَّق إلا حين لا يطابق أي ملف.
صار Watchlist حيًّا على الإنترنت. في الدرس الأخير تنظر إلى ما تعلّمته، وتخطّط لما تتعلّمه بعد ذلك.
\n","toc":[{"id":"sec-1","text":"ما الذي تنشره","level":2},{"id":"sec-2","text":"الخيار 1: الاستيراد من GitHub (الموصى به)","level":2},{"id":"sec-3","text":"الخيار 2: Vercel CLI","level":2},{"id":"sec-4","text":"متغيّرات البيئة","level":2},{"id":"sec-5","text":"التوجيه على استضافة ثابتة","level":2}],"takeaways":["يُبنى تطبيق Vite إلى ملفات ثابتة في dist/، ويكتشفها Vercel تلقائيًا عبر الإعداد المسبق لـ Vite (vite build، والمخرجات في dist).","استيراد مستودع GitHub يعطيك deployment للإنتاج مع كل push إلى main، ورابط معاينة لكل branch آخر ولكل pull request.","تنشر Vercel CLI من الطرفية؛ فالأمر vercel ينشئ معاينة، وvercel --prod ينشر إلى الإنتاج.","وحدها المتغيّرات التي تبدأ بـ VITE_ تصل إلى كود المتصفّح، وهي علنية، فلا تضع فيها أسرارًا أبدًا.","تطبيق الصفحة الواحدة الذي فيه مسارات في جهة المتصفّح يحتاج إلى rewrite نحو index.html؛ أمّا Watchlist، بصفحته الواحدة، فلا يحتاجه."],"further":[{"title":"Vite on Vercel","url":"https://vercel.com/docs/frameworks/frontend/vite"},{"title":"Vercel CLI overview","url":"https://vercel.com/docs/cli"},{"title":"Deploying a Static Site (Vite)","url":"https://vite.dev/guide/static-deploy"},{"title":"Env Variables and Modes (Vite)","url":"https://vite.dev/guide/env-and-mode"}],"quiz":[{"q":"استوردت مستودع Watchlist إلى Vercel. ماذا يشغّل Vercel، وماذا يقدّم للزوّار؟
","options":[{"text":"يشغّلnpm run dev ويُبقي خادم التطوير يعمل للزوّار.","why":"خادم التطوير للتطوير المحلي فقط. أمّا الإنتاج فيقدّم ملفات ثابتة محسّنة."},{"text":"يثبّت الاعتماديات، ويشغّل البناء (vite build)، ويقدّم الملفات الثابتة في dist/.","why":"صحيح. يعرف الإعداد المسبق لـ Vite أمر البناء ومجلد المخرجات، فتعمل القيم الافتراضية كما هي."},{"text":"يرفع مجلد src/ ويترجم المتصفّح الـ JSX.","why":"المتصفّحات لا تستطيع تشغيل JSX. خطوة البناء تترجم كل شيء وتجمّعه قبل تقديم أي شيء."},{"text":"يقدّم index.html من جذر المشروع بلا خطوة بناء.","why":"ملف index.html في الجذر يشير إلى /src/main.jsx، وهذا لا يعمل إلا عبر Vite. ما يُقدَّم هو dist/index.html المبني."}],"answer":1},{"q":"فتحت pull request يعيد تنسيق شريط الفلترة. مع إعداد التكامل مع GitHub، ماذا يحدث؟
","options":[{"text":"لا شيء حتى تعمل merge، لأن Vercel لا يبني إلا main.","why":"يبني Vercel كل branch يُرفع. وحده رابط الإنتاج ينتظر main."},{"text":"يتحدّث موقع الإنتاج فورًا بالتغييرات غير المدموجة.","why":"لا يُحدَّث الإنتاج إلا من branch الإنتاج (main)، فلا يصل العمل غير المكتمل إلى المستخدمين الحقيقيين."},{"text":"يطلب منك Vercel تشغيلvercel --prod محليًا.","why":"التكامل مع Git ينشر تلقائيًا؛ والـ CLI بديل، لا خطوة إلزامية."},{"text":"يبني Vercel الـ branch وينشر رابط معاينة فريدًا على الـ pull request، ويترك الإنتاج كما هو.","why":"صحيح. نُسخ المعاينة تتيح لك وللمراجعين تجربة التغيير قبل الـ merge."}],"answer":3},{"q":"يقرأ تطبيقك import.meta.env.VITE_TMDB_KEY لاستدعاء API للأفلام. أيّ عبارة صحيحة؟
import.meta.env.VITE_… بالقيمة الحرفية أثناء البناء. لا يوجد جلب وقت التشغيل."},{"text":"البادئة اختيارية؛ أي متغيّر بيئة متاح بالشكل import.meta.env.NAME.","why":"لا يكشف Vite لكود المتصفّح إلا المتغيّرات ذات البادئة VITE_، تحديدًا لمنع التسريب غير المقصود."}],"answer":0},{"q":"أضفت React Router ليصبح /watched صفحة مستقلة. التنقّل بالنقر يعمل، لكن تحديث الصفحة على /watched في الإنتاج يعرض 404. ما الإصلاح؟
public/watched/.","why":"الصفحة تُرسم بـ JavaScript من index.html؛ والمجلد الثابت سيحتاج إلى نسخته الخاصة من التطبيق كله."},{"text":"غيّر البناء على Vercel إلى npm run dev.","why":"خادم التطوير ليس خادم إنتاج. الإصلاح قاعدة توجيه للملفات الثابتة."},{"text":"أضف rewrite في vercel.json يرسل كل مسار إلى /index.html، فيُحمَّل التطبيق ويتولّى الـ router الرابط.","why":"صحيح. لا يوجد ملف اسمه watched على الخادم؛ والـ rewrite يقدّم هيكل التطبيق لأي مسار ويترك التوجيه في جهة المتصفّح يتولّى الأمر."}],"answer":2}],"exercise":{"kind":"order","items":["build-preview","commit","push","import","deploy","branch-preview","merge"],"title":"انشر Watchlist","prompt":"رتّب هذه الخطوات: من تطبيق يعمل على حاسوبك إلى موقع إنتاج حيّ، ثم نشر تغيير إضافي بأمان عبر نسخة معاينة.
\n","hints":["افحص نسخة الإنتاج على جهازك قبل أن يغادره أي شيء.","يستورد Vercel مستودعًا، لذا يجب أن يكون الكود على GitHub أولًا.","التغيير على branch يحصل على رابط معاينة؛ والإنتاج لا يتغيّر إلا حين يتغيّر main."],"explanation":"تتحقّق من البناء الحقيقي محليًا باستخدام npm run build وnpm run preview، ثم تعمل commit، وترفع إلى GitHub ليجد Vercel مستودعًا يستورده. الاستيراد يكتشف Vite (vite build، والمخرجات في dist)، وأول نشر يعطيك رابط الإنتاج. بعد ذلك تذهب التغييرات إلى branch: يحصل الـ pull request على رابط معاينة خاص به لتفحصه، والـ merge إلى main يُطلق نشر الإنتاج.
npm run build وnpm run preview وجرّب التطبيق محليًا","commit":"اعمل commit للتطبيق العامل باستخدام Git","push":"أنشئ مستودعًا على GitHub ونفّذ git push -u origin main","import":"في Vercel، اختر Add New → Project واستورد المستودع (الإعداد المسبق: Vite، والمخرجات: dist)","deploy":"انقر Deploy وافتح رابط الإنتاج على هاتفك","branch-preview":"أعد تنسيق شريط الفلترة على branch، وافتح pull request وافحص رابط المعاينة الخاص به","merge":"ادمج الـ pull request في main ليتحدّث الإنتاج"}},"words":604,"readMinutes":4}