النشر على منصات الاستضافة
انشر تطبيقات Vue على المضيفات والمنصات الثابتة.
النشر على منصات الاستضافة درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 3 دروس في المجموع.
نشر تطبيقك
يُبنى تطبيق Vue ذي الصفحة الواحدة إلى ملفات ثابتة، ولذلك يمكنك استضافته على أي مضيف للملفات الثابتة. تجعل منصات مثل Netlify وVercel وGitHub Pages نشر هذه الملفات سريعًا وغالبًا مجانيًا.
ما الذي تنشره
تنشر محتويات مجلد dist الناتج عن تنفيذ npm run build. يقدّم المضيف هذه الملفات للمستخدمين في جميع أنحاء العالم عبر شبكة CDN.
npm run build
# upload the dist/ folder to your hostالنشر على Netlify
يمكن لـ Netlify البناء من مستودع Git الخاص بك. ما عليك سوى تحديد أمر البناء والمجلد المطلوب نشره.
# Netlify settings
# Build command: npm run build
# Publish directory: distالنشر على Vercel
يكتشف Vercel مشاريع Vite تلقائيًا. صِل مستودعك به، وسيشغّل عملية البناء ويقدّم المخرجات، مع إعادة النشر بعد كل عملية دفع.
# Vercel auto-detects:
# Build command: npm run build
# Output directory: distالنشر على GitHub Pages
يقدّم GitHub Pages الملفات الثابتة من مستودع. يمكنك البناء محليًا أو في CI، ثم دفع مخرجات dist إلى فرع Pages أو استخدام إجراء.
مشكلة وضع history
ينشئ Vue Router في وضع history عناوين URL نظيفة مثل /about. لكن المضيف الثابت لا يحتوي على ملف حقيقي باسم /about، لذلك تؤدي الزيارة المباشرة أو إعادة التحميل إلى ظهور الخطأ 404.
إصلاح إعادة التوجيه لتطبيق SPA
يكمن الحل في إخبار الخادم بتقديم index.html لجميع المسارات، وترك مهمة التوجيه إلى Vue Router على جانب العميل.
قاعدة إعادة التوجيه في Netlify
على Netlify، أضف ملف _redirects أو قاعدة في netlify.toml تعيد كتابة جميع المسارات إلى index.html.
# public/_redirects
/* /index.html 200قاعدة إعادة الكتابة في Vercel
على Vercel، يحقق إعداد إعادة الكتابة في vercel.json الإجراء الاحتياطي نفسه إلى index.html.
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}ضبط المسار الأساسي
إذا كان تطبيقك يُقدَّم من مسار فرعي، كما يحدث عادةً في GitHub Pages مثل /my-repo/، فاضبط الخيار base في إعدادات Vite لكي تُحل عناوين URL الخاصة بالأصول بشكل صحيح.
// vite.config.js
export default {
base: "/my-repo/"
}النشر عبر CI
أتمت عمليات النشر باستخدام التكامل المستمر. يثبّت سير العمل الاعتمادات، ويشغّل الاختبارات، وينشئ البنية، وينشرها بعد كل عملية دفع إلى فرعك الرئيسي، بحيث تتم عملية النشر تلقائيًا.
# CI steps
# 1. npm install
# 2. npm run test
# 3. npm run build
# 4. deploy dist/اختبار سريع
اختبر معرفتك بالنشر.
مراجعة
انشر مجلد dist على مضيف للملفات الثابتة مثل Netlify أو Vercel أو GitHub Pages. أضف إجراءً احتياطيًا لتطبيق SPA، أي إعادة توجيه أو إعادة كتابة إلى index.html، لكي تعمل مسارات وضع history عند إعادة التحميل، واضبط base في Vite عند الاستضافة في مسار فرعي، وأتمت العملية كلها باستخدام CI. ستراقب التطبيق وتحافظ عليه في الإنتاج بعد ذلك.
الأسئلة الشائعة
هل درس «النشر على منصات الاستضافة» مجاني؟
نعم — نص درس «النشر على منصات الاستضافة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 3 دروس في المجموع.
ماذا ستتعلم في «النشر على منصات الاستضافة»؟
انشر تطبيقات Vue على المضيفات والمنصات الثابتة. تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «النشر على منصات الاستضافة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تحسين عملية البناء
- النشر على منصات الاستضافة
- المراقبة والصيانة