0Pricing
React Academy · درس

النشر إلى Vercel: دون إعداد وعناوين URL للمعاينة

اربط مستودع GitHub بـ Vercel واضبط متغيرات البيئة واستخدم عمليات نشر المعاينة.

النشر إلى Vercel: دون إعداد وعناوين URL للمعاينة درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

لماذا Vercel؟

Vercel هي المنصة التي أنشأها فريق Next.js. توفر نشرًا دون إعدادات: صِل مستودع GitHub، وستكتشف Vercel إطار العمل تلقائيًا، ثم تبني التطبيق وتنشره مع كل عملية دفع.

ربط مستودع

استورد مستودعًا من GitHub أو GitLab أو Bitbucket عبر لوحة تحكم Vercel. تكتشف Vercel إطار العمل (Next.js أو Vite أو CRA) وتضبط إعدادات البناء تلقائيًا.

إعدادات المشروع

تكتشف Vercel تلقائيًا: إطار العمل، وأمر البناء (npm run build)، ومجلد المخرجات (.next أو dist)، وأمر التثبيت (npm install). يمكنك تجاوز هذه الإعدادات من إعدادات المشروع عند الحاجة.

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

أضف متغيرات البيئة في لوحة تحكم Vercel ضمن إعدادات المشروع ← متغيرات البيئة. عيّن قيمًا مختلفة لبيئات الإنتاج والمعاينة والتطوير.

# In Vercel dashboard:
# NEXT_PUBLIC_API_URL = https://api.example.com  (Production)
# NEXT_PUBLIC_API_URL = https://api-staging.example.com  (Preview)

# In code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

عمليات نشر المعاينة

تحصل كل عملية دفع لفرع git وكل طلب سحب على عنوان URL فريد للمعاينة (مثل myapp-git-feature-xyz.vercel.app). شاركه للمراجعة قبل الدمج — من دون الحاجة إلى بيئة تجهيز يدوية.

النطاقات المخصصة

أضف نطاقًا مخصصًا من لوحة تحكم Vercel. وجّه DNS الخاص بك (سجل A أو CNAME) إلى عناوين IP الخاصة بـ Vercel، وستتولى Vercel تلقائيًا إصدار شهادة SSL.

إعداد vercel.json

اضبط سلوك النشر بدقة: عمليات إعادة التوجيه، والرؤوس، وإعادة الكتابة، واختيار المنطقة.

// vercel.json
{
  "redirects": [
    { "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ],
  "regions": ["iad1"] // deploy edge functions to US East
}

Vercel CLI

استخدم Vercel CLI للنشر من الطرفية، وسحب متغيرات البيئة محليًا، وإدارة المشاريع.

# Install:
npm install -g vercel

# Link project and deploy:
vercel

# Pull env variables for local dev:
vercel env pull .env.local

# Deploy to production:
vercel --prod

الدوال عديمة الخادم

تُنشر الملفات الموجودة في api/ (Pages Router) أو app/api/*/route.ts (App Router) تلقائيًا كدوال عديمة الخادم على بيئة Vercel الطرفية أو بيئة Node.js.

خطافات النشر

أنشئ خطافات نشر (عناوين URL لـ webhook) لتشغيل عمليات النشر من خدمات خارجية — وهي مفيدة لتغييرات محتوى CMS التي ينبغي أن تؤدي إلى إعادة نشر الموقع.

# Trigger a deploy from a CMS webhook:
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy

# In Sanity Studio:
// Call this URL on document publish

نشر المستودع الأحادي

في مستودع Nx أو Turborepo الأحادي، عيّن الدليل الجذر في Vercel إلى مجلد التطبيق المحدد، واضبط أمر البناء لاستخدام أداة تشغيل مهام المستودع الأحادي.

# Vercel project settings:
# Root Directory: apps/web
# Build Command: npx nx build web --prod
# Output Directory: apps/web/.next

تحقق سريع

ما عملية نشر المعاينة في Vercel؟

مراجعة

صِل مستودع Git بـ Vercel لإجراء عمليات نشر دون إعدادات. يحصل كل فرع على عنوان URL للمعاينة. أدر متغيرات البيئة لكل بيئة من لوحة التحكم، واستخدم vercel.json لعمليات إعادة التوجيه والرؤوس، وVercel CLI للنشر وسحب متغيرات البيئة من الطرفية.

الأسئلة الشائعة

هل درس «النشر إلى Vercel: دون إعداد وعناوين URL للمعاينة» مجاني؟

نعم — نص درس «النشر إلى Vercel: دون إعداد وعناوين URL للمعاينة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «النشر إلى Vercel: دون إعداد وعناوين URL للمعاينة»؟

اربط مستودع GitHub بـ Vercel واضبط متغيرات البيئة واستخدم عمليات نشر المعاينة. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «النشر إلى Vercel: دون إعداد وعناوين URL للمعاينة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. النشر إلى Vercel: دون إعداد وعناوين URL للمعاينة
  2. استضافة React SPA على AWS S3 وCloudFront
  3. وضع تطبيق React/Next.js داخل Docker
  4. ‏CI/CD لـ React باستخدام GitHub Actions
← العودة إلى React Academy