عرض محتوى ديناميكي واستضافة خدمات مصغّرة باستخدام دوال Cloud

يمكنك دمج Cloud Functions مع Firebase Hosting لإنشاء المحتوى الديناميكي وعرضه أو إنشاء واجهات برمجة تطبيقات REST كخدمات مصغّرة.

تتيح لك Cloud Functions for Firebase تشغيل رمز الخلفية تلقائيًا استجابةً لطلبات HTTPS. يتم تخزين الرمز البرمجي في السحابة الإلكترونية من Google ويتم تنفيذه في بيئة مُدارة. ولا داعي إلى إدارة الخوادم وتوسيع نطاقها بنفسك.

للاطّلاع على أمثلة على حالات الاستخدام ونماذج لـ Cloud Functions المدمجة مع Firebase Hosting، انتقِل إلى نظرتنا العامة حول الخدمات غير الخادمية.

ربط جهاز Cloud Functions بشبكة Firebase Hosting

يقدّم هذا القسم مثالاً توضيحيًا حول ربط دالة بـ Firebase Hosting.

يُرجى العِلم أنّه لتحسين أداء عرض المحتوى الديناميكي، يمكنك ضبط إعدادات ذاكرة التخزين المؤقت بشكل اختياري.

الخطوة 1: إعداد Cloud Functions

  1. تأكَّد من تثبيت أحدث إصدار من واجهة سطر الأوامر Firebase ومن إعداد Firebase Hosting.

    للحصول على تعليمات مفصّلة حول تثبيت واجهة سطر الأوامر وتهيئة Hosting، يُرجى الاطّلاع على دليل البدء في استخدام Hosting.

  2. تأكَّد من إعداد Cloud Functions:

    • إذا كنت قد أعددت Cloud Functions بالفعل، يمكنك الانتقال إلى الخطوة 2: إنشاء دالة HTTPS واختبارها.

    • إذا لم يتم إعداد Cloud Functions:

      1. ابدأ Cloud Functions بتنفيذ الأمر التالي من جذر دليل مشروعك:

        firebase init functions

      2. عندما يُطلب منك ذلك، اختَر JavaScript (يستخدم مثال الشرح هذا JS).

      3. تأكَّد من توفّر الدليل functions في دليل مشروعك المحلي (الذي تم إنشاؤه باستخدام أمر Firebase الذي نفّذته للتو). هذا الدليل functions هو المكان الذي يتضمّن رمز Cloud Functions.

الخطوة 2: إنشاء دالة HTTPS واختبارها لموقعك الإلكتروني Hosting

  1. افتح /functions/index.js في المحرّر المفضّل لديك.

  2. استبدِل محتوى الملف بالرمز التالي.

    ينشئ هذا الرمز دالة HTTPS (اسمها bigben) ترد على طلبات HTTPS بالقيمة BONG لكل ساعة من اليوم، تمامًا مثل الساعة.

    const functions = require('firebase-functions/v1');

exports.bigben = functions.https.onRequest((req, res) => {
  const hours = (new Date().getHours() % 12) + 1  // London is UTC + 1hr;
  res.status(200).send(`<!doctype html>
    <head>
      <title>Time</title>
    </head>
    <body>
      ${'BONG '.repeat(hours)}
    </body>
  </html>`);
});

  3. اختبِر الدوال محليًا باستخدام Firebase Local Emulator Suite.

    1. من جذر دليل المشروع المحلي، نفِّذ الأمر التالي:

      firebase emulators:start

    2. يمكنك الوصول إلى الدالة من خلال عنوان URL المحلي الذي تعرضه واجهة سطر الأوامر، مثلاً: http://localhost:5001/PROJECT_ID/us-central1/bigben.

يمكنك الانتقال إلى مستندات Cloud Functions للحصول على مزيد من المعلومات حول طلبات HTTPS.

توضّح لك الخطوة التالية كيفية الوصول إلى وظيفة HTTPS هذه من عنوان URL Firebase Hosting كي تتمكّن من إنشاء محتوى ديناميكي لموقعك الإلكتروني المستضاف على Firebase.

الخطوة 3: توجيه طلبات HTTPS مباشرةً إلى الدالة

