دمج أطر عمل أخرى مع Express.js

من خلال إجراء بعض عمليات الضبط الإضافية، يمكنك الاستفادة من وظائف CLI الأساسية المراعية لإطار العمل لتوسيع نطاق دعم الدمج ليشمل أُطر عمل أخرى غير Angular وNext.js.

ملاحظة: Hosting المتوافق مع إطار العمل هو نسخة حصرية مبكرة متاحة للجميع. هذا يعني أن الوظيفة قد تتغير بطرق غير متوافقة مع الإصدارات القديمة. لا يخضع الإصدار التمهيدي لأي اتفاقية مستوى خدمة أو سياسة إيقاف نهائي، وقد يحصل على دعم محدود أو لا يحصل على أي دعم.

قبل البدء

قبل بدء نشر تطبيقك على Firebase، راجِع المتطلبات والخيارات التالية:

• Firebase الإصدار 12.1.0 من واجهة برمجة التطبيقات أو الإصدارات الأحدث احرص على تثبيت واجهة سطر الأوامر باستخدام الطريقة المفضّلة لديك.
• اختياري: تفعيل الفوترة في مشروع Firebase (مطلوب إذا كنت تخطط لاستخدام SSR)

إعداد Firebase

للبدء، عليك إعداد Firebase لمشروع إطار العمل. استخدِم واجهة سطر أوامر Firebase لمشروع جديد، أو عدِّل firebase.json لمشروع حالي.

بدء مشروع جديد

1. في Firebase CLI، فعِّل معاينة إطارات عمل الويب:

   firebase experiments:enable webframeworks

2. شغِّل أمر الإعداد من وحدة التحكّم في سطر الأوامر، ثم اتّبِع التعليمات:

   firebase init hosting

3. يجب الإجابة بـ "نعم" على السؤال "هل تريد استخدام إطار عمل ويب؟ (تجريبي)"

4. اختَر دليل مصدر الاستضافة، والذي يمكن أن يكون تطبيق ويب حاليًا.

5. اختَر Express.js / مخصّص إذا طُلب منك ذلك.

بدء مشروع حالي

غيِّر إعدادات الاستضافة في firebase.json للحصول على خيار source بدلاً من خيار public. على سبيل المثال:

{
  "hosting": {
    "source": "./path-to-your-express-directory"
  }
}

عرض محتوى ثابت

قبل نشر محتوى ثابت، عليك ضبط إعدادات تطبيقك.

الضبط

لمعرفة كيفية نشر تطبيقك، يجب أن يكون Firebase CLI قادرًا على إنشاء تطبيقك ومعرفة مكان وضع أدواتك لملفات الأصول المخصّصة لـ Hosting. ويتم ذلك باستخدام نص npm البرمجي وتوجيه CJS directories في package.json.

في ما يلي ملف package.json:

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

لا تستدعي أداة Firebase CLI سوى نصّ إنشاء التطبيق، لذا عليك التأكّد من أنّ نصّ إنشاء التطبيق شامل.

ملاحظة: يمكنك إضافة خطوات إضافية باستخدام&&. إذا كان لديك الكثير من الخطوات، ننصحك باستخدام نص برمجي لنظام التشغيل أو أدوات مثل npm-run-all أو wireit.

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

إذا كان إطار العمل لا يتيح المعالجة المسبقة بشكل تلقائي، ننصحك باستخدام أداة مثل Rendertron. سيسمح لك Rendertron بإجراء طلبات Chrome بلا واجهة مستخدم رسومية ضد مثيل محلي من تطبيقك، حتى تتمكّن من حفظ محتوى HTML الناتج ليتم عرضه على Hosting.

أخيرًا، تخزِّن أُطر العمل وأدوات الإنشاء المختلفة العناصر في أماكن مختلفة. استخدِم directories.serve لإعلام وحدة التحكم في الخطوط لتحديد المكان الذي يُخرج فيه نصّ الإنشاء العناصر الناتجة:

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    …
}

النشر

بعد ضبط تطبيقك، يمكنك عرض محتوى ثابت باستخدام أمر النشر العادي:

firebase deploy

عرض محتوى ديناميكي

لعرض تطبيق Express على Cloud Functions for Firebase، تأكَّد من تصدير تطبيق Express (أومعالج عنوان URL بأسلوب Express) بطريقة يمكن أن يعثر عليها Firebase بعد تجميع مكتبتك باستخدام npm.

لتنفيذ ذلك، تأكَّد من أنّ توجيه files يتضمّن كل ما هو مطلوب للخادم، ومن إعداد نقطة الإدخال الرئيسية بشكل صحيح في package.json:

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node tools/prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    "files": ["dist", "server.js"],
    "main": "server.js",
    ...
}

تصدير تطبيقك السريع من دالة باسم app:

// server.js
export function app() {
  const server = express();
   …
   return server;
}

أو إذا كنت تفضّل تصدير معالِج عنوان URL بأسلوب سريع، يمكنك تسميته handle:

export function handle(req, res) {
   res.send(‘hello world’);
}

النشر

firebase deploy

يؤدي ذلك إلى نشر المحتوى الثابت في Firebase Hosting والسماح لـ Firebase بالرجوع إلى تطبيق Express المستضاف على Cloud Functions for Firebase.

اختياري: الدمج مع Firebase Authentication

ستحافظ أدوات نشر Firebase المتوافقة مع إطار عمل الويب تلقائيًا على مزامنة حالة العميل والخادم باستخدام ملفات تعريف الارتباط. للوصول إلى سياق المصادقة، يحتوي res.locals عنصر Express اختياريًا على مثيل تطبيق Firebase مصادقة (firebaseApp) والمستخدم الذي سجّل الدخول حاليًا (currentUser).