عرض محتوى ديناميكي واستضافة خدمات مصغّرة باستخدام دوال 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 (هذا المثال المفصَّل يستخدم 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 المحلي الذي يعرضه CLI، مثال: 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 ووحدات البرمجيات الوسيطة.

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