باستخدام قواعد إعادة الكتابة، يمكنك توجيه الطلبات التي تتطابق مع أنماط معيّنة إلى وجهة واحدة. توضّح الخطوات التالية كيفية توجيه جميع الطلبات من المسار ../bigben على موقعك الإلكتروني Hosting لتنفيذ الدالة bigben.

  1. افتح ملف firebase.json.

  2. أضِف إعدادات rewrite التالية ضمن القسم hosting:

    "hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/bigben",
    "function": {
      "functionId": "bigben",
      "region": "us-central1"  // optional (see note below)
      "pinTag": true           // optional (see note below)
    }
  } ]
}

  3. تأكَّد من أنّ عملية إعادة التوجيه تعمل على النحو المتوقّع من خلال إجراء الاختبار مرة أخرى باستخدام محاكيات Firebase.

    1. من جذر دليل المشروع المحلي، نفِّذ الأمر التالي:

      firebase emulators:start

    2. انتقِل إلى عنوان URL المستضاف محليًا لموقعك الإلكتروني كما هو معروض في واجهة سطر الأوامر (عادةً localhost:5000)، ولكن أضِف bigben إلى عنوان URL، على النحو التالي: http://localhost:5000/bigben

  4. كرِّر وظيفتك ووظائف موقعك الإلكتروني. استخدِم محاكيات Firebase لاختبار هذه التكرارات.

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

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1

انتقِل إلى صفحة إعدادات Hosting للحصول على مزيد من التفاصيل حول قواعد إعادة الكتابة. يمكنك أيضًا التعرّف على ترتيب الأولوية للردود لإعدادات Hosting المختلفة.

يُرجى العِلم أنّه لتحسين أداء عرض المحتوى الديناميكي، يمكنك ضبط إعدادات ذاكرة التخزين المؤقت بشكل اختياري.

الخطوة 4: نشر الدالة

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

  1. يمكنك نشر الدالة بالإضافة إلى محتوى Hosting وإعداداتهما على موقعك الإلكتروني من خلال تنفيذ الأمر التالي من جذر دليل مشروعك المحلي:

    firebase deploy --only functions,hosting

  2. يمكنك الوصول إلى موقعك الإلكتروني المباشر ووظيفتك على عناوين URL التالية:

    • النطاقات الفرعية في Firebase:
      PROJECT_ID.web.app/bigben و PROJECT_ID.firebaseapp.com/bigben

    • أي نطاقات مخصّصة مرتبطة:
      CUSTOM_DOMAIN/bigben

استخدام إطار عمل للويب

يمكنك استخدام أُطر الويب، مثل Express.js، في Cloud Functions لعرض المحتوى الديناميكي لتطبيقك وكتابة تطبيقات ويب معقّدة بسهولة أكبر.

تتيح السمة

يقدّم القسم التالي مثالاً توضيحيًا حول كيفية استخدام Express.js مع Firebase Hosting وCloud Functions.

  1. ثبِّت Express.js في مشروعك المحلي عن طريق تنفيذ الأمر التالي من دليل functions:

    npm install express --save

  2. افتح ملف /functions/index.js، ثم استورِد Express.js وفعِّله:

    const functions = require('firebase-functions/v1');
const express = require('express');
const app = express();

  3. أضِف نقطتَي النهاية التاليتَين:

    1. أضِف نقطة النهاية الأولى لعرض فهرس موقعنا الإلكتروني على /.

      app.get('/', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.send(`
    <!doctype html>
    <head>
      <title>Time</title>
      <link rel="stylesheet" href="/style.css">
      <script src="/script.js"></script>
    </head>
    <body>
      <p>In London, the clock strikes:
        <span id="bongs">${'BONG '.repeat(hours)}</span></p>
      <button onClick="refresh(this)">Refresh</button>
    </body>
  </html>`);
});

    2. ونقطة نهاية أخرى لعرض عدد BONG كواجهة برمجة تطبيقات بتنسيق JSON ضمن /api:

      app.get('/api', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.json({bongs: 'BONG '.repeat(hours)});
});

  4. صدِّر تطبيق Express.js كدالة HTTPS:

    exports.app = functions.https.onRequest(app);

  5. في ملف firebase.json، وجِّه جميع الطلبات إلى الدالة app. تسمح عملية إعادة الكتابة هذه لـ Express.js بعرض المسار الفرعي المختلف الذي أعددناه (في هذا المثال، / و/api).

    {
 "hosting": {
   // ...

   // Add the "rewrites" attribute within "hosting"
   "rewrites": [ {
     "source": "**",
     "function": "app"
   } ]
 }
}

إضافة برامج وسيطة

استمرارًا لمثالنا، بعد استخدام Express.js، يمكنك إضافة برنامج وسيط Express.js بالطريقة المعتادة. على سبيل المثال، يمكنك تفعيل طلبات مشاركة الموارد من مصادر متعددة (CORS) على نقاط النهاية.

  1. ثبِّت برنامج cors الوسيط عن طريق تشغيل الأمر التالي:

    npm install --save cors

  2. افتح ملف /functions/index.js، ثم أضِف cors إلى تطبيق Express.js، على النحو التالي:

    const cors = require('cors')({origin: true});
app.use(cors);

انتقِل إلى مستندات Cloud Functions لمزيد من المعلومات عن استخدام Firebase مع تطبيقات Express ووحدات البرامج الوسيطة.

الخطوات التالية