Vue Academy · درس

‏Fastify Backend لتطبيقات Vue SPA

مسارات Fastify، وCORS، وتقديم نسخة Vue الثابتة، وتحديد معدل الطلبات، والتحقق من الطلبات

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

لماذا Fastify لتطبيق Vue أحادي الصفحة

Fastify هو إطار عمل ويب سريع ومنخفض التكلفة الإضافية لـ Node.js، ويتميز بمنظومة قوية من الإضافات والتحقق المدمج من المخططات. وهو يشكل واجهة خلفية ممتازة لواجهة API الخاصة بتطبيق Vue أحادي الصفحة، كما يمكنه تقديم الملفات الثابتة المبنية.

إنشاء الخادم باستخدام مسجّل

أنشئ مثيلًا من Fastify باستخدام logger: true للحصول على تسجيل منظّم للطلبات عبر Pino مباشرةً. وهذا مفيد جدًا لتصحيح أخطاء استدعاءات API القادمة من تطبيق Vue.

import Fastify from 'fastify'

const app = Fastify({
  logger: true
})

await app.listen({ port: 3000, host: '0.0.0.0' })

CORS لخادم تطوير Vue

أثناء التطوير، يعمل تطبيق Vue من مصدر مختلف (مثل localhost:5173). سجّل @fastify/cors واسمح بذلك المصدر حتى يسمح المتصفح باستدعاءات API من مصادر مختلفة.

import cors from '@fastify/cors'

await app.register(cors, {
  origin: 'http://localhost:5173',
  credentials: true // allow cookies
})

تقديم dist المبني لتطبيق Vue

في بيئة الإنتاج، تقدّم تطبيق Vue المُجمَّع. سجّل @fastify/static مع الإشارة إلى مجلد dist حتى يقدّم Fastify الملف index.html والأصول.

import fastifyStatic from '@fastify/static'
import { join } from 'node:path'

await app.register(fastifyStatic, {
  root: join(process.cwd(), 'dist'),
  prefix: '/'
})

مسار fallback لتطبيق SPA

يستخدم تطبيق Vue أحادي الصفحة التوجيه من جهة العميل، لذلك يجب أن تعيد المسارات غير المعروفة الملف index.html (وليس 404). أضف fallback شاملًا يقدّم هيكل التطبيق حتى تعمل الروابط العميقة عند إعادة التحميل.

app.setNotFoundHandler((req, reply) => {
  // let the Vue router handle non-API paths
  if (req.url.startsWith('/api')) {
    return reply.code(404).send({ error: 'Not found' })
  }
  return reply.sendFile('index.html')
})

تحديد معدل الطلبات

احمِ واجهة API من إساءة الاستخدام باستخدام @fastify/rate-limit. اضبط حدًا أقصى لعدد الطلبات لكل نافذة زمنية ولكل عميل.

import rateLimit from '@fastify/rate-limit'

await app.register(rateLimit, {
  max: 100,            // requests
  timeWindow: '1 minute'
})

التحقق من المخططات في المسارات

يتحقق Fastify من البيانات ويُسلسلها باستخدام JSON Schema. عرّف مخططًا لـ body، وسيرفض Fastify البيانات غير الصالحة بالرمز 400 قبل تشغيل المعالج، من دون الحاجة إلى تحقق يدوي.

app.post('/api/users', {
  schema: {
    body: {
      type: 'object',
      required: ['email', 'name'],
      properties: {
        email: { type: 'string', format: 'email' },
        name: { type: 'string', minLength: 1 }
      }
    }
  }
}, async (req) => {
  return createUser(req.body)
})

مخططات الاستجابة لتحسين السرعة

تتيح إضافة مخطط response لـ Fastify إجراء تسلسل الناتج باستخدام مُسلسِل سريع مُجمَّع مسبقًا، كما تحذف الحقول غير الموجودة في المخطط، مما يحسن الأداء والأمان معًا.

app.get('/api/users/:id', {
  schema: {
    response: {
      200: {
        type: 'object',
        properties: {
          id: { type: 'number' },
          name: { type: 'string' }
          // password is omitted, never serialized
        }
      }
    }
  }
}, getUserHandler)

تنظيم المسارات على هيئة إضافات

يشجع Fastify على العزل: اجمع المسارات المرتبطة في إضافات مسجَّلة ضمن بادئة. وهذا يحافظ على نمطية واجهة API مع نموها.

async function userRoutes(app) {
  app.get('/', listUsers)
  app.post('/', createUser)
}

await app.register(userRoutes, { prefix: '/api/users' })

ترتيب تسجيل الإضافات

الترتيب مهم: سجّل الإضافات الشاملة مثل cors وrate-limit قبل المسارات، وسجّل static وSPA fallback أخيرًا، حتى تتم مطابقة مسارات API قبل أن يقدّم المسار الشامل index.html.

await app.register(cors, corsOpts)
await app.register(rateLimit, rlOpts)
await app.register(userRoutes, { prefix: '/api/users' })
await app.register(fastifyStatic, staticOpts) // last

استراتيجية التطوير مقابل الإنتاج

في بيئة التطوير، شغّل خادم تطوير Vite وFastify بشكل منفصل، مع الاعتماد على CORS. وفي بيئة الإنتاج، ابنِ تطبيق Vue ودَع Fastify يقدّم dist من المصدر نفسه، فلا حاجة إلى CORS وتصبح العملية قابلة للنشر كوحدة واحدة.

اختبار سريع

اختبر مدى فهمك للواجهة الخلفية باستخدام Fastify.

مراجعة

لقد تعلمت بناء واجهة خلفية باستخدام Fastify لتطبيق Vue أحادي الصفحة:

يوفّر logger: true تسجيلًا منظّمًا للطلبات
يسمح @fastify/cors بمصدر خادم تطوير Vue
يقدّم @fastify/static مجلد dist المبني؛ ويمكّن fallback الشامل من توجيه SPA
تحمي @fastify/rate-limit من إساءة الاستخدام
يتحقق JSON Schema من أجسام الطلبات ويُسلسل الاستجابات بأمان وسرعة

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

هل درس «‏Fastify Backend لتطبيقات Vue SPA» مجاني؟

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

ماذا ستتعلم في «‏Fastify Backend لتطبيقات Vue SPA»؟

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

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

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

كم من الوقت يستغرق درس «‏Fastify Backend لتطبيقات Vue SPA»؟

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

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

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

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

‏Fastify Backend لتطبيقات Vue SPA
مصادقة JWT: تسجيل الدخول والتحديث
استدعاءات API الموثّقة باستخدام Axios Interceptors
نشر Vue كامل المكدس في الإنتاج

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