Frontend Academy · درس

النشر إلى Vercel وNetlify وCloudflare Pages

صِل مستودعك بكل منصة، واضبط أوامر البناء ومجلدات المخرجات، وافهم عمليات نشر المعاينة للفروع

الدرس 2 من 416 خطوة

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

الثلاثي الحديث لاستضافة الواجهات الأمامية

تُعد Vercel وNetlify وCloudflare Pages المنصات الرائدة لنشر تطبيقات الواجهة الأمامية. توفّر جميعها: عمليات نشر مبنية على Git، وفروع معاينة، ونطاقات مخصصة، وشبكة CDN طرفية، ودوال serverless. اختر منصة واحدة والتزم بها.

Vercel — مصمّمة لـ Next.js

أنشأها فريق Next.js. توفّر تكاملًا من الدرجة الأولى مع Next.js: تحسين الصور دون إعداد، وISR، وEdge Functions، وSpeed Insights. كما تدعم Vite وNuxt وAstro ومعظم أطر العمل الثابتة.

النشر على Vercel

اربط مستودعًا على GitHub أو GitLab أو Bitbucket. تتعرّف Vercel تلقائيًا على إطار العمل، وتشغّل build، ثم تنشر التطبيق.

# Manual deploy (any project):
npm install -g vercel
vercel login
vercel       # preview deploy
vercel --prod  # production deploy

# Or push to main — auto-deploys via Git integration.

إعداد vercel.json

يمكنك تجاوز الإعدادات الافتراضية، مثل أوامر البناء وعمليات إعادة التوجيه والترويسات وإعادة الكتابة.

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "headers": [{
    "source": "/(.*)",
    "headers": [{ "key": "X-Frame-Options", "value": "DENY" }]
  }],
  "redirects": [{ "source": "/old", "destination": "/new", "permanent": true }]
}

Netlify — المنصة الأصلية

كانت رائدة عمليات النشر الحديثة للتطبيقات الثابتة. وتتميّز بدعم قوي للنماذج والهوية والتحليلات. توفّر Netlify Functions وEdge Functions لتنفيذ وظائف serverless. كما تتميّز بدعم ممتاز لـ Vite وHugo وEleventy.

النشر على Netlify

اربط مستودعًا، أو اسحب مجلدًا مبنيًا وأسقطه. يمكنك الإعداد عبر لوحة التحكم أو netlify.toml.

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200   # SPA fallback

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"

واجهة Netlify CLI

توفّر تطويرًا محليًا مع دوال serverless.

npm install -g netlify-cli
netlify login
netlify init
netlify dev       # local server with functions
netlify deploy    # preview
netlify deploy --prod

Cloudflare Pages

تنشر التطبيقات على شبكة Cloudflare الطرفية العالمية. توفّر Pages Functions وظائف serverless على بيئة تشغيل Workers. كما تقدّم خطة مجانية سخية. وهي ممتازة لـ Astro وHono وRemix.

النشر على Cloudflare Pages

اربط مستودعًا عبر لوحة تحكم Cloudflare. أو استخدم wrangler CLI.

# Direct upload via wrangler:
npm install -g wrangler
wrangler login
wrangler pages deploy ./dist --project-name=my-site

# Or push to GitHub — auto-deploys.

ملف wrangler.toml لـ Pages

تستخدم Cloudflare Pages الملف wrangler.toml لإعداد Workers وFunctions.

# wrangler.toml
name = "my-site"
compatibility_date = "2024-01-01"
pages_build_output_dir = "dist"

[vars]
API_URL = "https://api.example.com"

[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "..."

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

تنشئ المنصات الثلاث جميعها عنوان URL فريدًا لكل فرع مرتبط بطلب سحب. ويمكن للمراجعين النقر عليه واختبار التغييرات بمعزل عن غيرها. وهذا هو أسلوب العمل القياسي للفرق اليوم.

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

توفّر المنصات الثلاث جميعها متغيرات خاصة بكل بيئة (الإنتاج والمعاينة والتطوير) عبر لوحة التحكم أو CLI. يجب أن تحمل متغيرات الواجهة الأمامية بادئة (Vite: VITE_، وNext: NEXT_PUBLIC_) لكي تُضمَّن في المتصفح.

# Vercel:
vercel env add API_URL production

# Netlify:
netlify env:set API_URL https://api.example.com

# Cloudflare Pages:
wrangler pages secret put API_URL

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

تتولى المنصات الثلاث جميعها إدارة شهادات SSL تلقائيًا (عبر Let's Encrypt). وجّه سجل DNS من نوع A أو CNAME إلى الهدف الخاص بها، وستصدر الشهادات وتجددها. النطاقات المخصصة مجانية في جميع الخطط المدفوعة.

الاختيار بين المنصات الثلاث

Vercel: الأفضل لـ Next.js، وتوفّر تجربة مطوّر مصقولة، لكنها أغلى قليلًا. Netlify: الأفضل للنماذج والهوية، وتوفّر منظومة إضافات ناضجة. Cloudflare Pages: الأفضل لأداء الحافة، وأقل تكلفة عند التوسع، مع تكامل ممتاز مع Workers. المنصات الثلاث جميعها ممتازة.

تحقّق سريعًا

ما الطريقة القياسية لإنشاء عنوان URL لمعاينة قابلة للنشر لطلب سحب على Vercel أو Netlify أو Cloudflare Pages؟

أجب عليها في الدرس التفاعلي

مراجعة: استضافة الواجهات الأمامية

Vercel: أفضل تكامل مع Next.js. Netlify: النماذج والهوية والإضافات. Cloudflare Pages: أداء الحافة وأقل تكلفة. توفّر المنصات الثلاث جميعها عمليات نشر تلقائية مبنية على Git، وعناوين URL للمعاينة لكل طلب سحب، ومتغيرات بيئة لكل بيئة، وSSL تلقائيًا، ونطاقات مخصصة. يمكنك إعدادها عبر لوحة التحكم أو ملف إعداد خاص بالمنصة (vercel.json وnetlify.toml وwrangler.toml).

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 41
الدروس: 163

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «النشر إلى Vercel وNetlify وCloudflare Pages» مجاني؟

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

ماذا ستتعلم في «النشر إلى Vercel وNetlify وCloudflare Pages»؟

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

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

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

كم من الوقت يستغرق درس «النشر إلى Vercel وNetlify وCloudflare Pages»؟

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

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

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

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

GitHub Actions للواجهة الأمامية: lint وtest وbuild
النشر إلى Vercel وNetlify وCloudflare Pages
متغيرات البيئة في CI
فحوصات Lighthouse الآلية

← العودة إلى Frontend Academy