عرض محتوى ديناميكي واستضافة خدمات مصغّرة باستخدام دوال 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 CLI ومن أنّك أعددت Firebase Hosting.

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

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

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

    • في حال عدم إعداد Cloud Functions:

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

        firebase init functions

      2. اختَر JavaScript عندما يُطلب منك ذلك (يستخدم مثال الجولة الإرشادية هذا JavaScript).

      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 ووحدات الوسيط.

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