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

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

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

على سبيل المثال، حالات الاستخدام والعيّنات الخاصة بوظائف Cloud Functions التي تم دمجها مع في ما يخص استضافة Firebase، تفضل بزيارة نظرة عامة بدون خادم:

ربط دوال السحابة الإلكترونية باستضافة Firebase

يقدم هذا القسم مثالاً تفصيليًا لربط دالة بـ استضافة Firebase.

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

الخطوة 1: إعداد دوال السحابة الإلكترونية

  1. يُرجى استخدام أحدث إصدار من واجهة سطر الأوامر في Firebase وكذلك تكون قد أعددت استضافة Firebase.

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

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

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

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

      1. يمكنك إعداد دوال السحابة الإلكترونية من خلال تنفيذ الأمر التالي من جذر دليل المشروع الخاص بك:

        firebase init functions

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

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

الخطوة 2: إنشاء وظيفة HTTPS واختبارها في موقعك الإلكتروني المستضيف

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

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

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

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

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

    1. من جذر دليل المشروع المحلي، قم بتشغيل ما يلي :

      firebase emulators:start

    2. يمكنك الدخول إلى الدالة عبر عنوان URL المحلي الذي يعرضه CLI، مثال: http://localhost:5001/PROJECT_ID/us-central1/bigben

انتقِل إلى مستندات دوال Cloud. للاطّلاع على مزيد من المعلومات عن طلبات HTTPS.

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

الخطوة 3: توجيه طلبات HTTPS إلى وظيفتك

مع قواعد إعادة كتابة، يمكنك توجيه الطلبات التي تتطابق مع أنماط معينة مع وجهة واحدة. توضح الخطوات التالية يمكنكم توجيه جميع الطلبات من المسار ../bigben على خدمة الاستضافة لتنفيذ الدالة 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)، ولكن أضِف عنوان URL بالرمز bigben، على النحو التالي: http://localhost:5000/bigben

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

لتحقيق أفضل أداء، يمكنك تجميع الدوال باستخدام "الاستضافة" اختيار إحدى المناطق التالية:

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

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

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

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

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

  1. انشر وظائفك ومحتوى الاستضافة والتهيئة على من خلال تشغيل الأمر التالي من جذر المشروع المحلي الدليل:

    firebase deploy --only functions,hosting

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

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

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

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

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

يقدم القسم التالي مثالاً تفصيليًا لاستخدام Express.js مع استضافة Firebase ووظائف السحابة الإلكترونية.

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

    npm install express --save

  2. افتح ملف /functions/index.js، ثم قم باستيراد Express.js وإعداده:

    const functions = require('firebase-functions');
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. لمعرفة المزيد من المعلومات عن استخدام Firebase مع تطبيقات Express ووحدات البرمجيات الوسيطة.

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